JSON Server 활용법

상현·2023년 11월 28일

JSON Server는 당장 back-end를 직접 구축하기 어려울 때, MOCK 서버로 활용할 수 있는 가상의 서버를 구축하는 기능을 제공한다.

앞으로 프로젝트에서 많이 쓰이게 될 것 같아 유용하게 쓸 수 있는 기능들을 정리하고자 한다.

설치 및 실행

설치

npm install -g json-server

yarn add json-server

실행

json-server --watch db.json --port [port번호]

사용법

서버를 실행하고 나면 지정한 포트로 서버가 열린다. 나 같은 경우는 4000번 포트로 열었고, localhost:4000으로 들어가 보면 어떤 데이터가 들어 있는지 확인할 수 있다.

아래에는 앞으로 유용하게 쓰일 수 있을 것 같은 쿼리들을 정리했다.

Test용 `db.json`

{
  "posts": [
    {
      "title": "제목1",
      "content": "내용1",
      "author": "글쓴이1",
      "vote": {
        "like": 5,
        "dislike": 0
      },
      "id": "1"
    },
    {
      "title": "제목2",
      "content": "내용2ㅋㅋ",
      "author": "글쓴이2",
      "vote": {
        "like": 0,
        "dislike": -3
      },
      "id": "2"
    },
    {
      "title": "제목3",
      "content": "내용3",
      "author": "글쓴이3",
      "vote": {
        "like": 0,
        "dislike": 0
      },
      "id": "3"
    },
    {
      "title": "제목4",
      "content": "내용4",
      "author": "글쓴이4",
      "vote": {
        "like": 6,
        "dislike": 0
      },
      "id": "4"
    },
    {
      "title": "제목5",
      "content": "내용5",
      "author": "글쓴이5",
      "vote": {
        "like": 0,
        "dislike": 0
      },
      "id": "5"
    },
    {
      "title": "제목6",
      "content": "내용6",
      "author": "글쓴이6",
      "vote": {
        "like": 0,
        "dislike": 0
      },
      "id": "6"
    },
    {
      "title": "제목7",
      "content": "내용7ㅋㅋ",
      "author": "글쓴이7",
      "vote": {
        "like": 0,
        "dislike": 0
      },
      "id": "7"
    },
    {
      "title": "제목8",
      "content": "내용8",
      "author": "글쓴이8",
      "vote": {
        "like": 0,
        "dislike": 1
      },
      "id": "8"
    },
    {
      "title": "제목9",
      "content": "내용9",
      "author": "글쓴이9",
      "vote": {
        "like": 7,
        "dislike": 0
      },
      "id": "9"
    }
  ],
  "comments": [
    {
      "postId": "1",
      "content": "내용1",
      "author": "글쓴이1",
      "id": "1"
    },
    {
      "postId": "2",
      "content": "내용2",
      "author": "글쓴이2",
      "id": "2"
    },
    {
      "postId": "3",
      "content": "내용3",
      "author": "글쓴이3",
      "id": "3"
    },
    {
      "postId": "4",
      "content": "내용4",
      "author": "글쓴이4",
      "id": "4"
    },
    {
      "postId": "5",
      "content": "내용5",
      "author": "글쓴이5",
      "id": "5"
    },
    {
      "postId": "6",
      "content": "내용6",
      "author": "글쓴이6",
      "id": "6"
    },
    {
      "postId": "7",
      "content": "내용7",
      "author": "글쓴이7",
      "id": "7"
    }
  ]
}

posts/findAll

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts
기능: 모든 post 데이터를 찾는다.
실행 결과

[
    {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    },
    {
        "title": "제목2",
        "content": "내용2ㅋㅋ",
        "author": "글쓴이2",
        "vote": {
            "like": 0,
            "dislike": -3
        },
        "id": "2"
    },
    {
        "title": "제목3",
        "content": "내용3",
        "author": "글쓴이3",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "3"
    },
    {
        "title": "제목4",
        "content": "내용4",
        "author": "글쓴이4",
        "vote": {
            "like": 6,
            "dislike": 0
        },
        "id": "4"
    },
    {
        "title": "제목5",
        "content": "내용5",
        "author": "글쓴이5",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "5"
    },
    {
        "title": "제목6",
        "content": "내용6",
        "author": "글쓴이6",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "6"
    },
    {
        "title": "제목7",
        "content": "내용7ㅋㅋ",
        "author": "글쓴이7",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "7"
    },
    {
        "title": "제목8",
        "content": "내용8",
        "author": "글쓴이8",
        "vote": {
            "like": 0,
            "dislike": 1
        },
        "id": "8"
    },
    {
        "title": "제목9",
        "content": "내용9",
        "author": "글쓴이9",
        "vote": {
            "like": 7,
            "dislike": 0
        },
        "id": "9"
    }
]

posts/findById

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts/{{id}}
예시: http://localhost:4000/posts/1
기능: posts에서 id가 1인 post를 찾는다.
실행 결과

{
    "title": "제목1",
    "content": "내용1",
    "author": "글쓴이1",
    "vote": {
        "like": 5,
        "dislike": 0
    },
    "id": "1"
}

posts/findByTitle

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts?title={{제목}}
예시: http://localhost:4000/posts?title=제목1
기능: posts에서 title이 제목1인 post를 찾는다.
실행 결과

[
    {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    }
]

posts/findByLikeGreaterThan

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts?vote.like_gte={{number}}
예시: http://localhost:4000/posts?vote.like_gte=2
기능: posts에서 vote의 like가 2 이상인 post들을 찾는다.
실행 결과

[
    {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    },
    {
        "title": "제목4",
        "content": "내용4",
        "author": "글쓴이4",
        "vote": {
            "like": 6,
            "dislike": 0
        },
        "id": "4"
    },
    {
        "title": "제목9",
        "content": "내용9",
        "author": "글쓴이9",
        "vote": {
            "like": 7,
            "dislike": 0
        },
        "id": "9"
    }
]

posts/findByContentLike

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts?content_like={{내용}}
예시: http://localhost:4000/posts?content_like=ㅋㅋ
기능: posts에서 content에 ㅋㅋ가 포함되는 post를 찾는다.
실행 결과

[
    {
        "title": "제목2",
        "content": "내용2ㅋㅋ",
        "author": "글쓴이2",
        "vote": {
            "like": 0,
            "dislike": -3
        },
        "id": "2"
    },
    {
        "title": "제목7",
        "content": "내용7ㅋㅋ",
        "author": "글쓴이7",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "7"
    }
]

posts/findByTitleExclude

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts?title_ne={{내용}}
예시: http://localhost:4000/posts?posts?title_ne=ㅋ
기능: posts에서 title에 ㅋ가 포함되지 않는 post를 찾는다.
실행 결과

[
    {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    },
    {
        "title": "제목2",
        "content": "내용2ㅋㅋ",
        "author": "글쓴이2",
        "vote": {
            "like": 0,
            "dislike": -3
        },
        "id": "2"
    },
    {
        "title": "제목3",
        "content": "내용3",
        "author": "글쓴이3",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "3"
    },
    {
        "title": "제목4",
        "content": "내용4",
        "author": "글쓴이4",
        "vote": {
            "like": 6,
            "dislike": 0
        },
        "id": "4"
    },
    {
        "title": "제목5",
        "content": "내용5",
        "author": "글쓴이5",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "5"
    },
    {
        "title": "제목6",
        "content": "내용6",
        "author": "글쓴이6",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "6"
    },
    {
        "title": "제목7",
        "content": "내용7ㅋㅋ",
        "author": "글쓴이7",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "7"
    },
    {
        "title": "제목8",
        "content": "내용8",
        "author": "글쓴이8",
        "vote": {
            "like": 0,
            "dislike": 1
        },
        "id": "8"
    },
    {
        "title": "제목9",
        "content": "내용9",
        "author": "글쓴이9",
        "vote": {
            "like": 7,
            "dislike": 0
        },
        "id": "9"
    }
]

posts/findAllOrderByLikeDesc

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts?_sort=vote.like&_order=desc
기능: posts에서 vote 안의 like가 큰 순으로 정렬하여 검색한다.
실행 결과

[
    {
        "title": "제목9",
        "content": "내용9",
        "author": "글쓴이9",
        "vote": {
            "like": 7,
            "dislike": 0
        },
        "id": "9"
    },
    {
        "title": "제목4",
        "content": "내용4",
        "author": "글쓴이4",
        "vote": {
            "like": 6,
            "dislike": 0
        },
        "id": "4"
    },
    {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    },
    {
        "title": "제목2",
        "content": "내용2ㅋㅋ",
        "author": "글쓴이2",
        "vote": {
            "like": 0,
            "dislike": -3
        },
        "id": "2"
    },
    {
        "title": "제목3",
        "content": "내용3",
        "author": "글쓴이3",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "3"
    },
    {
        "title": "제목5",
        "content": "내용5",
        "author": "글쓴이5",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "5"
    },
    {
        "title": "제목6",
        "content": "내용6",
        "author": "글쓴이6",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "6"
    },
    {
        "title": "제목7",
        "content": "내용7ㅋㅋ",
        "author": "글쓴이7",
        "vote": {
            "like": 0,
            "dislike": 0
        },
        "id": "7"
    },
    {
        "title": "제목8",
        "content": "내용8",
        "author": "글쓴이8",
        "vote": {
            "like": 0,
            "dislike": 1
        },
        "id": "8"
    }
]

comments/findPostContainingComments

요청 주소: http://{{DOMAIN}}:{{PORT}}/posts/{{id}}?_embed=comments
기능: posts에서 id로 post를 찾고, 그 id를 부모로 갖는 comments를 포함하여 출력한다.
실행 결과

{
    "title": "제목1",
    "content": "내용1",
    "author": "글쓴이1",
    "vote": {
        "like": 5,
        "dislike": 0
    },
    "id": "1",
    "comments": [
        {
            "postId": "1",
            "content": "내용1",
            "author": "글쓴이1",
            "id": "1"
        }
    ]
}

comments/findCommentContainingPost

요청 주소: http://{{DOMAIN}}:{{PORT}}/comments/{{id}}?_expand=post
기능: comments에서 id로 comment를 찾고 그 comment가 부모로하는 post를 출력한다.
주의: expand=posts가 아니라 expand=post인 것에 유의해야 한다!! (1:1 이기 때문)
실행 결과

{
    "postId": "1",
    "content": "내용1",
    "author": "글쓴이1",
    "id": "1",
    "post": {
        "title": "제목1",
        "content": "내용1",
        "author": "글쓴이1",
        "vote": {
            "like": 5,
            "dislike": 0
        },
        "id": "1"
    }
}

상현

블로그 이전 => https://shdev.blog/

이전 포스트

[Redux] Redux Toolkit (RTK) 알아보기

다음 포스트

JSON Server 활용법

설치 및 실행

설치

실행

사용법

Test용 `db.json`

posts/findAll

posts/findById

posts/findByTitle

posts/findByLikeGreaterThan

posts/findByContentLike

posts/findByTitleExclude

posts/findAllOrderByLikeDesc

comments/findPostContainingComments

comments/findCommentContainingPost

[Redux] Redux Toolkit (RTK) 알아보기

[Redux] Redux Thunk

0개의 댓글

JSON Server 활용법

설치 및 실행

설치

실행

사용법

Test용 db.json

posts/findAll

posts/findById

posts/findByTitle

posts/findByLikeGreaterThan

posts/findByContentLike

posts/findByTitleExclude

posts/findAllOrderByLikeDesc

comments/findPostContainingComments

comments/findCommentContainingPost

[Redux] Redux Toolkit (RTK) 알아보기

[Redux] Redux Thunk

0개의 댓글

Test용 `db.json`