이 저장소는 ⭐️프론트엔드 스프린터⭐️ 여러분의 코드를 관리하는 곳입니다.
판다마켓 프로젝트를 통해 HTML/CSS 기초부터 React, TypeScript, Next.js까지 단계별로 학습해보세요.
13개의 미션을 수행하며 나만의 중고거래 플랫폼을 완성해봅시다! 🚀
안녕하세요! 판다마켓 프로젝트에 오신 것을 환영합니다! 🥳
판다마켓은 따뜻한 중고거래를 지향하는 커뮤니티 플랫폼입니다. 여러분은 이 프로젝트를 통해 단순히 화면을 그리는 것을 넘어, 실제 서비스 가능한 수준의 프론트엔드 애플리케이션을 구축하게 됩니다.
스프린트 미션은 하나의 개인 프로젝트를 장기적으로 발전시키면서, 주기적으로 피드백을 받을 수 있는 시스템입니다.
각 스프린트마다 새롭게 학습한 이론을 직접 적용해 보고, 주강사의 코드 리뷰를 통해 부족한 부분을 보완하며 실력을 단계적으로 성장시킬 수 있는 중요한 개인 과제예요. 💪
여러분이 구현하게 될 판다마켓의 핵심 기능이에요.
- 인증/인가: 회원가입, 로그인을 할 수 있어요.
- 상품 등록: 내가 가진 물건의 사진과 설명을 추가해 물건을 등록할 수 있어요.
- 문의 댓글: 상품에 대해 궁금한 점을 댓글로 남기고 소통할 수 있어요.
- 자유게시판: 다양한 주제로 이야기를 나누는 커뮤니티 공간이에요.
프로젝트는 기술 스택의 변화에 따라 크게 3개의 파트(브랜치)로 나뉩니다. 각 단계에 맞는 브랜치에서 작업을 시작해 주세요.
| 구분 | 브랜치명 | 미션 범위 | 주요 학습 내용 |
|---|---|---|---|
| Part 1 | Basic |
Mission 1 ~ 4 | HTML, CSS, Vanilla JS, DOM 조작, 반응형 디자인 |
| Part 2 | React |
Mission 5 ~ 7 | React, Component, Hooks, State Management, API 연동 |
| Part 3 | Next |
Mission 8 ~ 13 | TypeScript, Next.js, SSR/SSG, Routing, Image Optimization |
Note
마지막 미션인 스프린트 미션 13은 지금까지 배운 내용을 바탕으로 디자인, 기능을 자유롭게 개선하는 미션입니다. 따라서, 피그마 페이지는 따로 제공되지 않습니다. 🙂
- Basic : 스프린트 미션 1 ~ 4
- 웹의 본질인 HTML/CSS/JS를 탄탄히 다집니다.
- 기본적인 웹 애플리케이션 기능 구현을 위한 초기 브랜치입니다.
- React : 스프린트 미션 5 ~ 7
- React의 컴포넌트 철학을 이해하고 SPA를 구축합니다.
- Next : 스프린트 미션 8 ~ 13
- TypeScript와 Next.js를 도입하여 타입시스템, SSR, 최적화 등 모던 웹 개발 방식을 배웁니다.
Important
본 프로젝트는 코드잇의 소유이며, 교육 목적으로만 사용됩니다. © 2025 Codeit. All rights reserved.