[express.js] post 받는 서버 만들기

이 포스트에서는 express.js를 사용해 간단하게 post 메소드를 받는 서버를 만들어 보겠습니다. post 메소드는 HTTP 프로토콜을 통해 데이터를 전달하는 가장 일반적인 방법으로 post 메소드를 사용해 클라이언트가 보낸 정보를 request body에서 가져오는 방법을 알아보겠습니다. 여기 작성한 모든 코드는 macOS에서 작업했습니다.

프로젝트 생성

node.js의 웹 프레임워크인 express.js를 사용해 서버를 만들기 전에 콘솔에서 적당한 위치에 npm 프로젝트를 생성합니다.

$ mkdir test-express && cd test-express
$ npm init -y

위의 코드로 test-express 라는 디렉토리를 만들고 그 안에서 npm 프로젝트를 초기화 했습니다. 'npm init -y' 명령어를 입력하면 다음과 같은 메시지가 콘솔에 나타납니다.

'npm init -y' 명령어는 npm 프로젝트를 초기화 하는데 메타 속성을 일일이 물어보지 않고 기본 값으로 채워 고민없이 빠르게 프로젝트를 초기화 합니다.

node.js express 서버 만들기

이제 콘솔에서 생성된 프로젝트에 express.js 프레임워크를 설치 합니다.

$ npm i express

위의 코드는 i 옵션을 사용하여 express.js를 설치하는 명령어 입니다. i는 install의 축약으로 i나 install 모두 사용 가능합니다.

콘솔에 위와 같은 메시지가 나오고 설치가 성공하면 이제 서버 소스코드를 작성할 단계입니다. 다음의 명령어를 입력해 서버 파일을 만들어 줍니다.

$ touch server.js

서버 파일을 만든 후 vi나 text editor 등 익숙한 프로그램으로 다음의 코드를 작성합니다.

const express = require('express');
const app = express();
const port = 8080;

app.get('/', (req, res) => {
  res.end('Hello world!');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

위는 espress.js를 사용하고 포트 번호를 8080으로 하는 서버를 만드는 코드입니다. 아직은 서버에 접속하면 Hello world!를 반환하는 기능 뿐 입니다. 이제 작성한 코드를 바탕으로 실제 서버를 올려 보겠습니다. 콘솔에 다음의 명령어를 입력합니다.

$ node server.js

위 명령어를 입력하면 콘솔에 서버가 8080 포트를 listen하고 있다는 메시지가 나타나고 서버가 시작됐습니다. 서버가 올바로 실행됐는지 알아보기 위해 브라우저 주소창에 'http://localhost:8080'을 입력합니다.

브라우저에 위 주소를 입력하면 8080 포트에서 대기하고있는 서버에 get 메소드를 보내게 되고 서버 소스코드에서 작성한 Hello world! 메시지가 화면에 나옵니다.

post 메소드 처리하기

우리의 express 서버에 post 메소드를 처리하는 기능을 추가하기위해 서버를 실행했던 콘솔에서 ctrl+c를 입력해 서버를 중지시킵니다. 그 다음 아래 명령어를 사용하여 post로 전달되는 값을 읽어들일 수 있도록합니다.

$ npm i body-parser cors

body-parser 패키지는 post로 전달된 payload를 request body로 읽을 수 있도록 처리해주는 미들웨어입니다. cors 패키지는 브라우저에서 메시지를 보낼 때 CORS 에러를 회피하기 위해 임시로 추가했습니다. 이제 server.js 파일을 열어 다음의 코드를 작성해줍니다.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 8080;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

app.get('/', (req, res) => {
  res.end('Hello world!');
});

app.post('/', (req, res) => {
  if (req.body) {
    console.log(req.body);
    res.end(JSON.stringify(req.body));
  } else {
    res.end();
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

이 코드의 핵심은 body-parser 미들웨어를 express가 사용하도록 등록하고 post 메소드를 처리하여 req.body에 어떤 데이터가 들어왔는지 콘솔에 출력하는 것 입니다. body-parser를 사용하지 않으면 클라이언트에서 데이터를 보냈다 하더라도 req.body로 읽을 수 없습니다.

이제 클라이언트에서 JavaScript fetch를 사용하여 간단히 FormData를 post하면 서버 콘솔에 다음과 같은 결과가 나타납니다. 클라이언트 예제 코드는 포스트에서 확인할 수 있습니다.

JavaScript에서 FormData를 URL 인코딩하여 보내면 다음과 같은 값을 얻을 수 있습니다.

정리

HTTP 프로토콜을 사용해 다양하고 많은 양의 데이터를 보내려면 post로 전송하는게 가장 일반적인 방법입니다. express 서버에서 이 데이터에 쉽게 접근하려면 body-parser 패키지와 같은 미들웨어를 사용합니다. body-parser를 통해 request의 구문 분석이 완료되면 body 속성을 통해 데이터에 접근할 수 있습니다.

관련 글

웹소켓 채팅 서버

IP 주소 확인 방법