[Project] Youtube Party 만들기 (1) - 프로젝트 환경설정 | Nextjs + Typescript + Express

설치

한 repository에서 클라이언트, 서버 둘 다 관리하게 할 것이므로. youtube-party라는 폴더 아래에 client와 server 폴더를 만들고, 그 안에 각각 Nextjs와 Express를 설치해줬다.

 

클라이언트

Nextjs를 typescript 옵션을 줘서 설치한다.

npx create-next-app --typescript

 

서버

Express 설치

npm install express

 

Typescript 관련 패키지 설치, ts-node 설정

1. typescript
2. ts-node (node 대신 typescript 파일을 실행하게 할 녀석)
3. @types/express (express를 위한 type이 정의되어 있다.)

이 세가지를 dev dependency로 설치해준다.

npm install -D typescript ts-node @types/express

 

typescript를 dev 디펜던시로 설치하는 이유는 typescript는 서버를 돌릴 때 그대로 사용되는 언어가 아니라 개발할 때의 편의성을 위한 도구이기 때문이다. 서비스는 typescript 파일을 컴파일한 다음, js로 돌리게 되므로 개발할 때만 필요한 언어인 것이다.

 

하지만 개발할 때 실시간으로 typescript로 된 파일을 실행시킬 필요가 있으므로, ts-node가 필요하다.

 

ts-node를 설치했다면 scripts로 가서 start를 node가 아니라 ts-node가 하게 바꾸자.

그러면 node 대신 ts-node가 프로그램을 실행시켜서 typescript로 된 파일을 컴파일 없이 실행할 수 있게 된다.

{
  "scripts": {
    "start": "ts-node ./src/bin/www.ts",
    "dev": "nodemon --watch ./src/ ./src/bin/www.ts"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "socket.io": "^4.7.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "dotenv": "^16.3.1",
    "nodemon": "^3.0.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

 

tsconfig 설정

commonJS (require로 모듈 불러오기) 말고 ES6 모듈 방식(import)을 쓸 거라면 아래와 같이 바꾸면 된다.

 

• module에 commonjs 말고 다른 걸 적었더니 에러가 나서 그냥 module은 저렇게 commonjs로 냅뒀다.
• include는 typescript 파일이 위치하는 디렉토리로 설정해주면 된다.
• import * as myModule from [모듈위치] 말고 import myModule from [모듈위치] 로 불러오고 싶은데 이렇게 쓰면 에러가 난다. 이 문제는 esModuleInterop 속성을 주면 해결할 수 있다.

 

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "./build",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*"]
}

 

 

기타 dependency

프로젝트 초반에 함께 세팅해놓으면 좋은 패키지들

• nodemon - ctrl + s로 저장할 때 자동으로 서버를 재시작 시켜주는 프로그램. 재시작은 start 스크립트에 써있는 명령어를 기준으로 한다.
• cors - 헤더에 일일히 access-control-allow-origin 작성하지 않고 한 번에 설정할 수 있게 도와주는 패키지. 별 옵션 없이 그냥 미들웨어에 추가해주면 모든 출처에 대해 허락하게 된다.
• dotenv - React나 Nextjs에는 원래 내장되어 있으니 서버에만 설치해주자.

concurrently도 있는데 나는 굳이 필요성을 안느껴서 설치 안했다.