백엔드 기초: postman과 post

date/ 24.09.04.

 /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/

 

 

 

📌

method 중 POST는 웹 브라우저로 테스트가 안 됩니다. 이런! 저는 회원 가입 기능도 넣고 싶고, 유튜브 페이지를 만든다면 유튜브 채널도 개설할 수 있게 하고 싶은데 어떻게 해야 할까요? 사실 이런 예시에서 사용자가 등록해야 하는 데이터는 오픈된 상태로 보내면 안 됩니다. 당연히 숨겨서 보내야겠죠? 이러한 데이터를 (http 템플릿 중) body에 숨겨서 POST로 전송합니다. 즉, 데이터가 body에 숨겨져 와야만 POST인 줄 아는 것이죠. 그럼 테스트는 대체 어떻게 하나, 싶으니 소개합니다. POST를 위한 테스트 도구, postman입니다.

 

 

구글에 postman을 검색해서 접속하면 본인의 운영 체제에 맞는 프로그램을 다운로드 받을 수 있습니다. 따로 계정을 만들지 않아도 다운로드가 가능하길래 docker처럼 계정 없이도 사용할 수 있을 줄 알았는데 다운로드된 프로그램을 실행하니 계정을 만들지 않으면 넘어가지 않더군요... 참고하십시오

 

 

계정을 만들고 나면 이런 화면이 뜹니다. 기본으로 열리는 창은 다 닫아도 무방합니다. workspace에서 post 실습을 해볼 생각입니다.

 

 

📌

먼저 get에 대한 테스트를 진행해 보겠습니다.

 

기존에 제작해 두었던 코드를 활용해 실습을 진행했습니다. 이전에는 웹 브라우저를 통해 화면에 뿌려졌던 내용이 postman 한 페이지 안에서 가독성 좋게 볼 수 있습니다. 그럼 이제 post가 되는지 확인할 차례입니다.

 

따로 코드를 작성하진 않아서 결과 창이나 에러 화면을 캡처하진 않았지만, 아무튼 POST를 할 수 있긴 합니다.

 

 

📌

그럼 POST의 req, res 구현과 테스트를 진행해보겠습니다.

app.post('/test', (req, res) => {
	console.log(req.body)
    res.send('')
})

 

일단 위 코드를 추가한 상태로 포스트맨에서 실행해 보았습니다.

 

오잉? cannot POST /test라고 합니다. raw 창에서 텍스트를 입력하고 send를 눌러도 콘솔에는 Undefined로 기록됩니다. 

 

 

아무리 body에 값을 보내도 결과는 같습니다. 세팅을 하나 더 해주겠습니다.

 

app.use(express.json()) //req로 날아오는 body값을 json으로 읽어볼 수 있음

app.post('/test'. (req, res) => {
	console.log(req.body)
    res.send('')
})

 

이렇게 코드를 수정하고, 포스트맨에서는 json 형태로 값을 보내주겠습니다. 키값도 문자열로 표기해줘야 합니다.

 

bye post!!!

 

 

그럼 이제 정상적으로 작동합니다. 야호!

 

한 발짝 더 나아가 메세지의 value만 가져오고 싶다면

app.post('/test', (req, res) => {
	console.log(req.body.message)
    res.send(req.body.message)
})

 

이렇게 코드를 수정하면 됩니다. (정렬이 왜 저렇게 되는지 모르겠네요? 코드블럭에서는 분명 반듯했단 말이죠)

 

제대로 작동하고 있습니다. 참고로 send가 아니라 Json으로 보내면 메세지를 꺼내줄 필요 없이 고대~로 나옵니다.

 

 

📌

그럼 다시 유튜버 페이지로 돌아와서, 데모를 업그레이드해보겠습니다. 현재 페이지에서 아쉬운 점은 다음과 같습니다:

• 새로운 유튜버를 등록할 수가 없습니다. 기존 유튜버 세 명에 대한 정보만 반환합니다.
• 즉, 유튜버에 대한 API가 한정적으로 존재했던 것입니다.

이제 POST를 활용해서 유튜버를 추가해 봅시다!

 

 

API 설계를 해보자면,

• GET /youtuber/:id
  • id로 맵에서 객체를 찾아 그 객체의 정보를 뿌려줘야 합니다.
  • req: URL에 있는 params.id로 맵에 저장된 키값을 전달합니다.
  • res: 맵에서 id로 객체를 조회해서 전달합니다.
• POST /youtuber
  • 유튜버를 새로 등록합니다.
  • req: body에 channelTitle, subscriber, videos와 같은 신규 유튜버 정보를 전달합니다.
  • res: "channelTitle님, 유튜브 채널 개설을 축하드려요!"

이렇게 되겠네요. 그럼 이제 실습을 해보겠습니다.

 

일단 POST를 위한 코드를 작성해서 포스트맨에서 실행해 보았습니다.

app.use(express.json())
app.post('/youtuber', (req, res) => {
	console.log(req.body)
    res.json(req.body)
})

 

포스트맨을 통해 유튜버의 정보를 send 해 보았습니다.

 

로그가 잘 찍히면 성공입니다.

 

 

잘 찍히는군요! 아주 굿입니다. 그럼 이제는 유튜버로 등록을 해줘야 합니다. 즉, db(=map)에 저장을 해줘야 나중에도 꺼내 쓸 수 있습니다. 어떻게 저장을 할까요?

 

app.use(express.json())
app.post('/youtuber', (req, res) => {
	console.log(req.body)
    //db에 저장(set)
    db.set(4, req.body)
    
    res.json({
    	message: `${db.get(4).channelTitle}님, 유튜브 채널 개설을 축하드려요!`)
})

야호~! 의도한 대로 작동합니다.

 

 

📌

그럼 또! 새로운 유튜버를 등록하고 싶습니다. 이전에 했던 것과 같이 POST를 통해 send를 해봤습니다. 그랬더니 허거덩~ 4번 자리에 덮어쓰기가 되어버리지 뭔가요? 사실 당연합니다. id값을 4번으로 주면서 계속 POST를 했기 때문입니다. 그럼 id값을 변수로 주면 되겠네요!

 

//express 모듈 셋팅
const express = require('express')
const app = express()

app.listen(1020)

//REST API 설계
app.get('/youtuber/:id', function(req, res) {
    let id = req.params.id
    id = parseInt(id)
    const youtuber = db.get(id)

    if (youtuber === undefined) {
        res.json({
            message : "유튜버 정보를 찾을 수 없습니다."
        })
    } else {
        res.json(youtuber)
    }
})

app.use(express.json()) //http외 모듈인 미들웨어 중 json 설정
app.post('/youtuber', (req, res) => {
    console.log(req.body)
    //db에 저장(set)해줘야 해요
    db.set(id++, req.body) //json 형태로도 들어가나? 객체 말고? yes

    res.json({
        message: `${db.get(id-1).channelTitle}님, 유튜브 채널 개설을 축하드려요!`
    })
})


//데이터 셋팅
let youtuber1 = {
    channelTitle : "heavytalker",
    subscriber : "59.7만명",
    videos : "957개"
}

let youtuber2 = {
    channelTitle : "로미인디요",
    subscriber : "102만명",
    videos : "5992개"
}

let youtuber3 = {
    channelTitle : "romiwaves",
    subscriber : "39만명",
    videos : "8개"
}

let db = new Map()
var id = 1

db.set(id++, youtuber1)
db.set(id++, youtuber2)
db.set(id++, youtuber3)