◆ [프론트엔드 심화]프로젝트 - 동적 UI개발

프로젝트  환경 설치

리액트 환경 툴은 두가지가 있다.

 

(1)CRA

C:\project>npx create-react-app book-store-c --template typescript

C:\project>cd book-store-c

C:\project\book-store-c>ls //설치된 것 확인

C:\project\book-store-c>npm run //어떤 코드를 사용할 수 있는지 알려줌

npm start //리액트 시작

(2) Vite

npm create vite@latest book-store-v -- --template react-ts

cd book-store-v

npm install

npm run dev

 

 

 

>> (1)CRA 사용!

 

프로젝트 폴더(디렉토리) 구조

1. pages - 라우트에 대응하는 페이지 컴포넌트 (컨테이너)
2. components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
3. utils - 유틸리티
4. hooks - 리액트 훅
5. model - 모델 (타입)
6. api - API 연동을 위한 fetcher 등