Express 설치
프론트엔드 클라이언트에서 우리가 만든 백엔드 서버의 API로 요청을 보냈다면,
우리는 그 요청을 잘 받아와서 이후의 로직을 수행해줘야 한다. 때문에 백엔드는 우선 서버를 구현할 필요가 있다.
express는 Node.js를 활용해 이러한 웹 서버를 개발할 수 있도록 도와주는 프레임워크 중 하나이다.
지금부터는 express로 백엔드 API 서버를 직접 구현해 보자.
먼저 class폴더 안에 section03 폴더를 생성 후 03-01-rest-api-with-express 폴더를 새로 만들어주고
yarn init 명령어를 입력해준다. 이 때, 모든 질문에 엔터를 눌러 기본값으로 지정해 준다.
이를 통해 package.json 파일이 생성할 수 있다.
import 명령어를 사용하기 위해서는 package.json 파일에 "type": "module" 을 한줄 추가해주어야 한다.
{
"name": "03-01-rest-api-with-express",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module"
}이제 yarn을 이용해 express를 설치해보자
터미널에서 해당 폴더로 이동한 후, yarn add express를 입력하여 설치할 수 있다.
설치가 완료되면
-
node_modules 폴더가 생성되며, 이 폴더 안에 실제 설치가 완료된 파일들이 존재한다. 따라서 폴더 안에 설치한 express가 동작하는 코드들이 적혀있다.
-
설치된 목록들이 적혀진 파일인 package.json 파일에 설치된 express의 버전이 적혀져 나온다.
-
yarn.lock 파일이 생성되며, 설치된 목록들과 의존되어 있는 다른 모듈들의 버전 정보들이 적혀져 있는것을 확인 가능하다.
{
"name": "03-01-rest-api-with-express",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module",
"dependencies": {
"express": "^4.18.1"
}
}우리는 package.json 파일의 버전 정보로 언제든지 패키지들을 재설치 할 수 있다. 따라서 용량이 큰 실제 패키지 파일들이 위치한 node_modules를 github에 공유하는 것은 매우 비효율적이다.
이를 방지하기 위해 폴더 최상단 위치에서 .gitignore 파일을 생성해주는 것이 필요하다.
.gitignore 파일 안에 node_modules를 추가합니다. 이제 node_modules 폴더가 흐리게 변한 것을 확인 할 수 있고, 더 이상 github에 공유되지 않도록 관리할 수 있다.
Express 시작하기
class → section03 → 03-01-rest-api-with-express 폴더 안에 index.js 파일을 만들어주자
이제 API를 만들어볼 수 있다.
방금 설치한 express를 사용하려면 다른 js 파일에 정의된 함수를 불러와야 한다.
공식문서에는 const express = require('express')의 방식으로 설명되어 있지만,
현재는 ES6에서 새롭게 도입된 import를 사용하여 모듈을 불러오자.
import express from 'express'지금부터 공식문서를 참고하여 API를 만들어 보자
// index.js
// const express = require('express') // 옛날방식 => commonjs
import express from 'express' // 요즘방식 => module
const app = express()
app.get('/qqq', (req, res) => {
res.send('Hello World!')
})
app.listen(3000, () => {
console.log("백엔드 API 서버가 작동중입니다.")불러온 express를 실행해, 새로운 변수 app에 담아주었다.
그리고 GET 요청이 들어왔을 때 Hello World! 라고 응답을 보내줬다.
마지막으로 app.listen(3000)을 작성하여 3000번 port에서 서버가 24시간 동안 실행하도록 코드를 수정해 준다.
node index.js 명령어로 서버를 켠 후,
서버를 실행시키면 3000번 포트에서 24시간 내내 실행되며, 접속을 기다리는 상태가 된다.
서버를 실행시킨 상태에서 postman에서 http://localhost:3000/qqq 에 GET 요청을 보냅니다.
응답으로 Hello World를 받은 것을 확인할 수 있다.
서버를 종료하기 위해서는 터미널에서 컨트롤 + C 를 눌러주면 된다.
그 전까지는 서버가 계속 켜져있는 상태로, 터미널에 다른 입력을 할 수 없다.
nodemon으로 refresh 문제 해결하기
만일 공부를 진행하면서 nodemon 없이 코드를 수정한다면 수정할 때마다 서버를 종료하고 다시 시작하기는 것이 무한히 반복될 것이다.
API의 응답을 받아오기 전에 그러한 과정을 생략할 수 있도록 도와주는 도구(nodemon)를 하나 설치해서 해결해보자
터미널의 경로가 본인이 nodemon을 설치하고자 하는 폴더에 위치해 있는지 확인해주어야 한다.
터미널에 명령어 ls를 입력해 현재 위치에 package.json 파일이 있는 것이 확인 되면 아래의 명령어를 입력해 nodemon을 설치해준다.
$ yarn add nodemon이 후, package.json 파일의 내용을 확인해보면 nodemon이 추가되어 있는 것을 확인할 수 있습니다.
node가 아닌 nodemon으로 서버를 실행하게 되면 앞서 말한 것과 같이 변경된 소스코드의 저장과 동시에 자동으로 서버의 갱신이 이루어집니다.
설치가 완료되었다면, package.json 파일에 scripts 부분을 작성하여 아래와 같이 실행 명령어를 작성해 주세요.
{
"name": "03-01-rest-api-express",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module",
"scripts": {
"start:dev": "nodemon index.js"
},
"dependencies": {
"express": "^4.18.1",
"nodemon": "^2.0.19"
}
}이제부터 터미널에서 yarn start:dev를 이용해 서버를 실행할 때마다 nodemon으로 서버가 실행되게 됩니다.
소스코드를 변경해 응답 내용에 변화를 준 뒤, 다시 요청을 보내봅시다.
별도의 서버 종료, 재시작 없이 변화가 바로 반영되는 것이 확인 되시나요?
