React) 다양한 React 프로젝트 생성 방법 (NPM/Yarn, JS/TS)

Creat React App 을 이용하여 프로젝트를 생성할 때, 다양한 방법이 있다.

 

크게 4가지로 나누어 살펴본다.

(npm+js / npm+ts / yarn+js / yarn ts)

 

 

설치 전, node.js와 npm은 설치되어 있어야 한다.

---

* NPM 이용

 

공통) create react app 설치 ... (프로젝트 생성 전, 최초 1회)

npm install -g create-react-app

---

 

1) Vanila JS 프로젝트

npx create-react-app <프로젝트명>

 

 

2) TypeScript 프로젝트

npx create-react-app <프로젝트명> --template typescript

---

* Yarn 이용

 

공통) ... (프로젝트 생성 전, 최초 1회)

 

1. yarn 세팅 

corepack enable
yarn set version stable
corepack prepare yarn@<version> --activate // Node.js < 16.17 or 18.6
// corepack prepare yarn@stable --activate  Node.js^16.17 or  >=18.6

 

2. create react app 설치

yarn add create-react-app

 

 

---

1) Vanila JS 프로젝트

yarn create react-app <프로젝트명>

 

 

2) TypeScript 프로젝트

yarn create react-app <프로젝트명> --template typescript

 

---

[프로젝트 생성 후 - TS]

 

yarn dlx @yarnpkg/sdks vscode	//yarn에서 제공하는 vsCode typescript설정 Editor SDK.

Ctrl + Shift + P

Select Typescript Version

Use Workspace Version 클릭

 

(또는 tsx 파일에 들어가면 생기는 우측 하단 팝업창의 Allow 클릭)

 

 

2. 불필요한 파일 삭제

 

- App.test.tsx

- setupTests.ts

- reportWebVitals.ts

 

(test 관련 파일들을 모두 삭제하면 정상 작동한다. test 파일을 사용하려면 추가로 더 찾아봐야 한다.)

 

+ 삭제한 후에 import 및 사용하지 않는 코드 정리 (index.tsx, App.tsx)

 

---

 

[프로젝트 생성 후 - 공통]

 

yarn add -D eslint-config-react-app

 

1. .yarnrc.yml 파일 생성 후 아래 내용 저장

packageExtensions:
  react-scripts@*:
    peerDependencies:
      eslint-config-react-app: "*"

 

터미널에 입력

yarn cache clean
yarn install
yarn start

 

 

---

Tips)

 

1> git 폴더 삭제 (초반 또는 아예 git을 쓰지 않을 경우에만)

 

rm -rf .git

 

 

 

2> .gitignore 설정

 

 

.gitignore 파일에  /.yarn 추가

 

...

# dependencies
/node_modules
/.yarn             ★★★
/.pnp
.pnp.js

...

 

 

 

 

3> github repository 연결

 

 

1번 또는 2번으로 진행

 

[ 1. Create a new repository on the command line ]

echo "# <저장소 명>" >> README.md  
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<사용자 명>/<저장소 명>.git
git push -u origin main

 

[ 2. Push an existing repository from the command line ]

git remote add origin https://github.com/<사용자 명>/<저장소 명>.git
git branch -M main
git push -u origin main

 

 

 

 

[참고]

 

- https://yarnpkg.com/getting-started/install

- https://academy.dream-coding.com/courses/react

- https://velog.io/@bishoe01/Yarn-create-react-app-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95