리액트 프로젝트 생성

** npm(node pakage manager) : Node.js 프로젝트에서 다양한 오픈 소스 라이브러리 설치

** npx(Node Package eXecute) : 라이브러리가 아닌, 프로그램 형태로 동작하는 패키지의 가장 최신 버전을 찾아내 설치

-> npm는 npm 5.2.0 버전부터 새로 추가된 패키지 실행 도구

 

리액트 프로젝트 만들기

리액트 웹 애플리케이션은 CRA(create-react-app)라는 프로그램이름으로 Node.js 프로젝트를 생성해 제작한다.

$npx create-react-app 프로젝트이름 --template typescript

 

리액트 프로젝트 구조

 

1. 프로젝트 루트 디렉토리

- node_modules/ : 프로젝트의 모든 의존성 패키지가 저장되는 폴더

- pakage.json : 프로젝트의 메타데이터와 의존성, 스크립트를 정의하는 파일

  -> dependencies : 런타임에 필요한 라이브러리

  -> devDependencies : 개발에서만 필요한 라이브러리

  -> scripts : npm 스크립트 명령어(npm start, npm test 등)

- pakage-lock.json : 프로젝트의 의존성 트리를 잠그는 파일로, 동일한 의존성 버전이 설치되도록 보장

 

2. public/ 

: 정적 파일(static Files)을 저장하는 디렉토리. 빌드된 파일은 이 폴더를 기준으로 렌더링

- index.html : 애플리케이션의 시작점으로 React 컴포넌트가 이 파일의 <div id="root"></div>에 마운트 된다.

  -> 리액트 프로젝트에서는 이 파일을 수정하는 경우가 거의 없다.

- favicon.ico : 브라우저 탭에 표시되는 아이콘 파일

- manifest.json : PWA(Progressive Web App) 관련 설정 파일. 앱 이름, 아이콘 경로, 시작 URL 등이 포함

- 기타 파일 ex) robots.txt : 검색 엔진 크롤러가 접근할 수 있는 URL 제어

 

3. src/

: 리액트 프로젝트의 소스 코드가 위치하는 주요 폴더

- index.tsx : 애플리케이션의 진입점

  -> ReactDOM을 사용해 App 컴포넌트를 public/index.html의 <div id="root"></div>에 렌더링

- App.tsx : 애플리케이션의 최상위 컴포넌트. 이 컴포넌트는 다른 하위 컴포넌트를 포함하고, 애플리케이션의 레이아웃 정의

- App.css : App.tsx 컴포넌트와 연결된 스타일 파일

- App.test.tsx : 테스트 코드 파일. Jest를 사용해 컴포넌트가 올바르게 동작하는지 확인

- index.css : 프로젝트 전역 스타일을 정의

- logo.svg : 프로젝트에서 사용하는 SVG 로고 파일. React 컴포넌트로 임포트 할 수 있다.

- reportWebVitals.ts : 웹 애플리케이션의 성능 측정 및 보고를 위한 파일.

- setupTests.ts : Jest 테스트 환경을 설정

 

4. 추가적으로 커스터마이징할 수 있는 구조

- components/ : 보통 src 아래 생성되며, 재사용 가능한 React 컴포넌트를 저장

- pages/ : 라우팅에 따라 페이지 단위로 구분된 컴포넌트를 저장

- utils/ : 유틸리티 함수 및 헬퍼 함수들을 저장하는 폴더

- hooks/ : 커스텀 react Hook을 저장하는 폴더

- services/ : API 호출 및 백엔드와의 통신 로직을 저장하는 폴더