2024년 9월 4일

✏️ Postman

: get 다음 이제 post api를 사용해보자.

// 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('POST')
})

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

• HTTP 메소드 중,

  • POST -> 웹브라우저가(api입장에서는) post 목적으로 데이터를 등록하려 하는 것
    ex) 회원가입 = id, password, name, email, contact를 등록 해달라고 데이터를 보낼 것임

  • 그럼 GET(조회)처럼 url을 이용해서 데이터를 보내면 되는 것이 아닌가?

    NOPE

  • 개인정보들을 url로 보내면 보안상의 문제가 있어서 데이터들을 숨겨서 보내야함

  • 따라서, body에 숨겨서 보낼 예정

  • 웹브라우저(정확히 api는)는 post로 요청하면 body에 정보들을 숨겨서 보낼 것이라고 알고 있음 -> 데이터가 body에 숨겨져 와야 POST인 줄 앎

  • 뿐만 아니라, 웹브라우저에서 테스트를 하고 싶을 때는 url로 받을 수 있는 get방식만 쓸 수 있음

❓ 그럼 테스트를 어떻게 할까?
: POSTMAN 으로!!

*웹사이트 말고 다운로드 해서 사용하는것을 권장한다고 하심(쓸 수 있는 기능 더 많음)

난 mac intelchip으로 다운 궈궈,,

다운 완료 되면 workspace로 이동

✏️ POSTMAN get, post 테스트

• get 연습

  • localhost:1234

    

  • youtuber-demo.js의 정보 -> localhost:1234/youtuber/1

    

• post 연습

  • app.js post -> localhost:1234/test

    

✏️ POST req, res 구현 및 테스트

: POST는 body에 데이터를 전달해야 함(params처럼)

• test 라는 url이 날아왔을때(post가 날아오면서), body에 숨겨져 들어온 데이터를 화면에 뿌릴 것

// 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) => {
	// body에 숨겨져 들어온 데이터 화면에 뿌리기
	console.log(req.body); // undefined
})

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

• body에 아무것도 요청하지 않았기 때문에 undefined 나옴

• POSTMAN의 request의 body에 raw 체크 후, 무언가를 입력해보면

• 그래도 여전히 undefined 나옴

❓ why???
: json 미들웨어 사용해야함 -> request로 날아오는 body값을 json으로 읽어야함 -> app.use(express.json())

// app.js

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

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

app.use(express.json());
app.post('/test', (req, res) => {
	
	console.log(req.body); 
})

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

• POSTMAN의 request도 json형태로 보내야함 -> 프론트, 백엔드 모두 json으로 주고 받아야 편리
  cf) key, value 문자열은 따옴표 잘 쓰기

• message만 빼내기

... 생략 ...

app.use(express.json());
app.post('/test', (req, res) => {
	// body에 숨겨져 들어온 데이터 화면에 뿌리기
	console.log(req.body.mesesage); // post post post!!!
	res.json(req.body);
})

• 이제 body 안에 id, pwd 넣을 수 있음!!!

✏️ 유튜버 등록

: 유튜버 정보들 가지고 post 해보기

• 새로운 유튜버 등록
  - API 설계(URL, method)

  1. 유튜버 조회 ⇒ /youtuber/:id : id로 map에서 객체를 찾아서, 그 객체의 정보 뿌려줌

     • req : params.id ← map에 저장된 key값 전달
     • res : map에서 id로 객체를 조회해서 전달

  2. 유튜버 등록 ⇒ POST /youtuber

     • req : body ← channelTitle, subscribers = 0, video = 0 신규 유튜버 정보 전달
     • res : “channelTitle님, 유튜브 가입을 환영합니다”

... 생략 ...
// post
app.use(express.json());
app.post("/youtuber", function (req, res) {
  console.log(req.body);
  res.json(req.body);
  
  db.set(4, req.body)
});

const db = new Map();

let youtuber1 = {
  channelTitle: "떼껄룩",
  subscribers: "186만명",
  videoNumbers: "371개",
};

let youtuber2 = {
  channelTitle: "딩고뮤직",
  subscribers: "507만명",
  videoNumbers: "2.5천개",
};

let youtuber3 = {
  channelTitle: "원지의하루",
  subscribers: "95.9만명",
  videoNumbers: "308개",
};

db.set(1, youtuber1);
db.set(2, youtuber2);
db.set(3, youtuber3);

• POSTMAN으로 넣기
  

• localhost:1234/youtuber/4 -> 확인
  

• 등록되었으면, 메시지 출력해보기
  - channelTitle 꺼내서 넣기
  1. body에서 꺼내기
  2. db에서 확인하면서 꺼내기

   	// post
       app.use(express.json());
       app.post("/youtuber", function (req, res) {
         console.log(req.body);
         db.set(4, req.body);
  
         res.json({
             message : `${db.get(4).channelTitle}님, 유튜브 가입을 환영합니다`
         });
       });

• POSTMAN 다시 확인

  

  ✏️ 등록 고도화

  : 새로운 유튜버를 등록하면 덮어써짐

• map을 사용하기 때문

• db.set(숫자, req.body)에서 숫자를 변수로 두어야고, id값도 커져야하는 점이 고도화해야할 사항

  • id값을 넣고 ++되기 때문에 -> db.get(id-1)

const express = require("express");
const app = express();

app.listen(1234);

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);
  }
});

// post
app.use(express.json());
app.post("/youtuber", function (req, res) {
  console.log(req.body);
	
	// db에 저장
  db.set(id++, req.body);

  res.json({
    message: `${db.get(id-1).channelTitle}님, 유튜브 가입을 환영합니다`
  });
});

const db = new Map();
let id = 1;
let youtuber1 = {
  channelTitle: "떼껄룩",
  subscribers: "186만명",
  videoNumbers: "371개",
};

let youtuber2 = {
  channelTitle: "딩고뮤직",
  subscribers: "507만명",
  videoNumbers: "2.5천개",
};

let youtuber3 = {
  channelTitle: "원지의하루",
  subscribers: "95.9만명",
  videoNumbers: "308개",
};
db.set(id++, youtuber1);
db.set(id++, youtuber2);
db.set(id++, youtuber3);

✏️ 전체 조회

: 전체 유투버 조회 -> GET /youtubers

• req: X (request할 일 없겠지)
• res: map 전체 조회

app.get('/youtubers', function(req, res) {
	res.json(db)
})

• POSTMAN 에서 GET+localhost:1234.youtubers → could not send request 화면 → Invalid character in header content [”Host”] -> 다른 곳에서 복붙하면 에러 발생이 이렇게 종종 생김

*tip: 에러가 발생했을 때, stackoverflow 사이트 참조할 것