[TIL] 9/4 GET, POST, API, postman

1. POST

 

POST

-> 생성(=등록)할 때 사용하는 method

 

ex) 회원가입 = 나 등록해줘 => id, password, name, email, contact

 

그렇다면, GET 메소드의 URL 로도 정보를 보낼 수 있지 않나? X

-> post 로 보내는 정보들은 등록을 위한 정보들이 많다. 근데 등록을 위한 정보들은 개인정보들이 많기 때문에 공개적인 URL 로 보낼 수 없다. HTTP 바디에 숨겨서 보내야 한다. api 가 POST 로 요청한다는 것은 바디에 데이터가 숨겨져서 들어온다는 것이고 웹 브라우저는 이것을 이미 알고 있다. 

 

그렇다면 웹 브라우저 POST 테스트는 어떻게 해야할까? 안타깝지만 웹 브라우저로 POST 테스트는 할 수 없다. 그래서 테스트를 하기 위해서는 postman 이라는 것을 사용한다. 

 

 

2. postman 사용하기

 

2.1. GET

 

GET 요청을 보내고 api 에서 데이터를 정상적으로 받아오면 상태코드 200 이 찍히고 받아온 데이터가 뜬다. 

 

만약 api 에 요청을 했을 때 맞는 정보가 없고, 정보가 없는 경우에 대해 별다른 예외 처리를 해주지 않았다면 404 Not Found 라는 상태코드와 함께 화면의 HTML 값이 들어온다. (예외 처리를 했다면 예외 처리해둔 값이 들어옴)

 

2.2. POST

 

'/test' 경로로 POST 요청을 보냈을 때, body 에 들어있는 값을 요청에 대한 응답으로 보내는 간단한 api 를 구현하고 postman 으로 확인해보았다. 바디에 json 객체를 담아서 보내면, 응답으로 담아서 보낸 json 객체를 주는 것을 확인할 수 있다. 

app.use(express.json()) 은 미들웨어로 설정되 코드로, 요청의 본문이 JSON 형식인 경우 자동으로 파싱해 req.body에 자바스크립트 객체로 반환해준다.

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) => {

    res.json(req.body);
})

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

 

 

2.3. 실습

 

<API 설계 (URL, method)>

 

1) 전체 유튜버 "조회" GET /youtubers

- req: X

- res: map 을 전체 조회해서 돌려주면 됨

 

2) 개별 유튜버 "조회" GET /youtuber/:id 

- id 로 map 에 저장된 객체를 찾아서, 그 객체의 정보를 뿌려줌

- req: params.id, map 에 저장된 key 값을 전달

- res: map 에서 id 로 객체를 조회해서 전달

 

3) 신규 유튜버 "등록" POST /youtuber

- { channelTitle: ___ , sub: 0, videoNum: 0 } 

- req: channeTitle 만 주고 API 내부적으로 sub, videoNum 을 만들게 해도 괜찮고,

          아니면 channerTitle, sub, videoNum 을 모두 줘도 괜찮음 (나는 후자의 방법으로 구현)

- res: "channelTitle 님, 유튜버 생활을 응원합니다!" 메세지를 돌려줌

 

 

실습 코드의 일부분이다.

id 값은 db 에서 값을 찾기 위한 키 값이다. 처음에 변수를 사용해서 id 값을 1로 초기화하고  후위 연산자를 사용해서 값을 증가시켜주었다. 후위 연산자를 사용했기 때문에 현재 id 값은 db 의 키 값으로 들어가고, 그 후에 값이 증가되도록 만들었다. 

// ...

let db = new Map();
let id = 1; // 변수에 id 설정

db.set(id++, youtuber1);
db.set(id++, youtuber2);
db.set(id++, youtuber3);

// ...

app.use(express.json()); // http 외 모듈인 미들웨어 json 설정
app.post('/youtuber', (req, res) => {
    const data = req.body;
    db.set(id++, data);
    res.json({
        message: `${data.channelTitle} 님, 유튜브 생활을 응원합니다!`
    });
})

 

전체 코드

// express 모듈 셋팅
const express = require('express');
const app = express(); 
app.listen(1234);

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

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

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

let db = new Map();
let id = 1;

db.set(id++, youtuber1);
db.set(id++, youtuber2);
db.set(id++, youtuber3);

app.get('/youtuber/:id', (req, res) => {
    let {id} = req.params;
    id = parseInt(id);
    let youtuber = db.get(id);

    if (youtuber) {
        youtuber.id = id;
        res.json(youtuber);
    } else {
        res.json({
            message: "모르는 유튜버"
        });
    }
})

app.use(express.json()); // http 외 모듈인 미들웨어 json 설정
app.post('/youtuber', (req, res) => {
    const data = req.body;
    db.set(id++, data);
    res.json({
        message: `${data.channelTitle} 님, 유튜브 생활을 응원합니다!`
    });
})

 

 

이제 postman 을 사용해서 아직 '/youtuber' 에 POST 요청을 하고,

브라우저에서 'youtuber/4' 경로로 들어가보면 처음에는 없던 id 값이 4인 새로운 데이터가 들어와 있는 것을 확인할 수 있다.