리액트 프로젝트 생성(18.3.1.ver)

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

Intro - 생성방법

리액트를 활용하여 프로그래밍을 하려고 할때 선택지는 크게 2가지 있습니다.

1. HTML에 CDN방식으로 react.js와 react를 사용하는데 필요한 js를 직접 추가하는 방법.

2. node.js 명령어를 통해 리액트 프로젝트를 구성하는 방법.

1번 같은 경우 이미 개발중인 어플리케이션에 점진적으로 react를 적용시키고자 할때 사용하는 방법이고

2번과 같은 케이스는 리액트 기반앱을 만들거나 리액트를 공부할 때 자주 사용합니다.

---

2번 방식으로 작업한다고 했을 때 크게 2가지 방법으로 프로젝트를 구성할 수 있는데

1. (CRA)create-react-app을 통한 프로젝트생성

2. Vite를 통한 프로젝트 생성

1번 같은 경우 react프로젝트를 구성하는데 필요한 모든 설정(로깅, jsx문법지원, 컴파일러 등)을 한번에 다운로드해주기 때문에 굉장히 편리하면서 react 공식 튜토리얼에 등장하는 프로젝트 생성방법이므로 리액트공부를 할때 자주 사용하는 방법입니다.

2번 같은 경우 Vite라는 웹프로젝트 생성도구를 다운로드 받아 리액트 템플릿을 다운로드 하는 것 입니다. CRA에 비해 기본 설정이 적기 때문에 개발자가 직접 설정정보를 추가해야 합니다.

---

그래서 뭐 써야함? 차이점이 뭐임?

난 둘다~

저희는 리액트를 공부하는 단계이므로 CRA(create-react-app)을 사용하여 프로젝트를 생성할 것입니다.

차이점에 대해서는 내용이 길어지므로 CRA와 Vite비교 문서에서 확인해 보도록 하겠습니다.

Create React App

CRA 메뉴얼

---

설치 준비물

• Node.js(LTS)

• VSCode

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

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

  • 버전확인 명령어

  • node -v

  • npm -v

프로젝트 생성

Vite로 react 프로젝트 생성

1. react 폴더에서 npm create vite@latest react-practice-ts -- --template react-ts

2. react , typescript선택

3. react-practice-ts 폴더로 이동

4. npm i -> npm run dev

1. VSCode 열기 - File - Folder Open - reactWorkspace폴더 생성 - reactWorkspace폴더 선택

2. Terminal - new Terminal(ctrl+shift+`)

3. 터미널에 다음과 같은 명령어 입력. npx create-react-app myapp --template typescript myapp이라는 리액트 프로젝트를 생성해주면서 typescript를 사용할 수 있는 탬플릿을 자동생성.

타입스크립트와 react 버전 호환성 문제 발생시

1. react uninstall후 안정화 버전의 react로 재설치

2. 호환되는 버전의 typescript 설치

3. 다운로드중 오류가 발생한 모듈들 재설치

1. 프로젝트 생성 후 *cd myapp*으로 myapp 폴더 내부로 이동.

2. npm start로 리액트 프로젝트 실행

3. 이후 프로젝트 새롭게 열때는 반드시 프로젝트 폴더 내부로 이동하여 터미널을 연 후 npm start시켜주기

프로젝트 분석

프로젝트 구조

1) myapp아래 파일들

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 Docs

npm package.json

2. package-lock.json

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

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

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

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

package-lock.json | npm Docs

package-lock.json

3. tsconfig.json

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

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

TSConfig Reference - Docs on every TSConfig optiontypescriptlang

tsconfig 문서

과제) package.json, package-lock.json, tsconfig.json의 각 속성들이 어떤역할을 하는지 직접 검색해서 알아오기(gpt복붙금지)

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파일

• App.test.tsx - App을 테스트하는 파일

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

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

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

• react-app-env.d.ts - 리액트 앱에 필요한 환경변수를 저장하는 파일

• reportWebVitals.ts - 구글과 연동하여 내앱의 성능을 측정할 때 사용하는 파일

• setupTest.ts - 테스트를 위한 설정파일