1. REST API의 이해
1.1 핵심 정의
- REST(Representational State Transfer): HTTP/1.0과 1.1의 스펙 작성에 참여한 로이 필딩이 제안한 아키텍처입니다.
- 핵심 목적: HTTP 프로토콜을 원래 의도에 맞게 디자인하여 그 장점을 최대한 활용하는 것입니다.
- 비유: REST가 “표준 문법”이라면, REST API는 그 문법을 지켜서 만든 “실제 대화”입니다.
1.2 HTTP 장점을 어떻게 최대한 활용하는가?
-
자체 표현 구조 (Self-descriptiveness): 별도의 설명서 없이 요청 메시지(URI와 메서드)만 보고도 무엇을 하려는지 즉시 이해할 수 있습니다.
-
무상태성 (Stateless): HTTP의 특징을 그대로 이어받아 서버가 클라이언트의 상태를 관리하지 않으므로, 서버의 확장성과 단순성이 높아집니다.
-
표준 메서드 활용: 기존 HTTP 메서드(GET, POST 등)를 CRUD 기능과 1:1로 매칭하여 전 세계 어디서든 통용되는 인터페이스를 제공합니다.
2. REST API 구성 요소와 예시
REST API는 자원, 행위, 표현의 3가지 요소로 구성됩니다.
REST API Components
JayTak
3. REST API라는 통신 창구(Interface)를 어떤 규칙으로 설계할 것인가
3.1 URI는 리소스를 표현
-
리소스를 식별하는 이름은 동사보다 명사를 사용합니다.
-
URI에
get,show,delete같은 행위 표현을 직접 넣지 않습니다.-
❌
GET /getTodos/1 -
✅
GET /todos/1
-
3.2 리소스에 대한 행위는 HTTP 메서드로 표현
- GET: 리소스 취득
- POST: 리소스 생성
- PUT/PATCH: 리소스 전체 교체 / 일부 수정
- DELETE: 리소스 삭제
4. [실습] 가상 서버 구축 및 통신 구현
4.1 실습 코드
<script>
function sendRequest(method, url, data = null) {
// method: HTTP 메서드 (GET, POST, PUT, PATCH, DELETE)
// url: 요청할 경로 (예: /todos, /todos/4)
// data: 보낼 데이터 (기본값 null)
const xhr = new XMLHttpRequest();
xhr.open(method, url);
// 1단계: XMLHttpRequest 객체 생성 및 설정
// XMLHttpRequest: 브라우저에서 서버와 통신하기 위한 객체
// xhr.open(method, url): 요청 방식과 URL 설정 (아직 보내지 않음)
if (["POST", "PUT", "PATCH"].includes(method)) {
xhr.setRequestHeader("content-type", "application/json");
}
// 2단계: Content-Type 헤더 설정
// POST, PUT, PATCH는 데이터를 보내는 요청
// 서버에게 "JSON 형식으로 보낸다"고 알려주는 헤더 설정
// GET, DELETE는 본문 데이터가 없으므로 헤더 불필요
xhr.onload = () => {
const resultDisplay = document.getElementById("result");
// 3단계: 응답 처리 콜백 등록
// onload: 서버 응답이 도착하면 실행될 함수
// result id를 가진 <pre> 요소를 찾아서 결과 표시 준비
if (xhr.status >= 200 && xhr.status < 300) {
// 4단계: 성공/실패 분기 처리
// HTTP 상태 코드 200~299는 성공을 의미
// 200: OK
// 201: Created (생성됨)
// 204: No Content (성공했지만 응답 본문 없음)
if (xhr.response && xhr.response.trim()) {
resultDisplay.textContent = JSON.stringify(
JSON.parse(xhr.response),
null,
2
);
} else {
resultDisplay.textContent =
"성공! (상태 코드: " + xhr.status + ")";
}
} else {
resultDisplay.textContent = "Error: " + xhr.status;
}
};
// 5단계: 응답 데이터 출력
// 응답이 있으면: JSON을 예쁘게 포맷해서 출력
// 응답이 비어있으면: 성공 메시지만 표시
xhr.send(data ? JSON.stringify(data) : null);
}
// 6단계: 실제 요청 전송
// data가 있으면: 객체를 JSON 문자열로 변환해서 전송
// data가 없으면: null 전송 (GET, DELETE)
</script>
</body>
</html>