이전 까지는 Get을 사용하여 데이터를 불러오는걸 했다면, 이번에는 postman과 post를 사용하여 데이터를 보내고 받는 방법을 사용할 것이다.
Get과 POST
HTTP 메소드는 POST, GET0, PETCH/PUT, DELETE등등 이 있다.
그중 Get과 Post는 다음과 같은 차이있는데
- GET: 주로 데이터를 조회할때 사용한다. 특히 URL통해 데이터를 서버에 보내는 것 같아 보이지만 결국 URL에 id같은 것을 넣어 특정 데이터를 조회하기 위한 것이다.
- POST: 데이터를 생성할때 사용며, 특정 정보를 db같은 곳에 저장할 때 쓰인다.
특히 회원가입과 같은, 개인정보를 생성할때 body에 넣어서 보낸다.
그해서 GET과 POST의 가장 큰 차이는 URL로 정보를 주고받냐, body에 데이터를 숨겨서 주고받느냐의 차이라고 할 수 있다.
참고: POST 요청 시, 반드시 body에 데이터를 포함해야 한다. 만약 body 없이 요청한다면 서버에서는 해당 데이터를 처리할 수 없으므로 예상치 못한 동작(ex. Cannot GET /test)이 발생할 수 있다.
postman
대표적인 api 테스트중 하나인 포스트맨은 주소로 특정 method에 대한 피드백을 바로 볼 수 있다.
다운받아서 사용해도 되고, 아니면 vscode에서 확장팩으로 사용할 수 있다.
- 제일 먼저 주소입력칸 옆에 어떤 형식으로 url에 요청할 건지 선택할 수 있다.
여기서 테스트하고자 하는 http method를 선택하면 된다. - 이후 바로 옆쪽에 URL을 입력하고 옆에 send버튼을 클릭하면, response를 확인할 수 있다.
post, req, res 구현 & 테스트
body에 데이터 넣기
이제 코드로 작성해서 body에 데이터를 넣어줄려고 한다.
그러기 전에 먼저 코드를 작성할 곳에 app.use(express.json())을 사용해 express에서 받아오는 데이터를 json으로 읽어 줄 수 있게 미들웨어를 설정해야한다.
// 모듈 세팅
const express = require('express');
const app = express();
// 서버 셋팅 : 포트 넘버(번호) 1234로 셋팅
app.listen(1234)
// body에 있는 데이터를 JSON 형식으로 파싱하기 위해 미들웨어 추가
app.use(express.json());
app.post('/test', (req, res) => {
console.log(req.body); // POST로 넘어온 전체 body를 확인
// body 안의 특정 데이터 확인: 예를 들어 message 프로퍼티
console.log(req.body.message);
res.json({
message: `Received: ${req.body.message}`
});
});
🔥실행이 안되었어요!
raw에 다음과 같이 body를 채워주었었는데 실행이 안되어서 놀랬다.
해결방법은 raw를 선택하는 해당 라인 제일 오른쪽에 보면 어떤 형식으로 보낼지를 선택할 수 있는데, 이걸 JSON으로 바꾸지 않아서 실행은 되는데 JSON으로 보내지지않아, undefind가 출력되었다.
해당 오류? 로 인해서 body에 넣을 수 있는 형식이 여러가지가 있다는 것을 알 수 있었다.
- txt
- javascript
- json
- html
- xml: 데이터를 저장하고 전송하기 위한 마크업 언어입니다. HTML과 유사한 구조를 가지고 있지만, 데이터를 표현하는 데 사용되며, 문서의 구조와 의미를 설명합니다.
유튜버 등록
유튜브 데모 업그레이드
기본 유튜버 3명만 정보를 한명씩만 반환할 수 있었는데, 전체 조회와 추가 생성 할 수 있도록 만들어보자
- 중요 목표: POST 활용해서 유튜버 추가하기
0) 개별 유튜버 조회 GET /youtubers
- req: x
- 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님, 유튜버 생활을 응원합니다!"
내가 만든 코드
// 모듈 세팅
const express = require('express');
const app = express();
// 서버 셋팅 : 포트 넘버(번호) 1234로 셋팅
app.listen(1234)
app.get('/', function (req, res){
res.send('Hello World!');
});
// 유튜버 전체 조회
app.get("/youtubers", (req,res)=>{
const allYoutubers = Array.from(db.values()); // or [...db.values()]
res.json(allYoutubers);
})
// 개별 유퉙 조회
app.get('/youtubers/:id',(req,res)=>{
let {id} = req.params;
id = parseInt(id);
const youtuber = db.get(id);
if(youtuber!==undefined){
res.json(db.get(id));
} else {
res.json({
message: "유투버 정보를 찾을 수 없습니다."
})
}
});
// 유튜버 등록
app.use(express.json());
app.post('/youtubers', (req, res) => {
console.log(req.body);
let newYoutubers ={
channelTitle: req.body.channelTitle,
sub: 0,
videoNum: 0,
}
const id = idx++;
db.set(id,newYoutubers)
res.send({
"message": `${db.get(id).channelTitle}님, 유튜버 생활을 응원합니다.`
})
})
// 데이터 세팅
let db = new Map();
let youtuber1 = {
channelTitle: "십오야",
sub: "594만명",
videoNum: "993개"
}
let youtuber2 = {
channelTitle: "침착맨",
sub: "272만명",
videoNum: "6.6천개"
}
let youtuber3 = {
channelTitle: "테오",
sub: "54.8만명",
videoNum: "726개"
}
let idx = 1;
db.set(idx++, youtuber1) // 키로 밸류를 찾을 수 있는 한 쌍을 저장
db.set(idx++, youtuber2)
db.set(idx++, youtuber3)-
유튜버 등록
- 자동적으로 생성되게 하기위해서,idx를 이용함
- 함수안에서는 전역객체에서 불러오기 위해 var를 사용함
-
전체 조회
res.json(db)로 하면 전체를 불러올 수 없어서 Array.from을 이용하여 리스트에 db.values()로 db의 값들을 불러옴, 이는 rest prameter문법으로도 가능함
