다시 만난 Json Server, 내가 너를 어떻게 잊었는데

🥔감자로그🍟·2024년 7월 27일

JSON Server React 프론트엔드

Next.js 프로젝트 캠프

목록 보기

4/10

26일 금요일 NextJs 캠프에서 Json Server을 사용하여 API 통신을 실습해봤다.

Json Server는 초면이 아니다. 올해 2월 PAEI 프론트엔드 개발 중 API가 필요해서 Json Server을 사용한 적이 있는데...프로젝트 종료 이후 완전 잊고 있었다.

반년만에 이름을 들으니 반갑기도 하면서도, 프로젝트 진행 중 고생했던 기억이 떠올라 눈물이 났다. 그래도 정석으로 활용하는 방법을 배우고, 유용한 익스텐션이랑 개념을 많이 배워서 한 번 정리해보려고 한다!

🤩Json Server: 프론트엔드 개발을 위한 강력한 mock API 라이브러리

프론트 엔드 개발 과정에서 백엔드 API가 준비되지 않은 상황이 종종 발생한다. 이런 경우, 원활한 개발을 위해 mock API가 필요하다. Json Server는 이런 상황에서, 빠르게 Fake REST API를 구축할 수 있게 한다.

Json Server는 REST API를 빠르게 구축할 수 있게 하는 Node 모듈이다. 단일 Json 파일을 데이터베이스로 하여, GET, POST, PUT, PATCH, DELETE 등의 HTTP 요청을 사용할 수 있다.

Json Server 사용 방법

1. 설치하기
다음 명령어로 json server 라이브러리를 설치할 수 잇다.

npm install json-server

특정 버전을 설치하고 싶다면, 다음과 같이 버전을 명시하여 설치할 수 있다.

npm install json-server@0.17.0

2. db.json 파일 생성
프로젝트 내에 db.json 파일을 생성하여 초기 데이터를 작성한다.

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

3.서버 실행
다음 명령어로 json-server을 실행한다.

npx json-server --watch db.json

db.json이 루트 폴더에 위치해 있지 않다면 위치한 곳의 경로를 입력해 주어야 한다.

npx json-server --watch src/server/db.json

기본으로 실행되는 포트는 3000이다. 다른 포트를 사용하고 싶다면 직접 명시해줄 수 있다.

npx json-server --watch src/server/db.json --port 3003

매번 이런 명령어들을 다 입력해주기 귀찮다면 package.json 에 명령어를 추가하여 쉽게 실행할 수 있다.

"scripts" : {
  "server" : "json-server --watch db.json --port 3004"
}

npm run server로 쉽게 서버를 실행할 수 있다.

프로젝트를 실행할 때 사용하는 npm run dev 명령어로 server 명령어를 지정하는 것처럼 마음대로 설정해 줄 수 있다. package.json 파일에서 dev를 potato로 바꿔주면 npm run potato가 되겠지. 동료를 당혹스럽게 만들 수 있다.

서버가 정상적으로 실행되었다면 대충 \ㅇㅅㅇ/이런 친구가 반겨주고, 콘솔에 입력된 경로를 브라우저에 입력하거나, ctrl + click하면 브라우저에서 데이터를 확인할 수 있다.

쟤는 언제 봐도 귀엽다. 등장 조건은 모르겠는데 보라색 친구도 있다.

Json Server 내장 규칙

Json Server은 db.json 파일을 기반으로 RESTful 라우트를 생성한다. 이를 활용하여 다양한 HTTP 요청을 처리할 수 있다. url을 이리저리 바꿔보면서 알아보도록 합시다.

1. 전체 리소스 조회
Json Server의 기본 URL http://localhost:3000/ 에 이름을 추가하면 해당 리소스의 모든 항목을 조회할 수 있다.

http://localhost:3000/posts

실습에 활용한 db.json은 posts, comments, profile로 구성되어 있고, localhost:3000/ 뒤에 오는 텍스트에 따라 해당하는 리소스만을 응답해준다.

2. 특정 ID 값을 가진 리소스 조회

posts뒤에 숫자를 하나 붙여보자.

http://localhost:3000/posts/1

리소스 뒤에 ID를 붙이면 리소스에서 ID가 1인 항목만을 조회할 수 있다.

3. 쿼리 파라미터 이용한 필터링
url에 쿼리 파라미터를 추가하면, 다양한 필터링을 수행할 수 있다.
아래와 같은 형식으로 url을 작성하면, 해당 필드명과 완전히 일치하는 항목만 필터링하여 보여준다.

http://localhost:3000/posts?title=javascript

4. 부분 일치 검색
_like를 사용하여, 해당 필드의 값이 지정된 문자열을 포함하는 항목을 검색할 수 있다. 전체가 일치하지 않아도, 해당 문자열을 포함한 항목은 모두 검색이 된다.

5. 불일치 검색
_ne를 사용하면, 해당 필드의 값이 지정된 값과 일치하지 않는 항목을 검색할 수 있다.

일치하지 않는 모든 항목을 반환하며, 필드명과 문자열이 완벽하게 일치하는 항목만 필터링한다.

Hello World와 Hello React은 hello 문자열을 포함하지만, 완벽하게 일치하지는 않으므로 모든 항목이 반환된다.

완벽하게 일치하는 문자열인 Hello World만 필터링 된다!

6. 복수 필터 조건 설정
&으로 조건을 연결하여 다수의 조건을 설정할 수 있다.

hello world와 javascript가 아닌 값 중에 l을 포함하는 항목만 출력!

이 외에도 q, _sort, _order, _limit, _page 등 다양한 쿼리 파라미터를 이용하여 다양한 상황에서의 API의 동작을 제어할 수 있다.

🚫주의
copilot에게 문의한 결과, _ne연산자와 &연산자의 경우 API에 따라 일부 지원하지 않을 수 있다고 한다. API의 구현에 따라 작동하지 않을 수 있으니, 이런 사항을 독자에게 명확히 명시해주라고 한다. 누가 읽을지는 모르겠지만...알아두십시오.

😎HTTP 내장 메서드

API의 데이터 통신은 HTTP 또는 HTTPS를 사용한다. 웹에서 데이터를 주고 받는 데 사용되는 프로토콜이다.

HTTP는 다음의 내장 메서드를 제공한다.

GET(조회): 서버에서 특정 리소스를 가져온다.
POST(생성): 서버에서 새로운 리소스를 생성한다.
PUT(전체 수정): 서버의 특정 리소스를 완전히 수정한다. 존재하지 않으면 새로 생성
DELETE(삭제): 서버의 특정 리소스를 삭제한다.
PATCH(일부 수정): 서버의 특정 리소스를 부분적으로 업데이트 한다.
OPTIONS: 웹 서버에서 지원하는 메서드의 종류를 반환한다.
HEAD: GET 메서드와 비슷하지만, 본문을 제외한 헤더 정보만 가져온다.

메서드들은 각각 그 의미와 활용도가 다르며, GET, POST, PUT, DELETE, PATCH가 자주 사용된다.

그 중 GET을 제외한 메서드들은 데이터 통신을 위한 별도의 클라이언트가 필요하다.(웹 브라우저, curl 명령어, Postman 등)

활용

const data = await (
      await fetch("http://localhost:3000/comments/2", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: "modify" }),
      })
    ).json();

위 코드는 fetch 함수를 사용하여 PATCH 요청을 보내는 예제 코드이다.

URL: 로컬 서버에서 실행 중인 API에서 요청을 보낼 특정 항목을 가리킴
method: 사용할 HTTP 메서드를 명시하는 부분으로, 위 코드에서는 특정 리소스를 부분적으로 업데이트 하고자 한다.
headers: 요청 헤더를 설정한다. Content-Type을 application/json으로 설정하면, 요청 본문이 JSON 형식임을 서버에 알릴 수 있다.
body: JSON.stringify 함수를 사용하여, javascript 객체를 JSON 문자열로 변환한다. text 필드를 modify로 변경하라는 요청을 보낸다.
fetch 함수는 Promise를 반환하여,await 키워드를 사용하여 Promise가 해결될 때까지 기다려준다. (1) HTTP 요청이 완료될 때 까지 기다리고, (2) 응답 본문을 JSON으로 파싱할 때까지 기다린다.

⚡Thunder client

API 테스트를 위한 기본 기능을 제공하는 vscode용 경량 REST API 클라이언트 익스텐션

Thunder Client를 사용하여 HTTP 요청을 생성하고 테스트 할 수 있고, 프로젝트 별 사용하는 API 목록을 컬렉션으로 관리할 수 있다.

이렇게 GET하여 조회할 수도 있고

POST 할 수도 있따.

굉장히 유용합니다. 50개의 익스텐션에 +1

json server와 HTTP 메서드에 대해 굵고 빠르게 배우고 활용 방법을 배웠다. 프로젝트를 하다보면 백엔드가 없어서 눈물이 나는 경우가 종종 있는데, 혼자서도 빠르게 API를 만들고 기능을 사용할 수 있어서 개발 단계에서 상당히 유용하게 쓸 수 있는 라이브러리이다. 앞으로 잘 부탁해🤩

🥔감자로그🍟

멋진 회오리 감자가 되는 그날까지 https://monicx.tistory.com/

이전 포스트

Understanding useReducer와 Context API

다음 포스트