JSON Server 핵심 정리

1
npm i -D json-server concurrently

1
npm run dev

1
2
3
4
5
6
7
8
9
10
{
  "컬렉션": [
    도큐먼트 {
      "필드": "값",
      "필드": "값"
    },
    도큐먼트,
    도큐먼트
  ]
}

1
2
curl http://localhost:3000/컬렉션 \
  -X 메소드

1
2
curl http://localhost:3000/users \
  -X GET \

1
2
3
curl http://localhost:3000/users/9c3d \
  -X PATCH \
  -d '{ "age": 99 }'

1
2
3
4
5
export async function fetchUsers(query = ''): Promise<User[]> {
  const res = await fetch(`http://localhost:3000/users/?${query}`) // GET
  const users = await res.json()
  return users
}

1
fetchUsers()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  },
  {
    "id": "4e6a",
    "name": "Mike",
    "age": 41
  }
]

1
필드_조건=값

1
fetchUsers('age=22')

1
2
3
4
5
6
7
8
9
10
11
12
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  }
]

1
fetchUsers('age_lt=41')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  }
]

1
fetchUsers('age_lte=41')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  },
  {
    "id": "4e6a",
    "name": "Mike",
    "age": 41
  }
]

1
2
3
fetchUsers('age_gt=41') // 35세 초과 사용자
fetchUsers('age_gte=41') // 35세 이상 사용자
fetchUsers('age_ne=41') // 35세가 아닌 사용자

1
2
3
fetchUsers('_start=0&_end=2') // 0번째부터 2번째 직전까지
fetchUsers('_start=0&_limit=2') // 0번째부터 2개
fetchUsers('_limit=2') // 0번째부터 2개

1
2
3
4
5
6
7
8
9
10
11
12
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  }
]

1
fetchUsers('_page=2&_per_page=2')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "first": 1,
  "prev": 1,
  "next": 3,
  "last": 3,
  "pages": 3,
  "items": 5,
  "data": [
    {
      "id": "9c3d",
      "name": "Evan",
      "age": 35
    },
    {
      "id": "2b1c",
      "name": "Alex",
      "age": 22
    }
  ]
}

1
fetchUsers('_sort=age')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "4e6a",
    "name": "Mike",
    "age": 41
  },
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  }
]

1
fetchUsers('_sort=-age')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  },
  {
    "id": "4e6a",
    "name": "Mike",
    "age": 41
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  }
]

1
fetchUsers('_sort=-age,name')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  },
  {
    "id": "4e6a",
    "name": "Mike",
    "age": 41
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  },
  {
    "id": "2b1c",
    "name": "Alex",
    "age": 22
  },
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  }
]

1
2
3
4
5
export async function fetchComments(query = ''): Promise<User[]> {
  const res = await fetch(`http://localhost:3000/comments/?${query}`) // GET
  const comments = await res.json()
  return comments
}

1
fetchComments()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
  {
    "id": "91bg",
    "createdAt": "2026-02-07",
    "comment": "Grid와 Flex는 항상 어려웠는데, 명확하게 설명해 주셔서 감사합니다!",
    "userId": "2b1c",
    "postId": "47g2"
  },
  {
    "id": "92ch",
    "createdAt": "2024-10-01",
    "comment": "이 성능 향상 팁은 정말 유용하네요. 제 앱이 훨씬 빨라졌어요!",
    "userId": "2b1c",
    "postId": "59h3"
  },
  {
    "id": "93di",
    "createdAt": "2025-03-14",
    "comment": "이 설명 덕분에 잘 관리할 수 있을 것 같아요.",
    "userId": "4e6a",
    "postId": "59h3"
  }
]

1
fetchComments('_embed=post')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
[
  {
    "id": "91bg",
    "createdAt": "2026-02-07",
    "comment": "Grid와 Flex는 항상 어려웠는데, 명확하게 설명해 주셔서 감사합니다!",
    "userId": "2b1c",
    "postId": "47g2",
    "post": {
      "id": "47g2",
      "createdAt": "2025-12-16",
      "title": "CSS Grid와 Flexbox 비교",
      "content": "레이아웃을 구성할 때 CSS Grid와 Flex 중 무엇을 사용할지 결정하는 방법. 장단점을 비교합니다.",
      "userId": "7a8b"
    }
  },
  {
    "id": "92ch",
    "createdAt": "2024-10-01",
    "comment": "이 성능 향상 팁은 정말 유용하네요. 제 앱이 훨씬 빨라졌어요!",
    "userId": "2b1c",
    "postId": "59h3",
    "post": {
      "id": "59h3",
      "createdAt": "2024-09-29",
      "title": "자바스크립트 성능 향상 팁",
      "content": "웹 애플리케이션의 성능을 향상시키는 자바스크립트 최적화 기술을 소개합니다.",
      "userId": "58f2"
    }
  },
  {
    "id": "93di",
    "createdAt": "2025-03-14",
    "comment": "이 설명 덕분에 잘 관리할 수 있을 것 같아요.",
    "userId": "4e6a",
    "postId": "59h3",
    "post": {
      "id": "59h3",
      "createdAt": "2024-09-29",
      "title": "자바스크립트 성능 향상 팁",
      "content": "웹 애플리케이션의 성능을 향상시키는 자바스크립트 최적화 기술을 소개합니다.",
      "userId": "58f2"
    }
  }
]

1
fetchComments('_embed=post&_embed=user')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
[
  {
    "id": "91bg",
    "createdAt": "2026-02-07",
    "comment": "Grid와 Flex는 항상 어려웠는데, 명확하게 설명해 주셔서 감사합니다!",
    "userId": "2b1c",
    "postId": "47g2",
    "post": {
      "id": "47g2",
      "createdAt": "2025-12-16",
      "title": "CSS Grid와 Flexbox 비교",
      "content": "레이아웃을 구성할 때 CSS Grid와 Flex 중 무엇을 사용할지 결정하는 방법. 장단점을 비교합니다.",
      "userId": "7a8b"
    },
    "user": {
      "id": "2b1c",
      "name": "Alex",
      "age": 22
    }
  },
  {
    "id": "92ch",
    "createdAt": "2024-10-01",
    "comment": "이 성능 향상 팁은 정말 유용하네요. 제 앱이 훨씬 빨라졌어요!",
    "userId": "2b1c",
    "postId": "59h3",
    "post": {
      "id": "59h3",
      "createdAt": "2024-09-29",
      "title": "자바스크립트 성능 향상 팁",
      "content": "웹 애플리케이션의 성능을 향상시키는 자바스크립트 최적화 기술을 소개합니다.",
      "userId": "58f2"
    },
    "user": {
      "id": "2b1c",
      "name": "Alex",
      "age": 22
    }
  },
  {
    "id": "93di",
    "createdAt": "2025-03-14",
    "comment": "이 설명 덕분에 잘 관리할 수 있을 것 같아요.",
    "userId": "4e6a",
    "postId": "59h3",
    "post": {
      "id": "59h3",
      "createdAt": "2024-09-29",
      "title": "자바스크립트 성능 향상 팁",
      "content": "웹 애플리케이션의 성능을 향상시키는 자바스크립트 최적화 기술을 소개합니다.",
      "userId": "58f2"
    },
    "user": {
      "id": "4e6a",
      "name": "Mike",
      "age": 41
    }
  }
]

1
2
3
4
5
6
7
8
export async function createUser(user: Omit<User, 'id'>): Promise<User> {
  const res = await fetch('http://localhost:3000/users', {
    method: 'POST',
    body: JSON.stringify(user)
  })
  const createdUser = await res.json()
  return createdUser
}

1
2
3
4
createUser({
  name: 'John',
  age: 30
})

1
2
3
4
5
{
  "id": "1a2b",
  "name": "John",
  "age": 30
}

1
2
3
4
5
6
7
8
export async function updateUser(user: User): Promise<User> {
  const res = await fetch(`http://localhost:3000/users/${user.id}`, {
    method: 'PUT',
    body: JSON.stringify(user)
  })
  const updatedUser = await res.json()
  return updatedUser
}

1
2
3
4
5
updateUser({
  id: '58f2',
  name: 'Neo',
  age: 123 // 수정
})

1
2
3
4
5
{
  "id": "58f2",
  "name": "Neo",
  "age": 123
}

1
2
3
4
5
6
7
8
export async function updateUser(user: Partial<User> & Pick<User, 'id'>): Promise<User> {
  const res = await fetch(`http://localhost:3000/users/${user.id}`, {
    method: 'PATCH',
    body: JSON.stringify(user)
  })
  const updatedUser = await res.json()
  return updatedUser
}

1
2
3
4
updateUser({
  id: '58f2',
  age: 123 // 수정
})

1
2
3
4
5
{
  "id": "58f2",
  "name": "Neo",
  "age": 123
}

1
2
3
4
5
6
7
export async function deleteUser(userId: string): Promise<User> {
  const res = await fetch(`http://localhost:3000/users/${userId}`, {
    method: 'DELETE'
  })
  const user = await res.json()
  return user
}

1
deleteUser('4e6a')

1
2
3
4
5
{
  "id": "4e6a",
  "name": "Mike",
  "age": 41
}

1
2
3
4
5
6
7
8
9
export async function deleteUsers(userIds: string[] = []): Promise<User[]> {
  return Promise.all(userIds.map(async userId => {
    const res = await fetch(`http://localhost:3000/users/${userId}`, {
      method: 'DELETE'
    })
    const deletedUser = await res.json()
    return deletedUser
  }))
}

1
deleteUsers(['58f2', '7a8b', '9c3d'])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "id": "58f2",
    "name": "Neo",
    "age": 22
  },
  {
    "id": "7a8b",
    "name": "Lewis",
    "age": 57
  },
  {
    "id": "9c3d",
    "name": "Evan",
    "age": 35
  }
]

1
2
3
4
5
6
7
8
export async function deletePost(postId: string, isDeleteRefs = true): Promise<Post> {
  const query = isDeleteRefs ? '_dependent=comments' : ''
  const res = await fetch(`http://localhost:3000/posts/${postId}?${query}`, {
    method: 'DELETE'
  })
  const deletedPost = await res.json()
  return deletedPost
}

1
2
3
// 게시글을 삭제하며, 연관 댓글도 삭제합니다.
deletePost('59h3')
deletePost('59h3', true)

1
2
// 게시글을 삭제하지만, 연관 댓글은 삭제하지 않습니다.
deletePost('59h3', false)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "comments": [
    {
      "id": "91bg",
      "createdAt": "2026-02-07",
      "comment": "Grid와 Flex는 항상 어려웠는데, 명확하게 설명해 주셔서 감사합니다!",
      "userId": "2b1c",
      "postId": "47g2"
    },
    {
      "id": "92ch",
      "createdAt": "2024-10-01",
      "comment": "이 성능 향상 팁은 정말 유용하네요. 제 앱이 훨씬 빨라졌어요!",
      "userId": "2b1c",
      "postId": null
    },
    {
      "id": "93di",
      "createdAt": "2025-03-14",
      "comment": "이 설명 덕분에 잘 관리할 수 있을 것 같아요.",
      "userId": "4e6a",
      "postId": null
    }
  ]
}