2. 리액트 개발 환경 설정(19.1ver)

리액트 프로젝트를 생성하는 방법에 대해 기술할 페이지. 버전별 차이가 존재할수 있음

TodoList

• 프로젝트구조에 대한 설명 보충 필요

• main과 app.tsx에 대한 설명 필요. 중요.

1. 설치 준비물

• Node.js(LTS)

• VSCode

  • 리액트 문법에 익숙해지면 플러그인으로 리액트 스닙펫추가하면 좋음.

• Node.js만 안정화버전이 맞는지 체크하고 들어가자.

  • 버전확인 명령어

  • node -v

  • npm -v

2. 프로젝트 생성

1. workspace 폴더에서 npm create vite@latest my-react-app -- --template react-ts

2. react , typescript 선택

3. cd my-react-app

4. npm install

   1. package.json의 정보를 바탕으로 node.js 기반 패키지 설치

5. npm run dev

프로젝트 구조

1) app아래 파일들

1. package.json

• node.js로 프로젝트를 관리할때 사용하는파일.

• CRA로 프로젝트생성시 npm에 의해 자동으로 생성되며 프로젝트의 버전이나 의존성 목록 등을 관리합니다.(Maven의 pom.xml처럼 의존성목록들과 프로젝트를 관리)

• npm i --save 패키지명 으로 특정 의존성패키지를 다운로드받으면 package.json에 자동으로 기록된다.

• 패키지가 존재하는 위치에서 npm으로 구동 가능한 스크립트(명령어)도 정의되어 있다.

  • npm start는 package.json의 scripts에 정의된 명령어. 사용하기 위해서는 package.json이 존재하는 위치까지 이동.

• 추가적인 옵션과 사용방법이 궁금하다면 아래 공식문서 참조

package.json | npm Docsdocs.npmjs.com

npm package.json

2. package-lock.json

• package.json에 기록된 의존성 목록과 버전정보를 정확히 기록해두는 파일.

• package.json에는 최상위 의존성만 기록되지만, package-lock.json에는 최상위 의존성을 사용하기 위해 필요한 하위 의존성 정보까지 함께 기록해 둔다.

• 프로젝트의 모든 의존성에 대한 상세 버전정보를 확인하고 수정할 수 있다

• 추가적인 옵션과 사용방법이 궁금하다면 아래 공식문서 참조

package-lock.json | npm Docsdocs.npmjs.com

package-lock.json

3. tsconfig.json

• 타입스크립트와 관련된 설정정보를 저장해두는 파일

• 내부 속성들이 궁금하다면 아래 메뉴얼을 참고하도록 하자.

TSConfig Reference - Docs on every TSConfig optiontypescriptlang

tsconfig 문서

1. tsconfig.app.json

• 애플리케이션 전용 TypeScript 설정 파일입니다.

• tsconfig.json을 기반으로 하면서 앱 코드 빌드에 필요한 옵션을 추가·변경합니다.

1. tsconfig.node.json

• Node.js 환경에서 실행되는 코드(예: 설정 파일, 스크립트)를 위한 TypeScript 설정입니다.

• Vite 설정 파일(vite.config.ts) 같은 Node 환경 실행 코드 빌드 시 사용됩니다.

1. vite.config.ts

• Vite 빌드 툴의 설정 파일입니다.

• 플러그인 추가, 경로 alias 설정, 빌드 옵션 등을 정의합니다.

2) node_modules

• package-lock.json안에 기록된 모든 의존성들이 다운로드 된 폴더

• npm i 를 통해 위 의존성들을 다시 다운로드 받을 수 있다.

• 용량이 크기때문에 git-hub에 올라가지 않도록 .gitignore에 /node_modules가 등록되어 있다.

3) public

• 리액트앱의 정적자원(img,html)들을 보관하는 폴더

• index.html이 화면상에 출력되는 메인페이지이다.

4) src

프로젝트의 소스파일들을 작성하는 폴더이다. 기본생성된 파일들의 역할은 다음과 같다.

• App.css - App.tsx의 css파일

• App.tsx - App이라는 이름의 Component. tsx파일은 jsx문법과 ts문법이 결합된 js파일

• index.css - index. tsx의 css파일

• index.tsx - npm start시 가장 먼저 가정 먼저 실행되는 파일. (entry point).

  • public/index.html파일과 함께 필수 요소