[모두의 이력서_1일차] 백엔드 Express + TS

프로젝트를 시작하기 앞에서 기본세팅에 대해 적어보려 합니다.

처음으로 혼자서 프론트부터 백까지 하는 프로젝트이다 보니 정확하지 않을 수 있습니다!

 

백엔드 Express + TS

---

cd.. // 뒤로이동
cd back

 

1. 폴더 안을 npm으로 관리

npm init

다 엔터 쳐서 기본값으로 넣어줍니다.

 

 

타입스크립트를 사용할 예정으로 ts.config.json파일을 만들어 줘야 합니다.

ts.config.json을 만드는 이유
타입스크립트는 자바스크립트로 트랜스파일(변환) 해야 실행을 시킬 수 있습니다.
그러므로 타입스크립트는 컴파일러가 필요합니다.

 

2. 타입스크립트 컴파일러 설치

npm i -g typescript

 

3. tsc설치

tsc --init

tsconfig.json이 생성됩니다.

 

4. tsconfig.json에서 moduleResolution 설정 바꾸기

node.js로 실행을 할 예정임으로 moduleResolution을 node라고 명시해 줘야 됩니다.

// tsconfig.json
"moduleResolution": "node",

Express 설정 끝!

 

Express 실행시키기

---

1. server.ts를 생성하고 root코드 작성

back폴더에 server.ts 생성하고 express 샘플코드를 작성해 줍니다.

(server.ts말고도 app.ts로 작성해도 무방합니다. 원하시는 걸로 하시면 돼요.)

 

express 샘플코드

https://www.npmjs.com/package/express

express

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

이렇게 쓰면 빨간 줄이 나옴

2. 빨간 줄 해결하기

2-1. require를 사용할 수 없기 때문 → express import 해오기

import express from "express";
const app = express();

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.listen(8000); // 3000에서 8000으로 교체 했습니다.

 

2-2. express 모듈을 찾을 수 없다고 나옴 → express 설치하기

npm i express

 

2-3. 타입스크립트를 사용하고 있는데 express 패키지는 자바스크립트로 작성되었기 때문에 → @types 설치

npm i --save-dev @types/express

타입스크립트에서 타입을 잘 가져올 수 있도록

 

추가지식
--save라는 명령어를 치면
pacage.json에서 dependencise에 표시가 됩니다.

"dependencies": {     
	"express": "^4.18.2"   
},​

 

이는 어플리케이션(현재 작업하는 프로젝트)에서는 express라는 라이브러리를 쓰고 있다.라고 표시를 해서
다른 사람이 봐도 쓰고 있다는 것을 알 수 있게 해 줍니다.

 

3. 기본문구 수정

// server.ts
app.listen(8000);

기본문구에는 이렇게 나와 있는데 이러면 서버가 잘 켜졌는지 알 수가 없습니다.

그러므로 두 번째 인자로 이 서버가 잘 실행 됐을 때 실행시켜 줄 콜백함수를 넣어줘야 됩니다.

 

// server.ts
app.listen(8000, ()=>{
  console.log('server is running!')
});

 

*4,5번은 설명을 위해 적은 거라 4,6번은 뛰어넘기고 6번부터 하셔도 됩니다.*

4. server.ts 실행시키기

server.ts를 실행시키려면 현재 타입스크립트로 작성돼있기 때문에 자바스크립트로 변환을 해줘야 됩니다.

즉 자바스크립트로 트랜스파일링을 해줘야 됩니다.

 

이때 사용하는 게 타입스크립트 컴파일러이고 ts명령어를 입력해 주면

현재 폴더에 있는 모든 타입스크립트 파일을 자바스크립트로 컴파일해줍니다.

tsc

server.js가 생깁니다.

 

5. 진짜로 서버 실행시키기

npde server.js

server is running! 이 나옵니다.

그리고 웹브라우저에 localhost: 8000으로 치면 화면에 Hello World가 잘 나옵니다.

 

6. 자동으로 컴파일 실행해 주는 패키지 설치하기

하지만 개발할 때마다 코드를 짜고 컴파일하고 실행하면 너무 번거롭습니다.

이과정을 자동으로 해주는 패키지가 있습니다.

npm i -g ts-node

추가로 server.js 삭제하기

 

이제 아래와 같이 코드를 쓰면 실행이 됩니다.

ts-node server.ts

 

7. 코드실행할 때마다 ts-node server.ts를 치기 귀찮기 때문에 start에 설정하기

// package.json
"scripts": {
	"start": "ts-node server.ts", // 추가하기
	"test": "echo \"Error: no test specified\" && exit 1"
},

 

npm run start // 실행된다.

 

 

참고자료

---

Express를 TS로 설치

https://www.youtube.com/watch?v=ntFeJ30GE40&t=627s 

 

Express를 JS설치 (Express실행시키기 6번 내용)

https://www.youtube.com/watch?v=7sHWMkFOR7c