Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ddodoi 님의 블로그

4주차-파트 03: Postman 실습 본문

웹풀스택 일일정리

4주차-파트 03: Postman 실습

ddodoi 2024. 9. 5. 23:21

CHAPTER 1. Postman

예전에 공부했었던 HTTP method를 다시 살펴보자.

지금까지는 실습 때는 GET만 사용했었다. GET은 URL에 담긴 데이터 값만 받는다. POST의 예시로는 회원가입 등을 들 수 있는데 회원가입시의 정보(id, password, name, email, contact)는 보안상 URL로 보낼 수 없는 정보이다. 실제로 POST는 데이터가 HTTP의 body에 숨겨져와야 POST인줄 안다. 웹브라우져에서 테스트 할때는 url로 받을 수 있는 GET방식만 취급하고 있고 POST사용 시 error가 뜨고 테스트를 할 수 없다. 

POST를 테스트하기 위해 POSTMAN을 사용해보자

 

POSTMAN => POST를 위한 테스트 도구

 

postman다운로드 사이트: https://www.postman.com/downloads/

 

Download Postman | Get Started for Free

Try Postman for free! Join 30 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.

www.postman.com

 


postman을 이용해 실습을 해보자.

Workspaces > My Workspace > 오른쪽 창의 +버튼

이전에 만든 youtuber-demo.js파일을 이용해 get으로 먼저 테스트 해보았다.

 

 

 

 

이제 POST도 되는지 테스트 해보자. app.js에 post를 추가하고 서버를 실행시킨다.

 

 

url를 쳐주고 send하면하단에 결과가 나온다

 

 

 

 

 

 

CHAPTER 2. Post로 req, res 구현

위에서 post로 데이터를 보내려면 body안에 담아서 보내야한다고 하였다. 

다음 코드를 이용하여 body에 숨겨진 데이터를 화면에 나오도록 해보자. body안 데이터를 받을려면 app.use(express.json())을 사용해야한다.

✔️app.use(): http를 제외한 모듈인 괄호 안 미들웨어를 불러올 때 사용하는 함수

✔️req.body: body에 담긴 데이터를 키 밸류 형태로 가진다.

const express = require('express')
const app = express()
const port = 1234

app.use(express.json())   //http를 제외한 모듈인 미들웨어들을 불러올때 사용하는 함수
//여기서는 express의 json이라는 미들웨어 사용. request로 날아오는 body값을 json으로 읽을 수 있다.

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

  res.json(req.body)
})

 

 

코드 서버를 돌린 후 Postman에서 Body>raw>JSON을 사용하여 body에 넣을 값을 JSON으로 넣어줄 수 있다. 프론트엔드와 데이터를 주고받기 때문에 웬만하면 JSON형태로 전달해주는 것이 좋다. 

 

서버를 돌린 후 body에 JSON형태로 message를 넣고 send하면 아래 박스에 body내용이 출력된다.

 

 

 

CHAPTER 3. 유튜버 등록

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

    //등록..? Map(db)에 저장(set) 해야 함
    db.set(4,req.body)

    res.json({
        message: "channelTitle님, 유튜버 생활을 응원합니다!"
    })

})

다음 코드 중 res.json에 사용자가 실제로 등록한 channelTitle을 출력하고 싶다면 어떻게 해야할까?

 

1. req.body에서 channelTitle 꺼내기 

2. db에서 꺼내기

 

 

2번 방법을 선택해보면 다음처럼 고칠 수 있다. 아래 박스는 고도화를 한 코드이다.

    res.json({
        message: db.get(4).channelTitle+ "님, 유튜버 생활을 응원합니다!"
    })
    res.json(({
        message: `${db.get(4).channelTitle}님, 유튜버 생활을 응원합니다!`
    }))

 

 


 

Postman에 url 복붙 후 get시 나타날 수 있는 에러

 

※ Error: invalid character in header content host

 

=> 복붙하면서 보이지 않는 문자가 붙은 것이므로 모두 지우고 수동으로 쳐 준다.