[Express] Express로 웹 서버 만들기

Express는 웹 서버와 API를 만드는데 강력하고 유연한 기능을 제공하는 Nodejs 웹 애플리케이션 프레임워크다. 정적 파일 서버뿐만 아니라 JSON API 등 실제 프로덕션 레벨 수준의 서버를 만들 수 있다. 이 시리즈에서 Express로 CRUD(Create, Read, Update, and Delete) API를 제공하는 웹 서버를 만들어 보면서 필요한 스킬을 익혀보도록 하자

 

 

 

웹 서버 만들기

Express는 노드 외장 모듈이다. 그래서 Express를 사용하려면 해당 노드 프로젝트에 이를 설치해주어야 한다. 웹 서버 프로젝트 폴더를 만들고, 해당 디렉터리로 이동하여 노드 프로젝트를 초기화시키자

// 필자는 C:\Users\glafu\Desktop\node_test\express_test 위치에서 프로젝트를 생성하였
> npm init
// package name: 
// version: 
...

> npm install express	// Express 설

그런 다음, 코드 편집기를 실행시켜 server.js 파일을 작성해보자. 먼저, 설치한 express 모듈을 가져와서 express 객체를 생성해보자

const express = require('express');	// Express 모듈 가져오기
const app = express();			// Express 객체 생성

여기서 app은 Express 애플리케이션의 인스턴스이다. 이는 서버를 구동하고 서버의 행동을 정의하는 데 사용될 수 있다.

이제 이 서버를 구동해보자. 그전에 먼저 이 서버가 어느 포트에서 들어오는 요청을 다룰 것인지를 명시해 주어야만 한다. 그래야만 해당 포트로 들어오는 요청만을 제대로 응답해줄 수 있다. 다음과 같이 코드를 작성해보자

const PORT = 4001;		// 4001번 포트 설정
app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

여기서는 4001번 포트로 설정해 주었다. app.listen()은 서버를 구동시키고 4001번 포트를 listening 하도록 만든다. 이제 server.js를 실행해보면, 'Server is listening on port 4001' 이란 메시지가 로그에 나타나는 것을 볼 수 있다

 

 

 

첫 번째 라우트 만들기

일단 Express 서버를 구동시켰지만, 아직은 아무런 응답도 처리하지 못한다. 서버로 들어오는 요청들을 처리하기 위해서는 '라우트'를 만들어 줘야 한다. 라우트는 서버로 들어오는 요청들의 path와 HTTP verb에 기반해서 적절한 응답을 전달하는 일종의 흐름 제어이다. 예를 들어, 서버에 들어온 요청이 GET /todo라고 한다면, HTTP verb는 GET이고 path는 /todo 인 것이다

 

path는 hostname과 포트번호 뒤에 오는 URL이다. 즉, localhost:4001/todo 에서 hostname은 localhost, 포트 번호는 4001, path는 /todo 인 것이다. HTTP verb는 항상 요청에 포함되는데, 다음과 같은 몇 가지들 중 하나로, 특정 기능을 수행하기 위함이다. GET 요청은 서버로부터 리소스를 가져오기 위해 사용된다. 나머지 verb들에 대해서는 나중에 더 알아보도록 하자

 

Express는 GET 요청을 라우트 하기 위해 app.get() 메서드를 사용한다. app.get 메서드는 일반적으로 두 파라미터를 취하는데, path와 콜백 함수이다. 다음 코드를 작성해보자

const todos = [
  {
    id: 0,
    todo: "저녁 장 보기"
  },
  {
    id: 1,
    todo: "프로그래밍 과제 하기"
  }
];

app.get('/todos', (req, res, next) => {
  // 여기에 todos 배열을 넘겨주는 로직을 작성할 것이다
}

위 라우트는 /todos 경로로 들어온 GET 요청을 받아 콜백 함수를 호출할 것이다. 콜백 함수의 파라미터로 req는 서버로 들어온 요청을, res는 Express 서버가 반환할 응답이다. 만약 라우트가 매치되는 것이 없다면, 서버는 404 Not Found 에러를 반환할 것이다

 

이제 /todos 경로로 들어온 요청에 응답을 전송해보자. app.get 라우트 안을 다음과 같이 작성해보자

app.get("/todos", (req, res, next) => {
  res.send(todos);
});

그런 다음 server.js 파일을 다시 실행하고, localhost:4001/todos 에 접속해보자. json 데이터가 성공적으로 반환되는 것을 확인할 수 있다! res.send() 메서드는 응답을 전송하는 기능을 한다. send 외에도 JSON 응답을 전송하는 res.json() 메서드 등이 존재한다

 

라우트 경로를 매칭 하는 과정을 도식적으로 나타낸 그림은 다음과 같다

 

<그림 1> 라우트 경로 매칭 과정(출처: codecademy.com)

 

Express는 요청이 들어오면 코드에 작성된 순서대로 라우트를 검사한다. 첫 번째로 매칭 된 라우트로 요청이 전달되고, 콜백 함수가 호출된다. 위 그림에서 두 가지 라우트가 존재하는데, 둘 다 GET 요청을 처리하고 있어서 코드 작성 순서에 의해 들어온 요청을 첫 번째 라우트와 매칭 해본다. 그러나 path가 맞지 않아 다음 라우트로 요청을 넘기고, 해당 라우트의 경로와 매칭이 되어서 해당 라우트의 콜백 함수가 가 호출되게 된다. 

 

 

 

라우트 파라미터

라우트 파라미터는 라우트 path 뒤에 콜론(:)으로 따라오는 파라미터를 말한다. 예를 들어 /todos/:id는 /todos/1과 /todos/30 둘 다 매칭 되고, 각각의 경우에 id 파라미터는 1과 30이 된다. 우리 서버에 다음 코드를 추가해보자

app.get("/todos/:id", (req, res, next) => {
  res.send(todos[req.params.id]);
});

위 코드에서 req.params.id 는 id 파라미터를 지칭한다. 즉, GET /todos/1 요청이 들어오면 todos[1] 을 반환하게 되고, 화면에 나타나는 문자는 '프로그래밍 과제 하기'가 된다. server.js를 다시 시작해서 localhost:4001/todos/1에 접속해보자

 

 

 

Review

지금까지 Express 서버를 구동하고 간단한 GET 요청을 처리하는 라우트를 작성해 보았다. todos 객체에 여러 id 값의 할 일들을 추가해보고, 라우트가 요청을 잘 처리하는지 테스트해본다면 Express 서버의 요청-응답 사이클에 어느 정도 익숙해질 것이다