설치
한 repository에서 클라이언트, 서버 둘 다 관리하게 할 것이므로. youtube-party라는 폴더 아래에 client와 server 폴더를 만들고, 그 안에 각각 Nextjs와 Express를 설치해줬다.
클라이언트
Nextjs를 typescript 옵션을 줘서 설치한다.
npx create-next-app --typescript
서버
Express 설치
npm install express
Typescript 관련 패키지 설치, ts-node 설정
- typescript
- ts-node (node 대신 typescript 파일을 실행하게 할 녀석)
- @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도 있는데 나는 굳이 필요성을 안느껴서 설치 안했다.
'프로젝트 과정 기록' 카테고리의 다른 글
[Project] Youtube Party 만들기 (3) - Nextjs 채팅방 페이지로 이동하는 기능 만들기 +) getServerSideProps 리다이렉트 (1) | 2023.10.17 |
---|---|
[Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기 (0) | 2023.10.06 |
[Project] Youtube Party 만들기 - 프로젝트 주제, 컨셉 (0) | 2023.09.22 |
[React] Chartjs로 막대그래프 그리기 (0) | 2023.08.04 |
[JS] Chartjs 막대그래프 그리기 (별점 분포 차트) (0) | 2023.08.03 |