1. 프로젝트 준비 과정

Node.js와 패키지 관리

• Node.js 및 패키지 매니저 학습
  Node.js의 기본 개념과 npm, Yarn 등의 패키지 매니저 사용법을 학습합니다.

• 패키지 버전 관리 (Semantic Versioning)
  Semantic Versioning의 원리를 이해하고, 패키지 버전을 효율적으로 관리하는 방법을 배웁니다.

• 자바스크립트 Deep Dive 학습 시작
  자바스크립트의 심화 개념을 학습하며, 기본기 강화를 위한 첫걸음을 시작합니다.

트랜스파일러와 번들러

• Babel을 통한 트랜스파일링 학습
  Babel을 사용하여 ES6+ 코드를 구형 브라우저에서도 작동 가능하게 변환하는 방법을 배웁니다.

• Webpack을 활용한 번들링 기법 이해
  Webpack을 이용해 자바스크립트 모듈을 효율적으로 번들링하고, 로더와 플러그인의 개념을 학습합니다.

• 자바스크립트 Deep Dive 계속 학습
  자바스크립트의 심화 개념을 지속적으로 학습합니다.

모던 빌드 도구와 Vite

• Vite를 활용한 빠른 개발 환경 구축
  Vite의 사용법을 학습하고, 빠른 빌드와 핫 리로딩을 통해 개발 생산성을 높이는 방법을 배웁니다.

• 자바스크립트 Deep Dive 계속 학습
  자바스크립트의 심화 개념을 지속적으로 학습합니다.

ESLint, Prettier, Husky

• ESLint와 Prettier를 사용한 코드 품질 유지
  ESLint와 Prettier를 사용하여 코드 스타일을 자동으로 유지하고, 협업 시 일관성을 유지합니다.

• Husky를 통한 Git Hooks 설정
  Husky를 사용하여 Git Hooks를 설정하고, 코드 커밋 전 자동 검사를 수행하는 방법을 배웁니다.

• 프로젝트 빌드 과정 학습
  실제 프로젝트의 빌드 과정을 이해하고, 설정 파일을 작성하여 효율적인 빌드 환경을 만듭니다.

• GitHub 코드리뷰 과정 학습
  GitHub에서 코드 리뷰를 효과적으로 수행하는 방법을 배우고, 팀 내 협업을 원활히 진행합니다.

• 자바스크립트 Deep Dive 계속 학습
  자바스크립트의 심화 개념을 지속적으로 학습합니다.

브랜치 전략 및 코드 리뷰

• Git 브랜치 전략 학습
  Git Flow, GitHub Flow 등의 브랜치 전략을 학습하고, 프로젝트에 적합한 방식을 선택하여 적용합니다.

• 자바스크립트 Deep Dive 완료
  자바스크립트의 심화 학습을 마무리하고, 실무에서 활용할 수 있는 기본기를 다집니다.

2. 프로젝트 1: SNS 앱 개발

프로젝트 환경 설정 및 초기 개발

• React 프로젝트 환경 설정
  프레임워크 도움 없이 React 프로젝트의 환경을 직접 설정하고, 필요 라이브러리를 구성합니다.

• 네트워크 원리 및 API 통신 학습
  HTTP, RESTful API의 기본 개념을 이해하고, Axios 또는 Fetch API를 사용하여 서버와 통신하는 방법을 익힙니다.

초기 컴포넌트 개발

• 공통 에러 핸들링 및 이미지 뷰어 컴포넌트 개발
  앱에서 발생할 수 있는 공통 에러를 처리하고, 이미지 뷰어 컴포넌트를 설계 및 구현합니다.

• Suspense와 Error Boundary 개념 이해 및 적용
  React의 Suspense와 Error Boundary를 활용하여 비동기 처리 및 에러 처리를 보다 효율적으로 관리합니다.

UI/UX 개선 및 고급 기능 구현

• Optimistic UI 및 Infinite Scroll 구현
  사용자 경험을 향상시키기 위해 Optimistic UI 업데이트와 Infinite Scroll 기능을 구현합니다.

• Intersection Observer를 통한 성능 최적화
  Intersection Observer API를 사용하여 성능을 최적화하고, 스크롤 이벤트를 효율적으로 관리합니다.

고급 UI 컴포넌트 개발

• UI 컴포넌트 개발 (Carousel, 앨범 등)
  Carousel, 앨범 등 SNS에서 자주 사용되는 UI 컴포넌트를 설계하고 구현하여 재사용성을 높입니다.

• 상태 관리 및 최적화 전략 학습
  React의 상태 관리 기법을 학습하고, 성능을 최적화하는 방법을 익힙니다.

프로젝트 마무리 및 코드 리뷰

• SNS 프로젝트 마무리 및 배포 준비
  프로젝트의 모든 기능을 구현하고, 테스트를 통해 최종 검토 및 디버깅을 진행합니다.

• GitHub를 통한 코드 리뷰 및 피드백
  GitHub를 통해 팀원들과 코드 리뷰를 진행하고, 피드백을 반영하여 프로젝트를 개선합니다.