💻 프론트엔드 커리큘럼

모던 웹 개발의 기초부터 실전 프로젝트까지 진행하며, Node.js, React, 빌드 도구 등을 학습합니다. 협업과 코드 리뷰를 통해 실무 역량을 강화합니다.

프로젝트 준비 과정 🔧

• • Node.js & npm: Node.js의 기본 개념과 npm, Yarn 사용법을 익혀 현대 웹 개발의 기초를 다집니다.
• • Semantic Versioning: 패키지 버전 관리 원리를 이해하고, 효율적인 버전 관리를 학습합니다.
• • 트랜스파일러 & 번들러: Babel로 ES6+ 코드를 트랜스파일링하고, Webpack을 통해 모듈을 번들링하는 방법을 배웁니다.
• • 모던 빌드 도구 & Vite: Vite를 활용하여 빠른 개발 환경을 구축하고, 생산성을 높이는 방법을 학습합니다.
• • 코드 품질 도구: ESLint와 Prettier로 코드 스타일을 유지하며, Husky로 Git Hooks를 설정해 협업 시 일관성을 유지합니다.
• • 브랜치 전략 & 코드 리뷰: Git Flow와 GitHub Flow를 통해 효율적인 협업을 진행하고, GitHub를 통해 코드 리뷰를 수행하여 코드 품질을 향상시킵니다.

프로젝트 1: SNS 앱 개발 💬

• • React 환경 설정: 프레임워크 없이 React 프로젝트를 구성하고, 필요한 라이브러리를 설정하여 프로젝트 환경을 구축합니다.
• • API 통신: HTTP와 RESTful API의 기본 개념을 이해하고, Axios 또는 Fetch API를 사용하여 서버와 데이터를 주고받는 방법을 배웁니다.
• • 기본 컴포넌트 개발: 공통 에러 핸들링 및 이미지 뷰어 컴포넌트를 설계하고 구현하며, Suspense와 Error Boundary를 활용하여 비동기 처리와 에러 관리를 효율적으로 수행합니다.
• • UI/UX 개선: 사용자 경험을 향상시키기 위해 Optimistic UI 업데이트와 Infinite Scroll 기능을 구현하고, Intersection Observer를 사용하여 성능을 최적화합니다.
• • 고급 UI 컴포넌트: Carousel, 앨범 등 SNS에서 자주 사용되는 재사용 가능한 UI 컴포넌트를 설계하고 구현하여 실무에서의 활용도를 높입니다.
• • 프로젝트 마무리 & 배포 준비: 모든 기능을 구현하고 테스트하여 프로젝트를 최종 검토한 후, GitHub에서 코드 리뷰를 통해 피드백을 반영하여 최종 배포 준비를 완료합니다.