Jae Front-end Study

1. Node.js 설치하기

https://nodejs.org/ko

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.

위의 정의는 노드를 통해서 자바스크립트 애플리케이션을 실행할 수 있다는 의미이다.

타입스크립트는 자바스크립트에 타입을 추가한 언어이기 때문에 타입스크립트를 사용하기 위해서는 Node.js를 먼저 설치해야 한다.

1-1. Node.js 버전 확인하기

node --version
또는
node -v

2. typescript, ts-node 글로벌 설치하기

typescript와 ts-node를 글로벌로 설치하면 리액트 프로젝트가 아니더라도 타입스크립트를 사용할 수 있기 때문에 따로 설치하는 것이 좋다.

또한 글로벌이기 때문에 1번만 설치하면 추가 설치 없이 바로 사용할 수 있다.

yarn add -g typescript ts-node
또는
npm install -g typescript ts-node

2-1. typescript, ts-node 버전 확인하기

tsc --version 또는 tsc -v

ts-node --version 또는 ts-node -v

3. 프로젝트 만들기

yarn create react-app 폴더명 --template typescript
또는
npx create-react-app 폴더명 --template typescript

tsx 파일이 생성됐는지 확인한다.

4. 불필요한 파일 삭제하기

src 폴더에서 App.css, App.tsx, index.css, index.tsx 파일만 남기고 전부 삭제한다.

5. 로컬호스트 연결 확인하기

http://localhost:3000/

터미널에서 yarn start 명령어를 실행해 로컬호스트에 접속이 잘 되는지 확인한다.

아래와 같은 화면이 나온다면 정상적으로 세팅이 완료된 것이다.