json-server

연습을 위해서 실무와 비슷한 느낌으로 하기 위해 가짜 API 서버를 만들어 통신을 해보았다.


가짜 API 서버 열기

$ npx json-server ./data.json --port 4000

./data.json에는 해당 파일 이름을 적고, 4000에는 원하는 포트번호를 적어 서버를 열 수 있다.


axios 를 사용하여 API 요청하기

마이리스트 페이지, 댓글을 구현할 때 json-server를 이용했다.

todos.json

{
  "todos": [
    {
      "title": "잘 된다.",
      "completed": false,
      "id": 1
    },
    {
      "title": "patch 너무너무 잘된다.",
      "completed": false,
      "id": 2
    },
    {
      "title": "잘 된다잉~",
      "completed": true,
      "id": 3
    }
  ]
}

comment.json

{
  "comments": [
    {
      "content": "너무 멋져요",
      "writer": "yerin",
      "postId": "123123",
      "created_at": "Mon Nov 28 2022 18:34:08 GMT+0900 (한국 표준시)",
      "id": 1
    },
    {
      "content": "기본값으로 꼭 넣어주세요!!! 감사함다~",
      "writer": "Jisoo",
      "postId": "123123",
      "created_at": "Mon Nov 28 2022 18:35:26 GMT+0900 (한국 표준시)",
      "id": 2
    }
  ]
}

🔳 참고

json-server-auth

JSON server용으로 만들어진 JWT 인증 미들웨어이다.

회원가입 페이지에서 간단하게 이용했다.

JSON server 시작하기

json-server db.json -m ./node_modules/json-server-auth

회원가입 : POST /users

POST /users
{
  "users": [
    {
      "email": "abc@abc.com",
      "password": "$2a$10$d17.gKfdjm6rt.3xDBLEhetru.QTQ4ondBcOFw53T4/19XWyNgv72",
      "name": "abc",
      "id": 1
    }
  ]
}

회원가입을 시도하니 위처럼 데이터가 등록되었다.


아쉬운 점

json-server-auth는 회원 가입 또는 로그인 시 accessToken만을 응답으로 내려주기 때문에 사용자를 식별할 방법이 없다. 만약, 필요하다면 직접 구현을 해야 할 것 같다.