json-server와 postman으로 REST API 실습

https://redux-advanced.vlpt.us/3/01.html

3-1. json-server 이해하기 · GitBook

벨로퍼트님의 위 포스트와 모던 자바스크립트 딥 다이브 REST API를 보면서 실습한 내용입니다.

🐕 json-server부터 npm install 해줘야함

npm i -g json-server
mkdir fake-server
touch db.json

처음엔 로컬환경에만 설치하려고 했는데

그렇게 하니까 json 명령어가 먹지를 않았다.

어쩔 수 없이 구글링을 통해 글로벌 설치를 하는걸로 해결

npm install을 해준 뒤 db.json을 저장할 폴더를 만들고 db.json을 생성해줬다.

vs code 환경에서 파워쉘로는 touch 같은 리눅스 명령어가 안먹히니까

git bash로 터미널을 바꿔주고 진행했다.

파워쉘 왜케 짜증나는것?

 

db.json

{
    "memo": [
        {
            "id": 1,
            "title": "첫 메모 제목",
            "body": "첫 메모 내용"
        }
    ]
  }

db.json 파일 내부는 이런식으로 json 문법에 맞게 작성을 해줬다.

이 db.json은 리소스를 제공하는 데이터베이스의 역할을 할 것이다.

이제 루트 폴더에서 public폴더를 생성하고

html과 js파일을 때려 박아주겠다. html,js파일의 네이밍은 아무래도 좋다.

잘작성했다면 위와 같은 모습일것이다.

---

👻PostMan 설치

https://www.postman.com/downloads/

Download Postman | Get Started for Free

위 링크에서 다운로드 받을 수 있다.

공짜이고 모든 운영체제를 지원해준다고 하니 허겁지겁 깔도록 하자.

처음 UI가 살짝 난해하게 느껴졌는데(사실 지금도 그럼)

나같은 사람을 위해 보여두자면

sign in까지 잘 마치고 난 뒤 포스트맨 프로그램으로 돌아와보면

이런 모습일 것이다. Workspace를 눌러 이동해주자.

WorkSpace로 들어오면 이러한 화면이 보인다.

너무나도 누르게 생긴 새탭생성 창같은걸 ㄴ루러주고

너무나도 뭔가를 붙여넣고 싶게 생긴 INPUT 창에 내가 원하는 URL을 붙여넣어주면 끝이다.

---

🥶 서버를 실행시켜보자.

서버가 잘 실행되면 저런 웃는 이모티콘과 함께 hi를 해준다.

귀엽다...

port 번호를 지정해줄 수 있는데 보통 로컬호스트는 3000 / 아이피 127.0.0.1이 국룰이지만

우리의 소중한 로컬호스트 3000은 아껴두기 위해 3001 포트에 연결을 해준다.

그리고 얻은 리소스를 저 포스트맨에다가 갖다 붙이는 것이다.

아하 이해완

성공적으로 여기까지 따라왔다면 아래 body 부분에 우리가 db.json에 넣어줬던 내용들이 있을 것이다.

---

😋이제 post 요청을 보내보자

를 하고 싶었는데 거의 한시간동안 여기서 헤매고있었다.

저 아래에 body 부분은 read only 영역이라 수정이 안되는데 저걸 눌러야할 것 같은 느낌이어서

끙끙대다가 아하모먼트가 왔다.

 

저 아래에 body 태그를 수정하려고하면 안되고

위쪽에 Body를 누르고 JSON으로 설정해준다음 작성을 해줘야한다..

우린 테스팅을 할거니까 간단하게 이렇게 적어보자

{
    "title": "테스팅",
    "body": "테스팅"
}

아래에 "id" : 2가 되면서 내 원본 자바스크립트 파일에도

값이 추가되어 있는걸 확인할 수 있다. 어메이징

{
  "memo": [
    {
      "id": 1,
      "title": "첫 메모 제목",
      "body": "첫 메모 내용"
    },
    {
      "title": "테스팅",
      "body": "테스팅",
      "id": 2
    }
  ]
}

legend..

---

🤢정렬해보기 (sort)

소팅을 할 때는 쿼리 파라미터로 _sort 와 _order로 정렬을 할 수 있다.

GET /memo?_sort=id&_order=DESC
GET /memo?_sort=id&_order=ASC

저게 무슨 뜻인지는 챗지피티한테 물어보기바람

대충 내림차순 오름차순 정렬이 되더라

---

🤮삭제 (DELETE)

데이터를 삭제할 때는 일반 REST API 서버의 흐름을 따른다.

주소의 뒷부분에 데이터의 아이디를 넣어서 DELETE 메서드로 요청하면된다.

DELETE /memo/10

이런식으로 사용할 수 있다.

뒷부분에 붙인 id를 기준으로 삭제해준다.

---

🐶마치며

이외에도 PATCH 메서드를 이용해 일부분만 수정을 하거나

operator , limit 등 수많은 메서드와 사용방법이 있지만

그냥 써보면서 이런거구나 익히는게 더 빠를 듯 합니다.

정말 유익하네요

---

이해했다고 생각할 때가 가장 무서울 때다.