Node.js - Rest API

Temporary·2024년 7월 8일
node.js
0

Nods.js

목록 보기
3/39

Rest-API 만들기

지금부터 게시글을 조회하는 API를 Rest로 만들어 보도록 하자.

Rest-API에서 데이터를 가져오는 요청은 GET method이다.

/boards라는 엔드포인트로 GET 요청이 들어왔을 때, 데이터가 조회될 수 있도록 우리는 로직을 추가해 주어야 한다.

DB접속은 추후에 하는것으로 하고, 현재는 결과값을 하드코딩해서 데이터를 임의로 만들어 사용한자.

이 때, 데이터는 하나의 값인 아닌, 여러 값으로 구성되어 있으므로 배열 안에 객체가 들어있는 형태가 대부분이다. 때문에 우리는 게시글 하나 하나를 객체로 표현하고, 게시글들을 모두 모아 result라는 하나의 배열 안에 담아서 표현하겠다.

마지막으로 result에 담긴 값을 응답으로 보내주는 코드(res.send(result))를 추가하면된다.

// 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
  res.send(result);
});

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

req, res란?

위의 코드에서 get 함수의 두번째 매개변수로 화살표 함수를 받고있다.

그리고 이 화살표 함수는 req, res라는 두 변수를 사용한다.

req는 흔히 Request를 줄여서 사용하는 변수명을 뜻한다. 여기에는 클라이언트(브라우저)에서 보낸 HTTP 요청이 들어있다.
구제척으로는 요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등이 들어있습니다.

res는 흔히 Response를 줄여서 사용하는 변수명을 뜻한다. 서버에서 다시 클라이언트(브라우저)로 응답을 보낼 때 사용한다. 쿠키, HTTP status 코드, json 등의 내용을 담아 보낼 수 있다.

다음으로는 게시글을 등록하는 API를 만들어 보자. 데이터를 등록하는 요청은 POST method를 사용한다.

이번에는 /boards 로 POST 요청이 들어왔을 때, 데이터베이스에 데이터를 저장했다고 가정하고

'게시물 등록에 성공하였습니다!!'라고 응답을 보내주는 코드를 추가해주자.

// index.js

// ... 기존 코드

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

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


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

앞서 클라이언트(브라우저)에서 보낸 HTTP 요청 정보가 req에 작성된다고 했다.

이 중에서도 실제 데이터는 req.body 객체 안에 담겨져 오게 된다.

데이터를 데이터베이스에 저장하기 위해 req.body 객체에 어떤 값이 담겨 오는지 확인하고 싶다.

따라서 req 와 req.body를 확인할 수 있는 console.log(req.body) 코드까지 추가해 주자.

// index.js

// ... 기존 코드

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 서버가 켜졌어요!!!")
})

03-03-rest-api-with-express-board 폴더의 index.js 파일의 최종 코드는 다음과 같다.

// 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 서버가 켜졌어요!!!");
});

서버 띄우기

터미널에서 03-03-rest-api-with-express-board 폴더 안으로 이동하고,

(위에서 폴더를 복사해 올 때 node_modules 폴더를 삭제했을 시, yarn install 명령어로 패키지들을 다시 설치하자.)

yarn start:dev 명령어를 입력해서 서버를 띄워보자.

이렇게 콘솔에 메세지가 나오고 커서가 떠있는 상태면 성공적으로 서버가 띄워진 것이다.

Rest-API 요청 실습(postman)

서버가 켜졌으니, 이제 각 API로 요청을 보냈을때 응답이 오는지 확인해야 한다.
postman을 실행해서 결과를 확인해보자.

게시글 조회 요청

먼저 GET 요청을 보내어 게시글을 조회해보자.

URL에는 http://localhost:3000/boards 라고 적어서 실행할 수 있다.

3000으로 설정한 이유는 port를 3000으로 설정하였기 때문이다.

Send 버튼을 누르면 아까 하드코딩한 데이터의 값을 응답으로 받아 올 수가 있습니다.

게시글 등록 요청

이번에는 POST 요청으로 바꾸고, postman을 이용하여 게시글 등록을 해보자

앞에서 클라이언트(브라우저)에서 보낸 실제 데이터가 req.body 객체 안에 담겨져 온다고 했다.

이와 같은 상황을 만들어 테스트하기 위해 포스트맨을 사용하여 body 부분에 담겨오는 데이터를 직접 작성해 보자

포스트맨의 Body 부분을 클릭하고 raw형식의 JSON을 선택하고 아래 데이터를 작성하자.

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

작성이 끝난 후, postman에서 Send 버튼을 눌러서 요청을 해보면

'게시물 등록에 성공하였습니다.'라는 메세지가 나오면서 성공적으로 응답이 되었다.

이어서 vscode 터미널에는 요청 값이 잘 들어왔는지 콘솔 출력 값을 확인해 보자

객체 형태의 req는 잘 나왔지만, req.body는 undefined가 출력되었다. 이는 왜 그럴까?

express 프레임워크는 기본적으로는 json형태를 지원하고 있지 않다.
따라서 서버에서 json을 읽어오기 위해서는 app.use(express.json()) 코드의 추가가 필요하다.
다시 index.js파일로 돌아와 app.use(express.json()) 코드를 추가한 뒤, 파일을 저장하자.

// index.js

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

const app = express();

app.use(express.json()); // <- 추가된 코드, 이 코드 한 줄로 json을 읽을 수 있다.
app.get('/boards', (req, res) => {

// ... 생략

다시 한번 Send 버튼을 눌러 요청하면 req.body에 담긴 데이터가 콘솔에 잘 출력되는 것을 확인할 수 있다.

createTokenOfPhone → Rest-API로 만들기

이번에는 이전에 만들어두었던 휴대폰 번호를 받아 인증 토큰을 만들어줬던 함수 createTokenOfPhone 을 이용해 Rest-api로 만들어보자.

이 함수를 이용해서 요청이 왔을 때 request body에서 휴대폰 번호를 받아 검증한 후, 인증번호를 전송해주는 API를 만드는 것이 목표다.

03-03-rest-api-with-express-board 폴더의 index.js파일에서 기존 작성된 API 아래 부분으로 이동하여 인증번호를 전송해주는 API를 만들어 보자.

section01 → 01-03-token-api-facade 폴더로 가서 index.js 파일 내에 존재하는

createTokenOfPhone 함수 내부 로직을 복사하여 03-03-rest-api-with-express-board → index.js 파일 내에 붙여넣어 재활용하자.

// 01-03-token-api-facade → index.js createTokenOfPhone 함수 내부 로직

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

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

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

index.js 파일에서 /tokens/phone URL로 POST 요청이 왔을 때 처리해주는 API를 만들어보자.

/// index.js

// ...생략

// post 요청이 들어왔을 때의 api 
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("인증완료!!!");
});

// ...생략
  • req.body 를 통해 Postman에서 요청을 보낼때 사용할 휴대폰 번호를 가지고와서 myphone 변수에 할당해준다.

이 때, API를 실행을 위해 phone.js 파일을 해당 폴더에 생성하고 함수들을 import 하자.
이후, 포스트맨으로 요청을 날려보면 작동되는 것을 확인할 수 있다.

완성된 phone.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 한다.

// index.js

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

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

// ...생략

postman으로 확인하기

서버를 종료하지 않았다면,

코드의 변화가 있을 때, 저장하면 nodemon을 통해 서버가 자동으로 재실행 된다.

만약, 서버를 종료시켰다면 yarn start:dev 명령어로 서버를 다시 띄워 주자.

postman을 열어준 이후,

POST 방식을 선택하고 URL은 http://localhost:3000/tokens/phone을 적어준다.

그리고

Body 부분에는 핸드폰 번호를 아래와 같이 json 형식으로 적어준다.
이후, Send를 누르면 서버로 요청을 보내진다.

그리고 터미널을 확인해보면 핸드폰 번호도 잘 전달되었고, 토큰도 만들어진것을 확인할 수 있다.

profile
Temporary
Temporary Acoount
이전 포스트

Node.js - Express 기초 + Nodemon

다음 포스트

Node.js - API Docs

0개의 댓글