React

• 사용자 인터페이스 구축을 위한 컴포넌트 기반 JavaScript 라이브러리
• 선언적 UI: 각 상태에 대한 뷰를 설계하면 데이터 변경 시 적절한 컴포넌트만 효율적으로 업데이트
• 컴포넌트 기반: 캡슐화된 컴포넌트로 복잡한 UI를 구성
• Learn Once, Write Anywhere: 기존 코드 재작성 없이 새로운 기능 개발 가능
• 가상 DOM: 실제 DOM 조작을 최소화하여 성능 최적화
• 단방향 데이터 흐름: 예측 가능한 상태 관리와 디버깅 용이성

Life Cycle - Hook

함수형 컴포넌트에서 생명주기와 상태를 관리하는 Hook 시스템

• useEffect(): 컴포넌트 마운트/업데이트/언마운트 시점에 사이드 이펙트 처리 (API 호출, 구독 설정/해제에 적합)
• useState(): 함수형 컴포넌트에서 상태 관리 (지역 상태 관리에 적합)
• useContext(): Context API를 통한 전역 상태 접근 (props drilling 해결에 적합)
• useMemo() / useCallback(): 성능 최적화를 위한 메모이제이션 (비용이 큰 계산이나 함수 재생성 방지에 적합)

상태 관리 - Redux vs Zustand

• Redux: 예측 가능한 상태 컨테이너

  • 단일 스토어, 불변성, 순수 함수 기반
  • 액션 → 리듀서 → 스토어 업데이트 흐름
  • 복잡한 상태 로직과 시간 여행 디버깅에 강력

• Zustand: 간단하고 확장 가능한 상태 관리

  • 보일러플레이트 최소화, 직관적인 API
  • 불변성 자동 처리, TypeScript 친화적
  • 작은 번들 사이즈와 빠른 학습 곡선

빌드 번들러 - Webpack vs Vite

• Webpack: 모듈 번들러의 표준

  • 풍부한 플러그인 생태계와 세밀한 설정 가능
  • 코드 스플리팅, 트리 쉐이킹 등 고급 최적화 기능
  • 대규모 프로젝트와 복잡한 빌드 요구사항에 적합

• Vite: 빠른 개발 서버와 번들러

  • ES 모듈 기반 개발 서버로 즉시 시작
  • HMR(Hot Module Replacement) 성능 대폭 향상
  • 개발 환경에서의 빠른 피드백 루프에 최적화