frbet - 1. 프로젝트 세팅

nodejs express를 javascript가 아닌 typescript로 구현하고 싶었고, 혼자 하다보니 눈으로 보기 위한 프론트 세팅도 필요하여 react를 기반으로 한 프로젝트를 시작하였다.

front - React with typescript
back - express with typescript

React

CRA(create-app-react)는 SPA(single page application)를 간편하게 개발하기 위한 방법이다.
$ npx create-react-app <project name> --template typescript

express

express with typescript
javascript로 할때는 express-generator 로 구현을 했지만 이번에는 처음부터 작성하였다.
js와는 다르게 ts에서는 tsconfig.json 이라는 파일이 있는데, 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

tsconfig.json

{
  "compilerOptions": {
       "target": "es6",                                 
    "module": "commonjs",                           
    "allowJs": true,                             
    "jsx": "react",                           
    "outDir": "dist",                              
    "strict": true,                                
    "esModuleInterop": true,                     
    "skipLibCheck": true,                           
    "forceConsistentCasingInFileNames": true        
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

• outdir : 빌드를 어디서 할지를 정한다.
• include, exclude : 빌드를 할 파일들, 빌드 할 때 제외할 파일들.

ts-node
typescript 파일을 실행 -> javascript 파일로 변경되어 서버를 돌릴 수 있게 된다. typescript로는 서버를 돌릴 수 없고, 빌드된 javascript 로 서버를 돌릴 수 있다. 이를 transpile 이라고 한다.