최종 수정 : 2024-04-06
필요한 지식
HTTP / Ajax / XMLHttpRequest / JSON / REST API
1. HTTP 메서드
클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법이다. 이들을 사용하여 CRUD를 구현한다.
요청 메서드 | 종류 | 목적 | 페이로드 |
GET | index / retrieve | 모든 / 특정 리소스 취득 | X |
POST | create | 리소스 생성 | O |
PUT | replace | 리소스 갱신 | O |
PATCH | modify | 리소스 일부 수정 | O |
DELETE | delete | 모든 / 특정 리소스 삭제 | X |
2. 용어 설명
페이로드
'옵션 객체'이라고 이해하면 된다.
POST, PUT, PATCH에는 then() 메소드 위에 내용이 있는데, 이를 '옵션 객체'라고 한다.
멱등성
얼마나 많이 실행하든 항상 같은 결과가 나오는 작업
쿼리스트링(Query String)
URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법
3. 메서드에 대한 설명
GET
- 오직 데이터를 받기만 한다.
- 멱등성이라는 개념 덕분에 여러 번 조회 요청을 해도 리소스는 동일하다.
- 서버에 데이터를 전달하는 경우, 쿼리스트링을 통해 전달한다.
- 캐싱을 이용하므로, 조회 속도가 POST 메서드에 비해 우수하다.
fetch('웹 사이트 주소/조회할 정보')
.then((rees) => res.text())
.then((result) => (
const B = JSON.parse(result)
});
POST
- 새로운 리소스를 생성(Create)하는데 사용한다.
- 성공적으로 creation을 완료하면 201 (Created) HTTP 응답을 반환한다.
- 데이터를 조회할 수 있긴 하지만, 멱등성을 지니지 않으므로, 여러 번 수행할 경우 같은 결과값이 보장되지 않는다.
- 데이터를 메시지 바디에 쿼리 파라미터 형식으로 전달한다.
- 문자열 뿐만 아니라, 객체들의 값도 전송할 수 있다.
- 데이터가 외부로 노출되지 않으므로, 보안상의 이점이 있다.
fetch('웹 페이지 주소', {
method: 'POST',
body: JSON.stringify(변수명),
}) .then ~~
PUT
- 리소스를 갱신한다.
- 클라이언트가 리소스를 식별할 수 있다.
- 멱등성을 지닌다.
fetch('웹 페이지 주소', {
method: 'PUT',
body: JSON.stringify(변수명),
}) .then ~~
PATCH
- PUT 처럼 리소스를 수정하는 역할을 하지만, 리소스를 부분 변경한다는 점에서 차이가 있다.
- PATCH 메서드를 지원하지 않는 서버도 존재한다. 그럴 경우 POST를 사용하면 된다.
- PUT과 달리 멱등성을 지니지 않는다.
DELETE
- 리소스를 제거하는 역할을 한다.
- 멱등성을 지닌다.
fetch('웹 페이지 주소', {
method: 'DELETE',
}) .then ~~
참고 자료
모던 자바스크립트 Deep Dive (p.825)
'프론트엔드 > JS 공부' 카테고리의 다른 글
쿠키(Cookie) (0) | 2024.05.01 |
---|---|
객체 - 배열 - 문자열의 상관 관계 (0) | 2024.04.26 |
이벤트 위임(event delegation)에 대한 정리 (0) | 2024.04.06 |
생성자 함수(constructor)에 대한 정리 (1) | 2024.04.05 |
이벤트 전파(Event propagation)에 대한 정리 (0) | 2024.04.05 |
댓글