📒 목차

• 📌 nodemon을 활용하여 refresh 문제 해결하기
• 📌 라우팅 (Routing)이란?
• 📌 Rest-API 만들기
• 📌 Rest-API 요청 실습 (POSTMAN)
• 📌 핸드폰 번호를 받아 인증 토큰 만들기 -> Rest-API로 만들기
• 📌 Swagger를 활용한 API-Docs 만들기

---

📌 nodemon을 활용하여 refresh 문제 해결하기

그동안은 소스코드를 수정하게 되면 API 응답을 받아오기 전에 만약 서버가 켜져있었다면 서버를 닫고 다시 열어야 하는 불편함이 있었다.
이러한 불편함을 해결할 수 있는 도구가 있는데, 바로 nodemon이다. nodemon을 사용하게 되면 소스코드를 수정할 때마다 매번 서버를 닫고여는 과정없이 즉각적으로 서버가 refresh되어 수정된 코드가 적용된다.
이제 nodemon을 사용하기 위해 필요한 필요한 절차에 대해 알아보도록 하자!

먼저, nodemon을 설치하고자 하는 폴더에 본인이 위치해 있는지 확인부터 해야한다. 그 후, 터미널에 명령어 ls를 엽력하여 package.json파일이 있는지 확인한다. 만약, package.json이 없다면 yarn init 명령어를 입력하여 파일을 만든다. 확인이 전부 끝난다면 yarn add nodemon 명령어를 입력하여 nodemon을 설치한다. 설치가 완료되면 package.json 파일 안에 nodemon이 추가되어있는 것을 확인할 수 있다.
package.json 파일에 scripts부분을 작성하여야 한다. scripts 부분의 작성을 통해 우리가 서버를 실행할 때, 원하는 명령어를 설정할 수 있다. 아래를 보게 되면 start:dev라는 명령어를 만든 것을 확인할 수 있다.

{
  "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명령어를 사용하면 서버가 열리게 된다. 물론 자신이 원할 때, script 부분을 수정하면 다른 명령어로 변경할 수 있다.

터미널을 보면 start:dev 명령어를 사용하여 nodemon이 작동되어 별도로 서버를 열고닫지 않아도 소스코드가 바로 적용되는 것을 확인할 수 있다.

Nodemon 설치하고 사용하는 법 정리

1. 설치하고자하는 폴더의 위치 확인하기
2. pcackage.json파일 유무 확인하기 (없다면 yarn init하여 만들기)
3. yarn add nodemon 명령어 입력하여 nodemon 설치하기
4. package.json파일안에 nodemon추가되었는지 확인 후 scripts부분 작성하기 (시작 명령어 만들기)

---

📌 라우팅 (Routing)이란?

라우팅이란 클라이언트가 요청(Request)를 했을 때, 응답(Response)하는 방법을 결정하는 것을 말한다.
구조를 살펴보면 아래와 같다.

app: express의 인스턴스
METHOD: HTTP의 메서드(POST, PUT, DELETE, GET)
PATH: 서버에서의 경로
HANDLER: 라우터가 일치할 때, 실행되는 함수

app.METHOD(PATH, HANDLER)

// 홈페이지에서 'Hello World!로 응답'
app.get('/', function (req, res) {
  res.send('Hello World!');
});
// user 라우트에 대한 PUT 요청에 응답
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

📌 Rest-API 만들기

✅ 게시글 조회하는 API 만들기

Rest-api에서 조회하는 메서드는 GET이다. 따라서 만약 /boards라는 엔드포인트로 GET 요청이 들어온다면, 데이터가 조회될 수 있도록 로직을 작성하여야 한다.

아직 데이터베이스를 접속하여 데이터를 다루는 부분은 학습하지 못해 당장은 결과값을 하나하나 작성하여 데이터를 만들고 실습을 진행했다.

보통 데이터는 하나의 값으로만 있는 경우는 많이 없다. 그렇기 때문에 일반적으로 여러 데이터가 구성되어 있을 때는 배열 안에 객체가 들어있는 형태로 이루어진다.
즉, 게시글 하나는 객체로 표현하고, 게시글들을 모아 result라는 하나의 배열에 담는 형식으로 이루어진다.

아래의 get함수는 두번째 매개변수로 화살표 함수를 받고 있으며, req와 res라는 변수들을 받고 있다. req는 (request)를 줄여서 사용하는 변수명이며, 여기에는 브라우저에서 보낸 HTTP 요청이 들어있다.
res는 (response)를 줄여 사용하는 변수명이며, 서버에서 브라우저로 응답을 보낼 때 사용한다.

// index.js
// const express = require('express')
import express from 'express'

const app = express()

app.get('/boards', (req, res) => {
  // 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
	const result = [
		{ number: 1, writer: "철수", title: "제목입니다~~", contents: "내용이에요!!!" },
    { number: 2, writer: "영희", title: "영희입니다~~", contents: "영희이에요!!!" },
    { number: 3, writer: "훈이", title: "훈이입니다~~", contents: "훈이이에요!!!" },
  ]

  // 2. 꺼내온 결과 응답 주기
  res.send(result);
});

app.listen(3000, () => {
  console.log("백엔드 API 서버가 켜졌어요!!!")
})

이제 본격적으로 게시글을 등록하는 API를 만들어보자!
데이터를 등록하는 메소드는 POST이다. 따라서 /boards로 POST요청이 왔을 때, 데이버베이스에 데이터를 저장한 것으로 가정을 하고 '게시물 등록에 성공하였습니다!!'라는 응답 메시지를 보내도록 해보자.

클라이언트(브라우저)에서 보낸(request) 데이터는 req에 저장 되어 있다. 여기서 구체적으로 살펴보게 되면 실제 데이터는 req.body안에 담겨져 오게 된다.

따라서 우리는 req.body 객체 안에 있는 값을 데이터베이스에 저장하기 위해 확인을 하고 res.send()를 통해 응답 메시지를 보낸다. 이번 실습때는 아직 데이터베이스를 배우지 못해 하드코딩으로 동작이 이루어졌지만, 향후 데이터베이스 학습을 통해 api를 완성하기 위해서는 지금의 학습 로직이 매우 중요하다!!

// index.js

// const express = require('express')
import express from 'express';

const app = express();

app.get('/boards', (req, res) => {
  // 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
	const result = [
		{ number: 1, writer: "철수", title: "제목입니다~~", contents: "내용이에요!!!" },
    { number: 2, writer: "영희", title: "영희입니다~~", contents: "영희이에요!!!" },
    { number: 3, writer: "훈이", title: "훈이입니다~~", contents: "훈이이에요!!!" },
  ]

  // 2. 꺼내온 결과 응답 주기
  res.send(result);
});

app.post('/boards', (req, res) => {
  // 1. 브라우저에서 보내준 데이터 확인하기
	console.log(req)
  console.log("=========================")
  console.log(req.body) // 추가
	
	// 2. DB에 접속 후, 데이터를 저장 => 데이터 저장했다고 가정

  // 3. DB에 저장된 결과를 브라우저에 응답(response) 주기
  res.send("게시물 등록에 성공하였습니다.")
});

app.listen(3000, () => {
  console.log("백엔드 API 서버가 켜졌어요!!!");
});

📌 Rest-API 요청 실습 (POSTMAN)

지금까지 서버를 여는 것도 배우고, api로 요청을 보냈을 때, 응답을 받는 로직도 학습하였다.
이제 실제로 api에 요청을 보내보도록 하자!
rest-api 실습을 위해 POSTMAN을 활용해보도록 하자.
postman 페이지에 접속하여 api에 요청을 보내기 위해 먼저 조회를 하기 위한 메서드인 GET을 선택하고,
URL을 적어준다. 여기서 포트번호가 3000번인 이유는 앞서 우리가 3000번 포트번호로 설정을 해주었기 때문이다.
이제 모든 준비는 끝이났다. api 로직이 이상이 없다면, send 버튼 클릭 이후, 결과가 아래처럼 응답해주게된다.

다음은 게시글 등록을 해보자!
앞서 해본 조회와 전체적인 맥락은 비슷하지만, 차이점이 존재한다.
먼저, 메소드를 등록을 하기 위해 POST로 교체한다.
그리고 게시물을 등록하기 위해 데이터를 입력한다. 이 데이터는 body에 담겨오는 데이터이다.
좀 더 구체적으로 말하자면 req.body안에 담겨있다.
이제 body 버튼을 클릭한뒤, raw형식의 JSON을 선택하고 아래의 사진과 같이 데이터를 작성한다.
send 버튼을 누르게 되면 '게시물 등록에 성공하였습니다'라는 메시지가 나타나게 된다.

✅ app.use(express.json())

POSTMAN에서 응답을 확인한 후, 요청 값이 잘들어왔는지 확인하기 위해 콘솔창을 확인해보면 req는 잘 나왔지만 req.body는 undefined가 나온것을 확인할 수 있다.
어째서 그런 것일까?
express프레임워크는 기본적으로 json형태를 지원하고 있지 않다!!
그렇기 때문에 서버에서 json을 읽을 수 있도록 app.use(express.json())코드를 작성해주어야 정상적으로 req.body를 읽을 수 있다.

// index.js

import express from 'express';

const app = express();

app.use(express.json()); // 추가된 코드
app.get('/boards', (req, res) => {

// ... 생략

📌 핸드폰 번호를 받아 인증 토큰 만들기 -> Rest-API로 만들기

핸드폰 번호가 정상적으로 입력 받았는지 검증한 뒤, 인증번호를 전송해주는 api를 만들어보자!!
아래는 번호가 정상적인지 검증하는 로직이다.

	// 1. 휴대폰번호 자릿수 맞는지 확인하기(10~11자리)
  const isValid = checkPhone(myphone);
  if (isValid === false) return;

  // 2. 핸드폰 토큰 6자리 만들기
  const mytoken = getToken();

  // 3. 핸드폰번호에 토큰 전송하기
  sendTokenToSMS(myphone, mytoken);

이제 위 소스코드를 바탕으로 POST 요청이 왔을 때, 처리해주는 api를 만들어보자

myphone 변수에 req.body.qqq 즉, 휴대폰 번호를 받아 검증과정을 거친 뒤, 인증번호를 response하여 전달하는 과정으로 이루어진다.

// index.js
app.post("/tokens/phone", (req, res) => {
  const myphone = req.body.qqq; 

  // 1. 휴대폰번호 자릿수 맞는지 확인하기(10~11자리)
  const isValid = checkPhone(myphone);
  if (isValid === false) return;

  // 2. 핸드폰 토큰 6자리 만들기
  const mytoken = getToken();

  // 3. 핸드폰번호에 토큰 전송하기
  sendTokenToSMS(myphone, mytoken);
  res.send("인증완료!!!");
});

추가적으로, 여기서 그냥 POSTMAN을 통해 요청을 날리면 에러가 발생한다. 왜냐하면 index.js 파일 내부에는 checkPhone, getToken, sendTokenToSMS 함수(검증 로직)이 존재하지 않기 때문이다.
따라서 import를 통해 phone.js와 index.js를 연결해야한다.

최종본

// phone.js

export function checkPhone(myphone){
    if(myphone.length < 10 || myphone.length > 11){
        console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!")
        return false
    } else {
        return true
    }
}

export function getToken(){
    const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
    console.log(result)
    return result
}

export function sendTokenToSMS(myphone, result){
    console.log(myphone + "번호로 인증번호 " + result + "를 전송합니다.")
}

// index.js

import express from 'express'
import { checkPhone, getToken, sendTokenToSMS } from "./phone.js"; // export 가져오기

const app = express()
app.use(express.json())

// ...생략

이제 POSTMAN으로 검증이 잘되는지 확인해보자!

📌 Swagger를 활용한 API-Docs 만들기

Swagger가 무엇일까?
swagger는 rest api를 쉽게 문서화하고 테스트할 수 있도록 도와주는 도구이다!!
Node.js로 만든 api를 swagger와 연결하기 위해 설치해야 하는 npm 모듈이 두 가지가 있다.

1. yarn add swagger-ui-express
2. swagger-jsdoc

한번에 설치하기
yarn add swagger-ui-express swagger-jsdoc

swagger 문서와 관련된 파일을 따로 관리하기 위해 보통 swagger 폴더를 새로 만들어 작업을 진행한다.

이제 swagger-jsdocnpm을 참고해보자!!
이 후 만들고 싶은 swagger의 형식을 찾는다면 swagger 폴더 안에 (api이름).swagger.js파일을 만들고 npm의 내용을 넣는다.
추가적으로 swagger를 만들때, 들여쓰기에 매우 민감하기 때문에 항상 들여쓰기를 신경써야 한다!!!

/**
 * @swagger
 * /boards:
 *   get:
 *     summary: 게시글 가져오기
 *     tags: [Board]
 *     parameters:
 *          - in: query
 *            name: number
 *            type: int
 *     responses:
 *       200:
 *         description: 성공
 *         content:
 *           application/json:
 *              schema:
 *                  type: array
 *                  items:
 *                      properties:
 *                          number:
 *                              type: int
 *                              example: 3
 *                          writer:
 *                              type: string
 *                              example: 철수
 *                          title:
 *                              type: string
 *                              example: 제목입니다~~~
 *                          contents:
 *                              type: string
 *                              example: 내용입니다!!!
 */
>
/**
 * @swagger
 * /boards:
 *   post:
 *     summary: 게시글 등록하기
 *     tags: [Board]
 *     responses:
 *          200:
 *              description: 성공
 */

이제 다음으로 해야하는 것으 api 문서를 만들어주는 설정이 필요하다.
swagger 폴더에 config.js 파일을 새롭게 만들어 설정을 분리해주자

// config.js
>
export const options = {
    definition: {
      openapi: '3.0.0',
      info: {
        title: '나만의 미니프로젝트 API 명세서!!',
        version: '1.0.0',
      },
    },
    apis: ['./swagger/*.swagger.js'], // files containing annotations as above
  };

swagger.json 파일을 통해 생성된 스웨거 문서를 express에 제공하는 swagger ui express를 활용해보자.
코드를 추가하여 작성하면 된다.

// index.js
>
import swaggerUi from 'swagger-ui-express'
import swaggerJSDoc from 'swagger-jsdoc'
import { options } from './swagger/config.js'
>
// ...생략
>
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerJSDoc(options)));
>
// ...생략

이제 설정한 주소인 (http://localhost:3000/api-docs/) 접속해보면 api-docs가 완성된 것을 확인할 수 있다.

🌈 오늘 하루

백엔드 개발자로서 api를 본격적으로 다루기 시작한 하루인 것 같다. 너무나 많은 내용을 학습하여 아직 완벽히 내것이 된것 같진 않지만, 학습하는 과정에서 즐겁게 로직을 생각하고 공부한 것 같다. 물론 이제 시작이지만 하나씩 채워나가며, 백엔드 개발자로서 꿈을 이루고 싶다!!
복습!!복습!!복습!! 복습이 제일 중요하다!!