🚀 Guide
현재 가이드는 Fetch API를 사용하여 다양한 예시를 제공합니다.
예시 코드를 복사하여 브라우저의 콘솔에 붙여 넣으면 간단하게 실행해볼 수 있습니다.
Auth-Resource, Image-Resource를 제외한 모든 리소스에 대해 동일한 사용 방법을 따릅니다.
Auth-Resource, Image-Resource에 대한 설명은 가이드에서 제공되지 않으며, Docs에서 확인하실 수 있습니다.
각 리소스에 대한 더 자세한 설명은 Docs를 참고해주세요.
⚠️POST, PUT, PATCH, DELETE Method는 실제 서버 DB에는 영향을 주지 않으며, 더미 데이터로 처리됩니다.
Resource 조회하기
id가 1인 게시물을 조회합니다.
fetch("https://koreandummyjson.site/api/posts/1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 목록 조회하기
모든 게시물을 조회합니다.
fetch("https://koreandummyjson.site/api/posts")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 목록 페이징
게시물 목록을 페이징 처리하여 조회합니다.
Fetch URL Query String을 통해 page와 limit를 설정할 수 있습니다.
fetch("https://koreandummyjson.site/api/posts?page=1&limit=10")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 페이징 Resource를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users?page={page}&limt={limit} | GET | 유저 목록 페이징 |
/todos?page={page}&limt={limit} | GET | 할 일 목록 페이징 |
/posts?page={page}&limt={limit} | GET | 게시물 목록 페이징 |
/comments?page={page}&limt={limit} | GET | 댓글 목록 페이징 |
/books?page={page}&limt={limit} | GET | 책 목록 페이징 |
/reviews?page={page}&limt={limit} | GET | 리뷰 목록 페이징 |
Resource 생성하기
새로운 게시물을 생성합니다.
fetch("https://koreandummyjson.site/api/posts", {
method: "POST",
body: JSON.stringify({
"title": "테스트 글",
"content": "테스트 글 입니다.",
"imgUrl": "https://picsum.photos/id/1/300/300",
"userId": 1
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 전체 수정하기
id가 1인 게시물 전체를 수정합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "PUT",
body: JSON.stringify({
"title": "테스트 글",
"contnet": "테스트 글 입니다.",
"imgUrl": "https://picsum.photos/id/2/300/300"
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 일부 수정하기
id가 1인 게시물을 일부를 수정합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "PATCH",
body: JSON.stringify({
"title": "테스트 글"
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 삭제하기
id가 1인 게시물 삭제합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "DELETE"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
Resource 필터링하기
userId가 1번인 유저가 작성한 게시물 목록을 필터링합니다.
fetch("https://koreandummyjson.site/api/posts/?userId=1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 필터링 Resource를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/todos?userId={userId} | GET | 유저별 할 일 목록 |
/comments?userId={userId} | GET | 유저별 댓글 목록 |
/comments?postId={postId} | GET | 게시물별 댓글 목록 |
/reviews?bookId={bookId} | GET | 책별 리뷰 목록 |
/reviews?userId={userId} | GET | 유저별 리뷰 목록 |
하위 Resource 조회하기
id가 1번인 게시물의 하위 resource 댓글 목록을 조회합니다.
fetch("https://koreandummyjson.site/api/posts/1/comments")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 하위 Resource를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users/:id/todos | GET | 유저별 할 일 목록 조회 |
/users/:id/posts | GET | 유저별 게시물 목록 조회 |
/users/:id/comment | GET | 유저별 댓글 목록 조회 |
/users/:id/reviews | GET | 유저별 리뷰 목록 조회 |
/books/:id/reviews | GET | 책별 리뷰 목록 조회 |