웹 풀사이클 데브코스 TIL 17일차

POST

브라우저에서는 POST 테스트가 불가능하다.
따라서 POST를 테스트 하기 위해서는 Postman 이라는 프로그램을 사용한다.

https://www.postman.com/

POST는 body 영역을 통해 데이터를 전달해야한다.

Postman으로 body에 데이터를 싣는 방법은 다음과 같다.
Body의 raw를 클릭하고 형식을 json으로 설정한다. 그리고 원하는 데이터를 json 형식으로 입력해준다.

백엔드 post의 예시코드이다.

app.use(express.json)

app.post('/test', function(req, res){
  // body에 숨겨져서 들어온 데이터를 화면에 뿌려주기
  console.log(req.body);
  console.log(req.body.message)
  res.send(req.body.message)
})

json 미들웨어를 사용하면 req로 날아오는 body 값을 json으로 읽어볼 수 있다.

youtuber-demo 업그레이드

이번에는 youtuber-demo 에 유튜버를 등록하는 기능을 추가해보자.

app.use(express.json()) //http 외 모듈인 미들웨어: json 설정
app.post('/youtuber', (req, res) => {
    console.log(req.body)

    //db 에 저장해야함
    db.set(4, req.body)
    res.json({
        message : `${db.get(4).channelTitle} 님, 유튜버 생활을 응원합니다!`
    })
})

post 요청을 받으면 이를 데이터베이스에 저장하고, 템플릿 문자열을 사용해 메시지를 응답해주는 코드이다.

Postman에서 요청은 이런식으로 보내보기로 한다.

youtuber-demo 고도화

id 값이 하드코딩되어있는데 이것을 변수로 교체해 보도록 하겠다.

let db = new Map();
let id = 1;

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

우선 초기값 저장을 바꿔주어야 한다. id라는 변수를 선언하고 그 변수를 키값으로 db에 저장한 후 id 값을 하나씩 증가시켜준다.

app.post('/youtuber', (req, res) => {
    console.log(req.body)
    console.log(id)
    //db 에 저장해야함
    db.set(id++, req.body)
    res.json({
        message : `${db.get(id-1).channelTitle} 님, 유튜버 생활을 응원합니다!`
    })
})

마찬가지로 post 부분도 변수로 교체해 주었다. 이때 강사님이 let id 는 블록 스코프라서 var로 변경해서 사용해야 한다고 하셨는데 let id 는 상위 블록에 선언된 변수기 때문에 안쪽 블록에서도 사용이 가능하고 우리가 의도한 대로 코드가 동작하는 것을 알 수 있다. 아마 강의 내용의 오류인것 같다.

후기

HTTP의 새로운 메소드인 POST에 대해서 알아보았다. POST는 웹브라우저에서 테스트가 안되고 postman 이라는 프로그램을 사용해야한다. 데이터를 등록하는 경우에 많이 사용되는 메소드이므로 앞으로도 자주 활용할 것이다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프