개발일지
BE Day-4 본문
nodemon
서버를 자동으로 새로고침해주는 기능 이걸 설치하면 서버를 껐다 켰다 안해도 코드를 수정하고 저장하면 자동으로 새로고침 되면서 서버가 켜진다
터미널에서 설치하는 명령어
yarn add nodemon
패키지제이슨에 아래 명령어 추가하면 start:dev 로 nodemon을 실행시킬수 있다 이 부분은 자기가 다른 명령어로 바꿔서 사용가능
노드몬 실행 명령어 변경
"scripts": {
"start:dev": "nodemon index.js"
},
////실행 명령어
yarn start:dev
Rest-api 만들기
아래는 게시글을 조회하는 api이다
Rest-API에서 데이터를 가져오는 요청은 GET method를 사용
// index.js
// const express = require('express')
import express from 'express'
const app = express()
app.get('/boards', (req, res) => {
// 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
// 현재 데이터 베이스 조회는 배우지 못해서 하나하나 데이터를 작성한부분
// 이 데이터를 프론트로 응답해주는
// 데이터는 하나의 값이 아닌 여러개의 값으로 구성되어서 배열안에 객체형식으로 들어가 있는 형태가 대부분이다
// 그래서 게시글 하나하나객체로 표현하고 그 객체가 담긴 배열을 result라는 변수에 담았다
const result = [
{ number: 1, writer: "철수", title: "제목입니다~~", contents: "내용이에요!!" },
{ number: 2, writer: "영희", title: "영희입니다~~", contents: "영희이에요!!" },
{ number: 3, writer: "훈이", title: "훈이입니다~~", contents: "훈이이에요!!" },
]
// 2. 꺼내온 결과 응답 주기
// result에 담긴 값을 응답 값으로 보내주는 코드이다
res.send(result);
});
app.listen(3000, () => {
console.log(`Example app listening on port ${3000}`)
})
req, res란?
위의 코드에서 get 함수의 두번째 매개변수로 화살표 함수를 받고 있습니다.
그리고 이 화살표 함수는 req, res라는 두 변수를 받고 있습니다.
req는 흔히 Request를 줄여서 사용하는 변수명입니다.
여기에는 클라이언트(브라우저)에서 보낸 HTTP 요청이 들어있습니다.
구제척으로는 요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등이 들어있습니다.
res는 흔히 Response를 줄여서 사용하는 변수명입니다.
서버에서 다시 클라이언트(브라우저)로 응답을 보낼 때 사용합니다.
쿠키, HTTP status 코드, json 등의 내용을 담아 보낼 수 있습니다.
게시글 등록 API 만들기
데이터를 등록하는 요청은 POST method를 사용합니다.
POST 요청이 들어왔을 때, 데이터베이스에 데이터를 저장했다고 가정하고
'게시물 등록에 성공하였습니다!!'라고 응답을 보내주는 코드를 추가합니다.
// index.js
// ... 기존 코드
app.post('/boards', (req, res) => {
// 1. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기
// 아직 데이터 저장 하는 부분은 배우지 못해서 데이터를 저장했다고 치고
// 2. 저장 결과 응답 주기
res.send('게시물 등록에 성공하였습니다!!');
});
app.listen(3000, () => {
console.log(`Example app listening on port ${3000}`)
})
postman
API 개발을 보다 빠르고 쉽게 구현 할 수 있도록 도와주며, 개발된 API를 테스트하여 문서화 또는 공유 할 수 있도록 도와 주는 플랫폼이다.
크롬 확장프로그램으로 설치 가능
게시글 조회 요청
get요청을 보내어서 게시글 조회 해보겠습니다.
URL에는 http://localhost:3000/boards 라고 적겠습니다.
3000으로 설정한 이유는 우리는 port를 3000으로 설정하였기 때문입니다.
Send 버튼을 누르면 아까 임의로 작성한 데이터의 값을 응답으로 받아 올 수가 있습니다
게시글 등록 요청
이번에는 get 부분을 post 요청으로 바꾸고, postman을 이용하여 게시글 등록을 해보겠습니다.
우리는 앞서 클라이언트(브라우저)에서 보낸 실제 데이터가 req.body객체 안에 담겨져 오게 된다고 배웠죠?
우리는 이와 같은 상황을 만들어 테스트하기 위해 포스트맨을 사용하여 body 부분에 담겨오는 데이터를 직접 작성해 보겠습니다.
{
"writer": "철수",
"title": "제목입니다~~",
"contents": "내용이에요!!!!!!!!"
}이 부분이 프론트에서 게시글 등록 버튼을 만들어서 게시글을 작성한 사용자가 등록 버튼을 누르면 위의 데이터가 백엔드로 넘어가서 백엔드는 데이터 베이스에 저장하고 응답으로 저장이 완료 되었다고 하는 식으로 이해하면 좋을거 같다 그걸 보기 쉽고 실행이 되는지 하는게 포스트맨이다
postman에서 Send 버튼을 눌러서 요청을 해봅니다.
'게시물 등록에 성공하였습니다!!'라는 메세지가 나오면서 성공적으로 응답하였습니다.
이어서 터미널에서 요청 값이 잘 들어오는지 콘솔 출력 값을 확인해 보겠습니다.
undefined가 출력되었네요. 왜 그런것일까요?
express 프레임워크는 기본적으로는 json형태를 지원하고 있지 않습니다.
따라서 서버에서 json을 읽어오기 위해 app.use(express.json()) 코드를 추가해 주어야 합니다.
Swagger를 활용한 API-Docs
swagger은 rest-api를 쉽게 문서화하고 테스트할 수 있도록 도와주는 도구입니다
https://swagger.io/ swagger 공식 사이트
swagger을 사용하기 위해서는 두가지 모듈을 설치해야한다
yarn add swagger-ui-express
yarn add swagger-jsdoc
아래 코드들을 서버코드가 짜여있는 파일 안에 작성해준다
// 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)));
그리고 swagger만 관리할수 있게 폴더를 따로 만들고 그 안에 config.js, boards.swagger.js 라는 파일 두개를 만들어서 활용한다
//config.js
export const options = {
failOnErrors: true, // Whether or not to throw when parsing errors. Defaults to false.
definition: {
openApi: "3.0.0",
info: {
title: "나의 API 설명서",
version: "1.0.0",
},
},
apis: ["./swagger/*.swagger.js"],
};//api-docs 이부분을 나중에 백엔드에서 만들어야함
//띄어쓰기 들여쓰기 주의
/**
* @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: 성공
*/
