[React] VSCode 리엑트 설치, Typescript 개발 환경 설정

개발 환경

: Window11

 

---

 

설치

1. Node.js (npm)

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

- 설치 확인

: 명령 프롬프트(cmd)에 명령어 입력

 

 

2. Yarn

https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

Yarn

 

- 사이트 접속 후 Click to expand / collapse 클릭 후 Download

 

- 설치 확인

: 명령 프롬프트(cmd)에 명령어 입력

 

 

3. VSCode

[VSCode] VSCode 다운로드 및 초기 세팅 (tistory.com)

[VSCode] VSCode 다운로드 및 초기 세팅

 

---

 

Package.json 생성 및 의존성 모듈 설치

 

1. 원하는 경로에 폴더 생성

ex) react-workspace

 

2. 해당 경로로 이동

cd E:\vscode-workspace

 

3. 각종 설정 엔터 쳐서 넘기고 마지막에 yes 입력

 

4. 설정한 경로에 package.json 파일 생성된 것을 확인

 

5. 의존성 모듈 설치

:--save 까지만 입력해도 됨

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

6. 설정한 경로에 module 설치된 것을 확인

 

---

 

React 프로젝트 생성

1. VSCode 터미널에 명령어 입력 

: 폴더명은 react-test로 할 것이다

 

npx create-react-app react-test

 

※  create-react-app 입력시 에러났을 경우

[React] create-react-app 프로젝트 생성 오류 (tistory.com)

[React] create-react-app 프로젝트 생성 오류

 

 

2. 파일 -> 폴더 열기 -> react-test 폴더 선택

 

3. VSCode 터미널에 명령어를 입력해 서버 실행

yarn start

 

4. 실행 확인

 

---

 

※ typescript 컴파일 에러났을 경우

[React] vscode typescript 컴파일 에러 (tistory.com)

[React] vscode typescript 컴파일 에러