00 시작하기

1. 시작하기 전에

1.1. 이 교안으로 만들 것

피그마 디자인을 보고 포트폴리오 웹사이트를 React로 직접 만들어봅니다.

1
┌──────────────────────────────────────────────┐
2
│  [로고]    Home  AboutMe  Projects            │  ← 네비게이션
3
├──────────────────────────────────────────────┤
4
│                                              │
5
│      Title                                   │  ← 히어로
6
│      Subtitle                                │
7
│  [Github]  [Resume]                          │
8
│                                              │
9
├──────────────────────────────────────────────┤
10
│  ABOUT ME                                    │  ← 소개
11
│  학력 / 자격사항 / 인적사항                    │
12
├──────────────────────────────────────────────┤
13
│  Projects                                    │  ← 프로젝트
14
│  [설명]            [이미지]                   │
15
├──────────────────────────────────────────────┤
16
│  contacts                                    │  ← 연락처
17
│  Name / Email / Message / [Submit]           │
18
├──────────────────────────────────────────────┤
19
│  Thanks    X  IG  YT  LI   copyright         │  ← 푸터
20
└──────────────────────────────────────────────┘

1.2. 단계별 학습 순서

파일	내용
01_App	전체 구조 조립
02_CSS기초	스타일 초기화
03_Nav	네비게이션 바
04_Hero	히어로 섹션
05_AboutMe	소개 섹션
06_Projects	프로젝트 섹션
07_Contact	연락처 폼
08_Footer	하단 푸터

1.3. React를 배우기 전 꼭 알아야 할 것

1.3.1. 컴포넌트란?

레고 블록처럼 화면을 작은 조각으로 쪼개서 만드는 방식입니다.

1
App (전체 페이지)
2
├── Nav         ← 네비게이션 블록
3
├── Hero        ← 히어로 블록
4
├── AboutMe     ← 소개 블록
5
├── Projects    ← 프로젝트 블록
6
├── Contact     ← 연락처 블록
7
└── Footer      ← 푸터 블록

각 블록을 따로 만들고 → App에서 조립합니다.

1.3.2. JSX란?

React에서 화면을 그리는 문법입니다. HTML처럼 생겼지만 JavaScript 안에 씁니다.

1
// HTML
2
<div class="nav">안녕</div>
3

4
// JSX (React)
5
<div className="nav">안녕</div>
6
//       ↑ class 대신 className을 씁니다

1.3.3. 파일 구조

1
src/
2
├── main.jsx          ← 앱 시작점
3
├── router.js         ← 라우터 설정
4
├── App.jsx           ← 전체 조립
5
├── index.css         ← 스타일
6
└── components/       ← 각 블록(컴포넌트) 파일들
7
    ├── Nav.jsx
8
    ├── Hero.jsx
9
    └── ...