Thunder client 사용해보기 [get , post , put, delete]

미들웨어의 bodyParser이용하였다.

 

get : get은 서버의 내용을 조회, 검색하는데에 많이 사용된다. 

문제가 있다면 url 상에 그 정보가 노출된다는것. (이건 나중에 다루겠다.)

const express = require('express');
const bodyParser = require('body-parser')

const app = express();
app.listen(52273, () => {
  console.log('http://127.0.0.1:52273')
})

app.use(bodyParser.urlencoded({extended: false}));

let userCounter = 0;
const users = [];

app.get('/user', (req, res) => {
  res.send(users)
})

app.get('/user/:id', (req, res) => {
  const id = req.params.id;
  const filtered = users.filter((user) => user.id == id)

  if(filtered.length == 1)
    res.send(filtered[0])
  else
    res.status(404).send('데이터 x')
})

 

Thunder client 사용순서

1. 서버를 실행한다.

2. 설치해놓은 Thunder client 라이브러리를 켜서 New Request 클릭!

3. option select 창에서 get, post, put, delete 등을 선택.

4. 명령하길 원하는 주소를 입력. (여기에 값을 전송하고 실행값을 받아오는 일련의 역할.)

 

---

1.get

 

 

아직은 데이터 조회를 해보아도 받을 데이터가 없다.

 

이렇게 id를 통해 따로 조회해보면 else인 데이터 x 가 뜬다.

---

2.post

post는 값을 등록하다는 의미인데 주로 서버에 새로운 데이터를 전송하거나 리소스를 생성할 때 사용

 

-body(클라이언트가 서버에 정보를 요청시(request) 데이터를 전송하는 방법 3가지중 1가지 )

 

req.body가 객체로 사용 가능하려면 먼저 body-parser와 같은 미들웨어를 사용하여 요청 본문을 파싱해야 한다. 

앞서 제시한 코드에서 bodyParser.urlencoded({extended: false}) 설정을 통해 URL-encoded 형태의 요청 본문을 파싱하고 req.body로 할당할 수 있게 설정하였다.

 

post 코드

app.post('/user', (req, res) => {
  const body = req.body;
  //  Express.js 애플리케이션에서 HTTP 요청 본문의 내용을 포함하는 객체임
  
  if(!body.name)
    return res.status(400).send('name을 보내주세요')
  else if(!body.region)
    return res.status(400).send('region을 보내주세요')

    const name = body.name;
    const region = body.region;

    const data = {
      id:userCounter++,
      name: name,
      region: region
    };
    users.push(data);
    res.send(data);
})

 

 

우리는 bodyParsar를 통해 전송할 계획이니 body를 쓴다.

그리고 그 아래의 Form-encode를 통해 requset를 한다.

이유는 아래와 같다.

 

application/x-www-form-urlencoded (form-encode):
이 형식은 웹 폼을 통해 전송된 데이터의 기본 인코딩 방식입니다.
데이터는 key-value 쌍으로 전송되며, 이러한 쌍은 & 문자로 구분됩니다. 키와 값은 = 문자로 연결됩니다.
예: key1=value1&key2=value2
문자, 숫자 및 기타 간단한 데이터 유형을 전송하는 데 적합합니다.

 

---

이름도 없이 아무것도 보내지 않으니 조건문대로 렌더링된 모습이다.

---

입력완료

---

전송결과 : 내가 방금 명령한 그 데이터만 response 되어 나에게 보여진 상태.

 

---

데이터 전체조회 / 일부조회

 

HTTP는 기본적으로 무상태 프로토콜이므로 요청 사이의 상태 정보를 자동으로 유지하지 않는다.

HTTP가 무상태 프로토콜이라는 것은 각각의 요청-응답 쌍이 독립적이라는 것을 의미합니다. 

즉, 한 요청-응답 쌍과 다음 요청-응답 쌍 사이에 상태가 자동으로 전달되지 않습니다.

 

 

짧게 정리 해보면

이 get. post 과정이 post로 저장할 때마다 그 저장한 값을 서버가 돌아갈 때 임시로 지정한 메모리에 저장.

get으로 그 메모리에서 데이터들을 req, res 해오면 db없이도 users 배열에 잘 저장된다고 요약할 수 있겠다.

 

서버가 임시로 돌아가는 순간 값들은 db없이도 무사히 임시 메모리에 저장된다.

하지만 서버를 계속 켜둘수 없다. 서버를 끄면 그 값들도 날라간다.

 

서버 끄고 다시 켜서 get을 실행해보니 데이터가 다 날라가있다.

---

3. put

주로 웹 서비스에서 리소스의 수정 및 생성에 사용 

즉, 덮어쓰기라 생각하면 쉽다.

app.put('/user/:id', (req,res)=> {
  const id = req.params.id
  const user = users.find((user) => user.id == id)
  if(user) {
    if(req.body.name)
      users[id].name = req.body.name;
    if(req.body.region)
      users[id].region = req.body.region;

    res.send(user)
  }else{
    res.status(404).send('응 데이터없어')
  }
})

 

이전 get 데이터에서 id :0 의 region을 seoul로 수정하였다.

수정전

수정후

---

4.delete

원하는 데이터를 지정 삭제해줌

0인덱스의 데이터가 삭제된 모습

app.delete('/user/:id', (req,res) => {
  const id = req.params.id;
  const index = users.findIndex((user) => user.id == id)
  if( index != -1){
    users.splice(index, 1);
    res.send('제거했습니다.')
  }else {
    res.status(404).send('데이터가 존재 안해.');
  }
})