[프로그래머스] 백엔드기초(6)

Lina Hongbi Ko·2024년 9월 4일
프로그래머스
0

Programmers_BootCamp

목록 보기
15/76
post-thumbnail

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 사이트 참조할 것

profile
Lina Hongbi Ko
프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자
이전 포스트

[프로그래머스] 백엔드기초(5)

다음 포스트

[프로그래머스] 백엔드기초(7)

0개의 댓글