1. 프로젝트 생성

원하는 작업 폴더(예: 다른 실습 폴더와 나란한 위치)에서 실행합니다.

npm create vite@latest bookshelf -- --template react

터미널에 프레임워크를 물으면 이미 --template react로 지정했으므로 추가 질문 없이 바로 생성됩니다.

2. 의존 패키지 설치와 실행

cd bookshelf
npm install
npm run dev

터미널에 뜬 주소(기본값 http://localhost:5173)를 브라우저에서 엽니다. Vite 기본 데모 화면(React 로고, 카운터 버튼)이 보이면 정상입니다.

3. App.jsx를 비워 빈 화면 만들기

src/App.jsx를 아래 내용으로 바꿉니다. 다음 편(04편)부터 이 자리에 책 카드를 만듭니다.

// src/App.jsx
function App() {
  return (
    <div className="app">
      <h1>bookshelf</h1>
    </div>
  );
}
 
export default App;

기본 템플릿이 만든 src/App.css는 이 과목에서 쓰지 않으므로 App.jsx의 import './App.css' 줄이 남아 있다면 지웁니다.

4. 데이터 시드 내려받기

bookshelf는 실제 책 데이터를 여섯 권 담은 시드 파일로 시작합니다. src/data/ 폴더를 만들고 아래 주소의 내용을 books.seed.json으로 저장합니다.

mkdir src/data
curl -o src/data/books.seed.json https://zeno.it.kr/practice/bookshelf/books.seed.json

curl을 쓸 수 없는 환경이면 브라우저로 주소를 열어 전체 내용을 복사한 뒤 src/data/books.seed.json 파일을 새로 만들어 붙여넣습니다. 저장된 파일의 앞부분은 아래와 같아야 합니다.

// src/data/books.seed.json (일부)
[
  {
    "id": 1,
    "title": "클린 코드",
    "author": "로버트 C. 마틴",
    "status": "done",
    "rating": 5,
    "pages": 584,
    "coverColor": "#2563eb",
    "startedAt": "2026-07-01",
    "finishedAt": "2026-07-20",
    "memo": "함수는 한 가지 일만."
  }
]

이 파일은 6권의 책 객체 배열입니다. 각 책은 id, title, author, status(wish|reading|done), rating, pages, coverColor, startedAt, finishedAt, memo 필드를 가집니다. 이 필드 구성은 이 과목 마지막 편까지 그대로 유지됩니다.

5. 다시 실행

npm run dev