백앤드 기초 5-1 ~ 5-2 (postman)

5 Express와 친해지기

5-1 post는 웹브라우저로 테스트가 안됩니다. postman의 등장

1️⃣ POST 메서드를 표출해보기

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.post('/test', (req, res) => { // 포스트 메서드의 테스트를 위해 데이터 보내기
  res.send('HELLO POST!!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

-> post 메서드가 안되네?

• 왜 안될까?: get은 url로 전달하지만 post는 정보를 숨겨서 전달함(body에 숨겨서 보냄), 때문에 데이터가 바디에 숨겨저 와야 데이터로 인식함
  

• 그러므로 POST를 테스트할 때는 POSTMAN을 사용함

2️⃣ postman의 get, post 간단 테스트

• postman의 초기화면
  

• 새로춘 페이지를 열어보면 메서드를 고르고 URL을 적을 수 있는 칸이 나옴
  

• 테스트 하는 URL을 보내니 GET 메서드 를 아래에서 출력함
  

• 이전에 만들었던 URL을 잘못 집어넣으면 can not get /1을 가져오는 html을 볼 수 있음
  

• 재대로 입력하게 되면 객체의 데이터가 잘 나오고 프리티로 볼 경우 json형태의 데이터들을 ,로 예쁘게 정리되어 보여줌
  
  

• 비록 body값은 없지만, POST 값도 잘 출력되는 것을 확인할 수 있음
  

• TIP1 : postman은 저장을 할 수 있음
  

3️⃣ post req, res 구현 & 테스트

• POST를 body로 받아보자

  • POST는 body라는 영역에다 데이터를 전달 받아야 하는데 body라는 영역은 어떻게 데이터를 전달하고 가져오는 걸까?
  • 먼저 postman에서 body는 상단과 하단에 있는데 상단에 있는 부분은 REQUEST, 하단에 표출하는 부분이 RESPONSE임
    

• body값 표출을 위해 아래와 같이 코드를 작성하고 postman의 request부분에 json 데이터를 작성시켜줌

• 그리고 작동시키면 데이터를 잘 받아오는 것을 볼 수 있음

app.use(express.json()) // 미들웨어 모듈을 사용해야 body값을 온전히 표출할 수 있음
// express안에 있는 미들웨어 모듈인 json으로 사용을 하면 request로 날아오는 body값을 json으로 읽어볼 수 있음

app.post('/test', function (req, res) {
  // body에 숨겨져서 들어온 데이터를 화면에 뿌려주자

  console.log(req.body.passwordpost) // 콘솔로그로 데이터를 잘 받아오는 지 확인

  res.send(req.body.passwordpost) // body에서 데이터를 꺼내서 확인
})

app.use(express.json())

app.post('/test', function (req, res) {
  res.json(req.body) // 받아오는 값을 json으로 바꿔주면
})

• postman의 response에서 json 형태로 나오는 것을 확인할 수 있음

---

5-2 지난 학습을 복습하고 실습해보자

1️⃣ youtuber-demo.js를 업그레이드 해보기
🫠 아쉬웠던 점

• 이전 코드는 저장된 데이터만 반환할 수 있었고, 새로운 유튜버는 등록할 수 없었음
• 1, 2, 3 유튜버에 대해서만 api가 존재했던 것
  

😎 POST를 활용해서 유튜버를 추가해보자

• API 설계(URL, method)

  1. 개별 유튜버 조회 GET/youtuber/:id 👉 id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌
     • req : params.id 👉 map에 저장된 key값을 전달
     • res : map에서 id로 객체를 조회해서 전달
  2. 유튜버 "등록" 👉 POST/youtuber
     • req : body 👉 channelTitle, sub = 0, videoNum = 0 , 신규 유튜버 정보를 전달
     • res : "channelTitle님, 유튜브 가입을 축하합니다"

• 이전에 URL+메서드 실습에 사용한 내용을 참고
  
  

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

  res.json(req.body)

})

3. 데이터를 잘 주고 받는 것을 확인 했으니 이제 "등록"을 하면 됨: Map(db)에 저장(SET)

- db에 저장까지 잘 되는 모습을 확인할 수 있음

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

  db.set(4, req.body) // req.body를 넣으면 바로 저장이 됨

  res.json({
    message : `${db.get(4).channelTitle}님, 유튜브 가입을 축하합니다` // 아래 방법대로 쓰는 것 보단 백틱을 사용하여 문자열을 표현해주는 것이 더 깔끔함
    // message : db.get(4).channelTitle + "님, 유튜브 가입을 축하합니다"
  })
})

2️⃣ 등록을 고도화 해보자

• db.set으로 등록을 할 때 자동으로 id를 추가하는 방법으로 가는 것이 좋음

// express 모듈 세팅
const express = require('express')
const app = express()
app.listen(2223)


// 데이터 세팅
let youtuber1 = {
  title : "조코딩",
  sub : "609k",
  videonum : "111개"
}

let youtuber2 = {
  title : "침착맨",
  sub : "2270k",
  videonum : "6600개"
}

let youtuber3 = {
  title : "아무개",
  sub : "300k",
  videonum : "50개"
}

let db = new Map()
var id = 1 // 중괄호 밖에다 let을 선언하면 "블록스코프"에 걸릴 수 있으므로 var로 바꿔줌

db.set(id++, youtuber1) // 하나씩 더해주는 값으로 등록을 하게 됨
db.set(id++, youtuber2)
db.set(id++, youtuber3)


// REST api 설계
app.get('/youtuber/:id', function (req, res){
  let {id} = req.params
  id = parseInt(id) // id를 그냥 쓰면 숫자가 아닌 문자열로 받기 때문에 정수로 바꿔줌

  
  const youtuber = db.get(id) // youtuber 로 db.get을 정리하여 중복을 없앰(가독성 증가)
  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(id++, req.body) 
  // id를 1이라 선언하고 등록할 때마다 하나씩 더하게 만들면 중복되지 않고 저장이 됨

  res.json({message : `${db.get(id-1).channelTitle}님, 유튜브 가입을 축하합니다`})
  // id를 그대로 불러오면 위에서 id++로 더한 값을 res하기 때문에 1을 빼줘야 정상적으로 불러옴
})

3️⃣ 전체 조회 적용해보기

• API 설계(URL, method)에서 전체 유튜버 조회를 추가
  
  
  0. 전체 유튜버 "조회" GET/youtubers 👉 URL 설계시에는 가능한 복수형이 좋음
     • req : 필요 없음
     • res : map을 전체조회
  1. 개별 유튜버 "조회" GET/youtubers/:id 👉 id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌
     • req : params.id 👉 map에 저장된 key값을 전달
     • res : map에서 id로 객체를 조회해서 전달
  2. 유튜버 "등록" 👉 POST/youtubers
     • req : body 👉 channelTitle, sub = 0, videoNum = 0 , 신규 유튜버 정보를 전달
     • res : "channelTitle님, 유튜브 가입을 축하합니다"

• 이전에 URL+메서드 실습에 사용한 내용을 참고
  
• 전체조회를 위해 app.get 추가

app.get("/youtubers", (req, res) => {
    res.json({mes : "test"}) // 데이터가 잘 작동되는 것을 확인할 수 있었음
})