Day 29 (11/27) - 파이썬 기초 문법 및 리액트 라이프사이클

🐍 Python 기초 문법 및 자료형

1. 주요 연산자 및 함수

• divmod(a, b): 몫과 나머지를 튜플 형태로 동시에 반환 (예: divmod(10, 3) → (3, 1))
• **: 거듭제곱 연산자 (예: 2**3 → 8)
• def: 함수 정의 키워드 (형식: def 함수명(매개변수): return 결과값)
• type(): 객체의 자료형 확인

2. 자료형 분류 및 특징

• 기본 자료형: 숫자형(int, float), 문자열(str), 논리형(bool)
• 컨테이너 자료형 (Collection)
  • list: 순서가 있고 수정 가능한 요소의 모음 ([])
  • tuple: 순서가 있으나 수정 및 삭제가 불가능한 읽기 전용 모음 (())
  • dict: 키(Key)와 값(Value)의 쌍으로 이루어진 순서 없는 모음 ({})
  • set: 중복을 허용하지 않고 순서가 없는 집합 ({})

3. 제어문 및 고급 기능

• 조건문: if, elif, else를 통한 조건별 로직 수행
• 반복문: for (범위 및 리스트 순회), while (조건부 반복)
• 흐름 제어: continue (다음 반복으로 건너뛰기), break (반복문 탈출)
• List Comprehension: 리스트를 간결하고 빠르게 생성하는 문법
  • 예: [i for i in range(10) if i % 2 == 0]

---

⚛️ React 라이프사이클 및 useEffect

컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라지는 전체 과정 제어

• Mount (탄생): 컴포넌트가 화면에 처음 렌더링되는 시점
• Update (변화): State/Props 변경 또는 부모 리렌더링으로 인해 자신도 리렌더링되는 시점
• Unmount (죽음): 컴포넌트가 화면에서 제거되기 직전의 시점
• useEffect 훅: 특정 값이 변할 때마다 함수를 실행하여 라이프사이클을 제어하는 기능

---

⚡ Vite 프로젝트 생성 및 실행

빠르고 가벼운 프론트엔드 빌드 도구인 Vite를 이용한 환경 구축 프로세스

1. 프로젝트 생성

   npm create vite@latest
   # 프레임워크 선택: React
   # 언어 선택: JavaScript (JS)

    

2. 패키지 설치 및 실행

   cd 프로젝트명
   npm install    # 의존성 패키지 설치
   npm run dev    # 개발 서버 실행

    

3. 개발 서버 제어 키
   • o + Enter: 브라우저에서 실행 화면 열기
   • q + Enter: 서버 종료
   • h + Enter: 도움말 확인

---

💾 학습 메모 및 팁

• Python 환경: Python 3.14 설치 시 환경변수(Add Python to PATH) 체크 필수
• 문자열 팁: 여러 줄 문자열은 따옴표 3개(""") 사용, 문자열 내 따옴표 포함 시 서로 다른 종류의 따옴표 사용
• 파일 모드: r(읽기), w(쓰기), a(추가) 모드 구분 사용
• 도구 추천: Chrome 개발자 도구의 React Developer Tools 설치 권장

---

 

1. 파이썬 컨테이너 자료형 한눈에 비교

각 자료형의 특성을 파악하여 상황에 맞는 데이터 구조 선택 가능.

자료형	기호	순서(Index)	중복 허용	수정 가능(Mutable)
List	[]	있음	가능	가능
Tuple	()	있음	가능	불가능
Dictionary	{K:V}	없음	Key 불가능	가능
Set	{}	없음	불가능	가능

---

2. 파이썬 효율 극대화: List Comprehension

기존 for 루프를 한 줄로 줄여 가독성과 처리 속도를 높이는 기법.

• 기본형: [expression for item in iterable]
• 조건문 포함: [expression for item in iterable if condition]

# 0부터 9까지 짝수만 담은 리스트 생성 예시
# 일반 방식
even_list = []
for i in range(10):
    if i % 2 == 0:
        even_list.append(i)

# List Comprehension 방식
even_list = [i for i in range(10) if i % 2 == 0]

---

3. React useEffect: 라이프사이클 제어 코드

컴포넌트의 각 생애 주기(Lifecycle)에 맞춘 useEffect 사용법

• Mount (최초 렌더링 시 1회 실행)

  useEffect(() => {
    console.log("컴포넌트 마운트 완료")
  }, []) // 빈 의존성 배열

   

• Update (특정 값이 변경될 때마다 실행)

  useEffect(() => {
    console.log("데이터 업데이트됨")
  }, [value]) // value가 변경될 때 실행

   

• Unmount (컴포넌트 제거 시 정리)

  useEffect(() => {
    return () => {
      console.log("컴포넌트 언마운트 전 정리(Cleanup)")
    }
  }, [])

---

4. Vite 프로젝트 환경 설정 꿀팁

• 의존성 설치 생략 주의: npm create vite는 폴더 구조만 생성하므로, 반드시 npm install을 통해 node_modules를 생성해야 실행 가능함
• 포트 충돌 해결: 기본 포트(5173) 사용 중일 경우 npm run dev -- --port 3000 등으로 포트 변경 실행 가능
• 환경 변수: Vite에서는 process.env 대신 import.meta.env를 사용하여 환경 변수에 접근함