2. 리액트 개발 환경 설정(19.1ver)
리액트 프로젝트를 생성하는 방법에 대해 기술할 페이지. 버전별 차이가 존재할수 있음
TodoList
프로젝트구조에 대한 설명 보충 필요
main과 app.tsx에 대한 설명 필요. 중요.
1. 설치 준비물
Node.js(LTS)VSCode리액트 문법에 익숙해지면 플러그인으로 리액트 스닙펫추가하면 좋음.
Node.js만 안정화버전이 맞는지 체크하고 들어가자.
버전확인 명령어
node -vnpm -v
2. 프로젝트 생성
workspace 폴더에서
npm create vite@latest my-react-app -- --template react-tsreact,typescript선택cd my-react-appnpm installpackage.json의 정보를 바탕으로 node.js 기반 패키지 설치
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이 존재하는 위치까지 이동.
추가적인 옵션과 사용방법이 궁금하다면 아래 공식문서 참조
2. package-lock.json
package.json에 기록된 의존성 목록과 버전정보를 정확히 기록해두는 파일.
package.json에는 최상위 의존성만 기록되지만, package-lock.json에는 최상위 의존성을 사용하기 위해 필요한 하위 의존성 정보까지 함께 기록해 둔다.
프로젝트의 모든 의존성에 대한 상세 버전정보를 확인하고 수정할 수 있다
추가적인 옵션과 사용방법이 궁금하다면 아래 공식문서 참조
3. tsconfig.json
타입스크립트와 관련된 설정정보를 저장해두는 파일
내부 속성들이 궁금하다면 아래 메뉴얼을 참고하도록 하자.
tsconfig.app.json
애플리케이션 전용 TypeScript 설정 파일입니다.
tsconfig.json을 기반으로 하면서 앱 코드 빌드에 필요한 옵션을 추가·변경합니다.
tsconfig.node.json
Node.js 환경에서 실행되는 코드(예: 설정 파일, 스크립트)를 위한 TypeScript 설정입니다.
Vite 설정 파일(
vite.config.ts) 같은 Node 환경 실행 코드 빌드 시 사용됩니다.
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파일과 함께 필수 요소
Last updated