Express 설치

Express 공식 홈페이지

Express는 Node.js에서 쉽게 웹 서버를 개발할 수 있도록 도와주는 프레임워크 입니다.

프론트에서 우리가 만든 백엔드 API로 요청을 할 때, 먼저 그 요청을 잘 받아야합니다.

그 후 요청에 대해 응답을 잘 해줘야하는데, 이런 일을 하도록 도와주는게 express입니다.

먼저 실습을 진행 할 폴더 04-01-rest-api-with-express-1 를 새로 만들어줍니다.

yarn init 명령어를 입력해주고, 모든 질문에 엔터를 눌러 넘어갑니다.

이를 통해 package.json 파일이 생성됩니다.

여기서 "type": "module" 을 한 줄 추가해줍니다.

{
  "name": "04-01-rest-api-with-express-1",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module"
}

그리고 express를 설치해줍니다.

npm install express
or
yarn add express

Rest-API 만들기

같은 폴더에 index.js 파일을 생성해줍니다.

방금 설치한 express를 사용하려면 import 를 통해 다른 js파일에 정의된 함수를 불러와야합니다.

import express from 'express'

npm 사이트에서 나온 설명을 참고해 API를 만들어보겠습니다.

import express from 'express';

const app = express();

// GET 요청이 들어왔을 때
app.get('/', function (req, res) {
    res.send('Hello World');    // 응답 보내기
});

app.listen(3000);   // 3000번 포트에서 실행

express 를 실행해, 결과인 express 어플을 새로운 변수 app 에 담아줍니다.

그리고 GET 요청이 들어왔을 때 Hello World 라고 응답을 보내주는 코드입니다.

마지막으로 app.listen(3000) 을 적어줘서 서버를 3000번 포트에서 실행하도록 설정합니다.

node index.js 명령어로 서버를 켜보겠습니다.

서버를 실행시키면 3000번 포트에서 실행됩니다.

아무런 문제가 없다면 postman에서 http://localhost:3000 에 GET 요청을 보냅니다.

응답으로 Hello World 를 정상적으로 받았습니다.

서버를 종료하고 싶으면 터미널에서 Ctrl + c 를 눌러줍니다.

그 전까지는 서버가 계속 켜져있는 상태로, 터미널에서 다른 입력을 할 수 없습니다.

💡 서버 실행이 안됩니다!
에러 코드: address already in use :::3000

위와 같은 에러 문구가 나온다면 이미 사용되는 포트이기떄문에 동시에 켤 수 없다는 소리입니다.
하나의 포트 번호에는 하나의 프로그램만 실행할 수 있습니다.
아래의 설명을 읽고 터미널을 통해서 프로그램을 종료해주세요.

만약에 서버가 켜진 터미널을 찾을 수 없다면, netstat -anv | grep LISTEN 명령어를 입력해주세요.

3000번 포트에서 서버를 켰기때문에 그 부분을 찾아, process id 를 기억합니다.

kill -9 프로세스_아이디 를 입력해주면 됩니다.

위의 예시로는 kill -9 2515 가 되겠네요.

다시 netstat -anv | grep LISTEN 명령어를 입력해서 확인해보면, 3000번 포트에서 동작중인 프로그램은 없다는 것을 확인할 수 있습니다.

라우팅

Express 기본 라우팅 설명 페이지

위에서 만들었던 폴더를 가지고 복사해서 사본을 만들어주시고 이름을 04-02-rest-api-with-express-2 로 변경해주세요.

index.js 파일을 수정해보겠습니다.

Rest-API에서 데이터를 가져오는 요청은 GET으로 해야합니다.

/boards 라는 엔드포인트로 GET 요청이 들어왔을때, '조회에 성공하였습니다.' 라고 바로 응답을 보내주는 코드를 추가해주세요.

import express from 'express';

const app = express();

// GET 요청이 들어왔을 때
app.get('/boards', (req, res) => {
    res.send('조회에 성공하였습니다.');    // 응답 보내기
});

app.listen(3000);   // 3000번 포트에서 실행

req, res

여기서 get 함수의 두번째 매개변수로 화살표 함수를 받고 있습니다.

그리고 이 화살표 함수는 req , res 라는 두 변수를 받고 있습니다.

req 는 Request 를 줄여서 사용하는 변수명입니다.

여기에는 브라우저에서 보낸 HTTP 요청이 들어있습니다.

구체적으로는 요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등이 들어있습니다.

res 는 Response 를 줄여서 사용하는 변수명입니다.

서버에서 다시 클라이언트(브라우저)로 응답을 보낼 때 사용합니다.

쿠키, HTTP 상태 코드, json 등의 내용을 담아 보낼 수 있습니다.

이번에는 /board 로 POST요청이 들어왔을 때, '등록에 성공하였습니다.' 라고 응답을 보내주는 코드를 추가해주세요.

// ... 기존 코드

app.post('/board', (req, res) => {
    // 데이터를 등록하는 로직
    res.send('등록에 성공하였습니다.');
})

app.listen(3000);

최종 코드는 다음과 같이 완성됩니다.

import express from 'express';

const app = express();

// GET 요청이 들어왔을 때
app.get('/boards', (req, res) => {
    // 데이터를 조회하는 로직
    res.send('조회에 성공하였습니다.');
});

// POST 요청이 들어왔을 때
app.post('/board', (req, res) => {
    // 데이터를 등록하는 로직
    res.send('등록에 성공하였습니다.');
})

app.listen(3000);

터미널에서 04-02-rest-api-with-express-2 폴더 안으로 이동해 node index.js 명령어를 입력해 서버를 띄워줍니다.

Rest-API 요청 실습(postman)

서버가 켜졌으니, 이제 postman을 통해 요청을 보내서 응답이 잘 오는지 확인해보겠습니다.

GET 요청을 먼저 보내보겠습니다.

URL에는 http://localhost:3000/boards 적고 Send를 누르면 '조회에 성공하였습니다.' 라는 응답을 받을 수 있습니다.

이번에는 POST 요청으로 변경하고, URL에 boards 를 board 로 변경 후 다시 Send를 눌러보겠습니다.

정상적으로 등록에 성공했다는 메시지를 받았습니다.

express로 JSON 받기

04-02-rest-api-with-express-2 폴더를 복사 붙여넣기해 사본을 만들어줍니다.

폴더의 이름을 04-03-rest-api-with-express-3 로 변경해줍니다.

index.js 파일을 수정해보겠습니다.

위에서 잠깐 살펴보았던 req 가 무엇인지, 콘솔에 로그를 찍어보겠습니다.

app.post('/board', (req, res) => {
    // 데이터를 등록하는 로직
    console.log(req);

    res.send('등록에 성공하였습니다.');
})

서버를 종료했다가 다시 띄우고 다시 요청을 보내면 터미널에 req에 뭐가 들어있는지 내용이 보입니다.

💡 코드를 수정했다면 서버를 종료하고 다시 열여줘야 합니다.
수정한 부분이 반영되지 않았다면 서버를 재시작해주세요.
추후에 Nest를 이용하면, 다시 켜지 않아도 반영될 수 있게 할 수 있습니다.

이번에는 실제로 서버로 데이터를 보내보겠습니다.

게시글을 등록하려면 어떤 내용을 등록해야될지 보내줘야합니다.

HTTP 메시지의 바디 안에 JSON 형식으로 데이터를 넣어주면 되는데, 이때 서버에는 json을 읽어주기 위해 중간에 한번 처리를 해줘야합니다.

app.use(express.json()) 코드를 추가해주세요.

잘 받아오는지 확인하기 위해 console.log(req.body) 도 추가해주세요.

postman에서 Body를 클릭해 raw형식의 JSON을 선택하고 아래 데이터를 적어주세요.

{
  "writer": "철수",
  "title": "제목입니다~",
  "contents": "내용입니다!!"
}

터미널에에서 기존 서버를 종료시키고 다시 실행시킵니다.

postman에서 Send 버튼을 누르고 터미널을 보면 데이터가 잘 받아와진 것을 확인할 수 있습니다.

Rest-API 게시판 목록 데이터 보내기

지금까지는 브라우저에서 어떤 요청이 오던 단순한 문장으로 응답했습니다.

하지만 보통 데이터는 배열 안에 객체가 들어있는 형태가 많습니다.

아래의 게시판 데이터베이스를 예로 들어보겠습니다.

number	writer	title	contents
1	"철수"	"제목입니다~"	"내용!!"
2	"영희"	"안녕하세요~"	"배고프네요"
3	"훈이"	"점심은 맛있게 드셨나요?"	"식사는 하셨나요?"
4	"맹구"	"안녕하세요!!!"	"내용입니다~"

이 표를 코드로 표현하려면 어떻게 해야할까요?

게시글 하나 하나를 객체로 표현하고 글들을 모두 모아 하나의 배열 형태로 나타낼 수 있습니다.

[
  { number: 1, writer: '철수', title: '제목입니다~', contents: '내용!!'},
  { number: 2, writer: '영희', title: '안녕하세요~', contents: '배고프네요'},
  { number: 3, writer: '훈이', title: '점심은 맛있게 드셨나요?', contents: '식사는 하셨나요?'},
  { number: 4, writer: '맹구', title: '안녕하세요!!!', contents: '내용입니다~'}
]

이제 이 데이터를 클라이언트에게 보내주면 됩니다.

app.get('/boards') 안에서 기존에 있던 res.send('조회에 성공하였습니다.') 부분은 주석처리하고, 게시글 데이터를 보내는 코드를 작성합니다.

터미널에서 기존에 돌아가던 서버를 재시작 해줍니다.

그리고 GET 요청을 통해 http://localhost:3000/boards 의 응답을 확인하실 수 있습니다.

휴대폰 인증번호 API 실습

핸드폰 번호를 받아 인증 토큰을 만들어주고 전송해주는 간단한 API를 만들어보겠습니다.

우선 04-03-rest-api-with-express-3 폴더를 복사하여 사본을 만들고 04-04-rest-api-with-express-3-token 으로 변경해줍니다.

아래의 코드를 참고하여 복사합니다.

export function checkValidatePhone(phone) {
    if(phone.length !== 10 && phone.length !== 11) {
        // 에러 발생을 알려준다.
        console.log('에러발생! 핸드폰 번호를 제대로 입력해 주세요.');
        return false;
    }

    return true;
}

export function getToken(count) {
    if (count === undefined) {
        console.log('에러발생! 갯수를 입력해주세요!');
        return;
    } else if (count <= 0) {
        console.log('에러발생! 갯수가 너무 적습니다!');
        return;
    } else if (count >= 10) {
        console.log('에러발생! 갯수가 너무 많습니다!');
        return; 
    }

    const result = String(Math.floor(Math.random() * 10 ** count)).padStart(count, '0');
    return result;
}

export function sendTokenToSMS(phone, token) {
    console.log(phone + '번호로 인증번호' + token + '을 전송합니다.');
}

만든 폴더 안에 phone.js 파일을 새로 생성해 코드를 붙여넣습니다.

/phone/token URL로 POST 요청이 왔을 때 처리해주는 API를 추가해주겠습니다.

index.js 파일에 아래의 코드를 추가해줍니다.

app.post('/phone/token', (req, res) => {
    // 1. 휴대폰번호 자릿수 맞는지 확인하기
    const isValidationPhone = checkValidatePhone(req.body.phone);

    if(isValidationPhone === true) {
        // 2. 핸드폰 토큰 6자리 만들기
        const token = getToken(6);

        // 3. 핸드폰번호에 토큰 전송하기
        sendTokenToSMS(req.body.phone, token);
    }

    res.send('인증번호를 전송했습니다.');
})

app.listen(3000);

phone.js 파일에 있는 함수들 checkValidationPhone , getToken , sendTokenToSMS 을 import 해줍니다.

import { checkValidatePhone, getToken, sendTokenToSMS } from './phone.js'

터미널에서 해당 폴더로 이동한 후 서버를 띄워줍니다.

그리고 postman을 통해 POST 방식을 선택하고 URL은 http://localhost:3000/phone/token 을 적어줍니다.

Body 부분에는 핸드폰 번호를 아래와 같이 json 형식으로 적어줍니다.

그리고 요청을 보내줍니다.

그리고 터미널을 확인해보면 휴대폰 번호도 잘 전달되었고, 토큰도 정상적으로 만들어진 것을 확인할 수 있습니다.