typescript react + typescript express s setting

## 타입스크립트로 서버 기본 셋팅하기

리액트의 경우 typescript template을 사용하면 빠르게 설치가 가능하지만, 서버의 경우 설치를 따로 해줘야하므로 기록을 하려고 한다.

---

Frontend typescript setting

리액트의 경우 앞서 말한대로 template을 이용하면 간단하게 설치가 가능하다.

사이트에 들어가보면 참고를 할 수 있을 것이다.

yarn create react-app my-app --template typescript

나의 경우 yarn을 사용하기 때문에 이렇게 install을 해서 사용 할 수 있다.

 

frontend, backend 둘 다를 건들여야할 때는 나의 경우 폴더 트리를 아래와 같이 가져가고 있다.

typescript-setting
|__ client
|__ server

---

Backend typescript setting

위의 폴더 트리에서 server로 들어간다.

1. npm init -y

이를 통해 initialize를 한다

 

2. yarn add nodemon express

nodemon과 express를 설치한다.

 

3. yarn add -D typescript @types/express @types/node 

dependency에 typescript, express의 types, node의 types를 설치한다

 

3-1. yarn add -D concurrently 

이는 optional이지만 client와 server를 한번에 실행시키기 위해서 설치했다

 

4. npx tsc --init

tsc를 initialize 시킨다.

 

5. tsconfig.json

tsconfig.json에서 "outDir": "./dist"를 추가한다.

tsconfig.json

6. package.json

package.json의 scripts를 추가해줌으로써 typescript exress setting을 마칠 수 있다.

package.json

---

셋팅은 여기까지고 확인을 해보면 되겠다.

app.ts를 만들고 아래 이미지와 같이 console.log를 찍어보자.

그러면 아래와 같이 터미널에 콘솔로그가 찍히는 것을 확인할 수 있다!

 

 

@crayonzgrim