✅ 이 단계에서 할 일
1. 어떤 폴더가 필요한지 이해하기
2. 실제로 폴더를 만들어서 구조 잡기
3. 각 폴더의 역할과 사용법 설명하기
📂 추천 폴더 구조 (Next.js App Router 기준)
frontend-portfolio/
├── src/
│ ├── app/ # Next.js App Router 라우팅 디렉토리
│ │ ├── page.tsx # 메인 페이지
│ │ ├── layout.tsx # 루트 레이아웃
│ │ └── globals.css # 전역 스타일
│ │
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ └── ProjectCard.tsx
│ │
│ ├── sections/ # 각 페이지의 시각적 섹션 (Hero, About, Projects 등)
│ │ ├── Hero.tsx
│ │ ├── About.tsx
│ │ └── Projects.tsx
│ │
│ ├── styles/ # Tailwind 외 커스텀 스타일 (선택)
│ │ └── variables.css
│ │
│ ├── data/ # 정적 데이터 (예: 프로젝트 리스트)
│ │ └── projects.ts
│ │
│ └── lib/ # 유틸 함수, API 호출 등 공용 로직 (선택)
│ └── formatDate.ts📁 각 폴더 역할 설명
| 폴더 | 설명 |
|---|---|
app/ | Next.js 라우팅 핵심. 모든 페이지, 레이아웃은 이 안에서 시작 |
components/ | 버튼, 카드, 헤더/푸터 등 재사용 가능한 작은 단위 UI |
sections/ | 페이지를 구성하는 시각적 섹션 단위 (Hero, Projects 등) |
styles/ | 필요시 Tailwind 외 CSS 변수나 reset 스타일 등 관리 |
data/ | JSON or TypeScript 객체 형태의 정적 콘텐츠 (포트폴리오 목록 등) |
lib/ | API 요청, 날짜 포맷, 헬퍼 함수 등 비즈니스 로직 담당 |
✅ 폴더 생성 방법 (터미널에서)
cd src
mkdir components sections styles data lib또는 VS Code에서 직접 폴더 우클릭 → 새 폴더로 만들기
✅ 앞으로 컴포넌트를 만들 땐
- 단일 UI 요소 → components/
- 페이지 구성 단위 → sections/
예: 프로젝트 카드 UI → components/ProjectCard.tsx
프로젝트 소개 섹션 → sections/Projects.tsx
✨ 정리
- app/은 Next.js의 핵심 라우팅
- components/, sections/으로 UI 분리 → 유지보수성 향상
- data/, lib/ 등 실무에서도 사용하는 구조로 구성
- 한 파일에 너무 많은 JSX를 넣지 않고 역할별로 분리
html_programming_language