-
[데브코스] 24일차 TILTIL/교육 내용 정리 2024. 5. 4. 22:29
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
- URL : localhost:1234/test
- Body → raq → JSON
- { ”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!!!' }
유튜버 등록
고도화
- 현재까지는 기존 유튜버 3명만 정보를 반호나할 수 있었고, 새로운 유튜버를 등록할 수가 없었음.
- 1,2,3 유튜버에 대한 api만 존재
🔥따라서 post를 활용해서 !
<aside> 💡 <API 설계 (URL, method)>
- **전체 유튜버 “조회” GET /youtubers
- req : X
- res : map을 전체 조회**
- 개별 유튜버 “조회”GET /youtubers/:id :id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌 req : params.id ← map에 저장된 key 값을 전달 res : req에서 받은 전달 값 기준으로 map 에서 id로 객체를 조회해서 전달.
- 유튜버 등록 → 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) })
'TIL > 교육 내용 정리' 카테고리의 다른 글
[데브코스] 26일차 TIL (0) 2024.05.04 [데브코스] 25일차 TIL (0) 2024.05.04 [데브코스] 23일차 TIL (0) 2024.04.30 [데브코스] 22일차 TIL (1) 2024.04.29 [데브코스] (20일차자체휴식)21일차 TIL (0) 2024.04.28