[데브코스] 24일차 TIL

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

// app.js
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}`)
})

• API(웹브라우저 입장)에서 POST(생성=등록) ex) 회원가입 id, pw, name, email, contact,… 데이터를 주기로 했는데 POST는 URL 로 안되지 왜냐면 주소창에 pw 등 개인정보를 볼 수 있으니깐,,…숨겨서 보내야지 Body에 숨겨서 와야지, 그러면 테스트를 어떻게 할 수 있을까?
• GET(조회) ex) URL로 데이터로 보냈는 데….
• postman 프로그램을 다운 받아서 실행

postman get test, post 간단 테스트

• Body라는 탭에 Hello World가 나오는 걸 볼 수 있음.

POST 테스트 해보기

• 웹 브라우저에서는 안됐는 데 postman에서는 테스트 가능

post req, res 구현 & 테스트

<aside> 💡 body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?

</aside>

❓ body에 어떻게 숨겨져 오지

// app.js
const express = require('express')
const app = express()
const port = 1234

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

**app.use(express.json())** //미들웨어 라고 다른 모듈들을 사용함. use 
app.post('/test', (req, res)=>{
    // body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?
    console.log(req.body)
})

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

• app.use(express.json()) 을 사용해준다.

백엔드에서 프론트엔드로 던져주는 res.json은 message라는 걸 key값을 문자열로 바꾸지 않았었는 데 자동으로 웹브라우저에서 바꿔줬다.

따라서 postman에서는 문자열로 바꿔준다.

postman

1. URL : localhost:1234/test
2. Body → raq → JSON
3. { ”message” : “Bye POST!!!” }

app.js

app.use(express.json()) //미들웨어 라고 다른 모듈들을 사용함. use 
app.post('/test', (req, res)=>{
    // body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?
    console.log(req.body.message) // message의 value 값만 볼 때
	  res.send(req.body.message) // postman에서도 확인
})

// 출력
Example app listening on port 1234
{ message: 'Bye Post!!!' }

유튜버 등록

고도화

1. 현재까지는 기존 유튜버 3명만 정보를 반호나할 수 있었고, 새로운 유튜버를 등록할 수가 없었음.
2. 1,2,3 유튜버에 대한 api만 존재

🔥따라서 post를 활용해서 !

<aside> 💡 <API 설계 (URL, method)>

1. **전체 유튜버 “조회” GET /youtubers

• req : X
• res : map을 전체 조회**

1. 개별 유튜버 “조회”GET /youtubers/:id :id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌 req : params.id ← map에 저장된 key 값을 전달 res : req에서 받은 전달 값 기준으로 map 에서 id로 객체를 조회해서 전달.
2. 유튜버 등록 → POST /youtubers req : body에 channelTitle, sub = 0, videoNum = 0 (channelTitle만 있고, 처음엔 구독자,비디오수 = 0, 신규유튜버 정보를 전달) db에 저장까지 해줌 !! res : “channelTitle 님, 유튜버 생활을 응원합니다!” </aside>

//youtuber-demo.js
// express 모듈 셋팅
const express = require('express')
const app = express() 
app.listen(1234)

// 데이터 셋팅
let youtuber1 = {
    channelTitle : "십오야",
    sub : "593만명",
    videoNum : "993개"
}

let youtuber2 = {
    channelTitle : "침착맨",
    sub : "227만명",
    videoNum : "6.6천개"
}

let youtuber3 = {
    channelTitle : "테오",
    sub : "54.8만명",
    videoNum : "7260개"
}

let db = new Map()
db.set(1, youtuber1) 
db.set(2,youtuber2)
db.set(3, youtuber3)

// REST API 설계
app.get('/youtuber/:id', function (req, res) {
    let {id} = req.params
    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)
    // 등록이란 Map(db)에 저장(set)해줘야된다.
    db.set(4, req.body) // 지금은 저장이 같은 번호로 됨.

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

등록 고도화

• 현재는 새로운 유튜버를 등록하면 덮어쓰기가 됨. map 을 사용하기 때문에

// youtuber-demo.js
{생략}
let db = new Map()
let id = 1

db.set(id++, youtuber1) 
db.set(id++,youtuber2)
db.set(id++, youtuber3)
{생략}
app.use(express.json()) // http의 모듈인 미들웨어 : json 설정
app.post('/youtuber', (req, res)=>{
    
    console.log(req.body)
    // 등록이란 Map(db)에 저장(set)해줘야된다.
    db.set(id++, req.body) //id++해줌으로 3저장 3++ 4저장 4++,..

    res.json({
        message : `${db.get(id-1).channelTitle}님, 유튜버 생활을 응원합니다.`
    }) 
})

전체 조회 : 오류남! 해결해야함

//youtuber-demo.js
app.get('/youtubers', (req, res)=>{
    res.json(db)
})