1. 시작하기 전에
1.1. 이 교안으로 만들 것
피그마 디자인을 보고 포트폴리오 웹사이트를 React로 직접 만들어봅니다.
┌──────────────────────────────────────────────┐
│ [로고] Home AboutMe Projects │ ← 네비게이션
├──────────────────────────────────────────────┤
│ │
│ Title │ ← 히어로
│ Subtitle │
│ [Github] [Resume] │
│ │
├──────────────────────────────────────────────┤
│ ABOUT ME │ ← 소개
│ 학력 / 자격사항 / 인적사항 │
├──────────────────────────────────────────────┤
│ Projects │ ← 프로젝트
│ [설명] [이미지] │
├──────────────────────────────────────────────┤
│ contacts │ ← 연락처
│ Name / Email / Message / [Submit] │
├──────────────────────────────────────────────┤
│ Thanks X IG YT LI copyright │ ← 푸터
└──────────────────────────────────────────────┘
1.2. 단계별 학습 순서
| 파일 | 내용 |
|---|---|
| 01_App | 전체 구조 조립 |
| 02_CSS기초 | 스타일 초기화 |
| 03_Nav | 네비게이션 바 |
| 04_Hero | 히어로 섹션 |
| 05_AboutMe | 소개 섹션 |
| 06_Projects | 프로젝트 섹션 |
| 07_Contact | 연락처 폼 |
| 08_Footer | 하단 푸터 |
1.3. React를 배우기 전 꼭 알아야 할 것
1.3.1. 컴포넌트란?
레고 블록처럼 화면을 작은 조각으로 쪼개서 만드는 방식입니다.
App (전체 페이지)
├── Nav ← 네비게이션 블록
├── Hero ← 히어로 블록
├── AboutMe ← 소개 블록
├── Projects ← 프로젝트 블록
├── Contact ← 연락처 블록
└── Footer ← 푸터 블록
각 블록을 따로 만들고 → App에서 조립합니다.
1.3.2. JSX란?
React에서 화면을 그리는 문법입니다. HTML처럼 생겼지만 JavaScript 안에 씁니다.
// HTML
<div class="nav">안녕</div>
// JSX (React)
<div className="nav">안녕</div>
// ↑ class 대신 className을 씁니다
1.3.3. 파일 구조
src/
├── main.jsx ← 앱 시작점
├── router.js ← 라우터 설정
├── App.jsx ← 전체 조립
├── index.css ← 스타일
└── components/ ← 각 블록(컴포넌트) 파일들
├── Nav.jsx
├── Hero.jsx
└── ...
1.4. 프로젝트 실행
npm run dev
1.5. 제플린 가입
- 무료 inspector 를 사용하기 위해 아래의 서비스를 신청한다.
- 제플린 가입 -> 무료사용자는 1개의 프로젝트만 생성할수 있다.
- 홈페이지
- 아래의 순서대로 클릭한다.
- 우측의 코드 스니펫이 보이지 않을 경우 확장프로그램을 추가한다.
