1. boilerplate - typescript 및 express 서버 세팅

유튜브 강의를 보고 node에서 react를 활용하여 보일러플레이트 코드를 작성하는 것을 따라하면서 전체적인 구조나 사용법 등을 공부하고 익힐 예정이다. 그리고 typescript에도 관심이 있어서 여기서 설명하는 js문법을 typescript로 바꿔서 해볼 예정이다

이후에 이 보일러플레이트를 기본 베이스로하여 유튜브를 클론하는 강의가 있는데 이것도 끝나고 할 예정이다. 벌써 완성된 유튜브 클론 사이트가 눈에 아른거린다.. 얼른 완성해서 보고싶다.

 

유튜브 강의 첫 번째 세팅 부분을 보고 typescript로 바꿔서 정리한 내용이다.

MERN Stack Boiler Plate #2 DOWNLOAD NODE AND EXPRESS(한글 자막) (ReactJS NodeJS)

 

1. 작업 폴더 세팅

// 작업 폴더 생성
mkdir boiler-plate && cd boiler-plate

// node package.json 생성
npm init -y

 

2. express, typescript 모듈 설치

// i : install, -S or --save : package.json의 dependencies 목록에 express 의존성 추가
npm i -S express

// -D or --save-dev : package.json의 devDependencies 목록에 typescript 의존성 추가
// devDependencies 항목은 --production 빌드시 포함되지 않는다.
npm i -D typescript

 

3. type definition 패키지 설치

npm i -D @types/node @types/express

 

4. TypeScript 컴파일 옵션 설정

 

npx는 npm 패키지를 쉽게 설치하고 사용하는 cli 도구이다.

아래 명령어를 통해 tsconfig.json 파일이 생성된다.

npx tsc --init

 

옵션 설정

{
  "compilerOptions": {
    "target": "es6",                        
    "module": "commonjs",                     
    "allowJs": true,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include":[
  	"src/**/*"
  ]
}

 

package.json에 typescript 빌드 후 시작하는 스크립트 작성

"scripts": {
    "start": "tsc && node dist/server/index.js"
  }

 

5. express로 hello world 출력하기

 

경로 : /src/server/index.ts

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req: express.Request, res: express.Response)=>{
    res.send('Hello World');
});

app.listen(port, ()=>{
    console.log(`app listening on port ${port}`);
})

 

6. 서버 실행

npm start