🌐 HTTP 통신과 API 설계의 기초
클라이언트와 서버가 데이터를 주고받는 가장 기본적인 약속인 HTTP에 대해 정리해보려 합니다. 프론트엔드 개발을 하다 보면 API 명세서를 보고 axios나 fetch로 데이터를 요청하게 되는데요. 이때 우리가 사용하는 메서드나 상태 코드가 어떤 의미를 갖는지 명확히 이해하는 것이 중요합니다.
1️⃣ HTTP 메서드 = 이 요청의 목적이 무엇인가요?
HTTP(HyperText Transfer Protocol)는 브라우저와 서버 간의 데이터를 주고받기 위한 규칙입니다. 여기서 메서드(Method)는 서버에게 보내는 '동사'와 같아서, 해당 요청으로 무엇을 하고 싶은지를 나타냅니다.
| 메서드 | 의미 | 특징 | 예시 |
|---|---|---|---|
| GET | 데이터 조회 | 서버 상태를 변경하지 않음 (안전함) | GET /users/1 (1번 유저 조회) |
| POST | 데이터 생성 | 서버에 새로운 리소스를 만듦 | POST /users (새 유저 등록) |
| PUT | 전체 수정 | 기존 데이터를 새로운 데이터로 덮어씀 | PUT /users/1 (정보 전체 교체) |
| PATCH | 부분 수정 | 변경이 필요한 필드만 수정함 | PATCH /users/1 (이메일만 변경) |
| DELETE | 데이터 삭제 | 지정한 리소스를 삭제함 | DELETE /users/1 (유저 삭제) |
프론트엔드에서
axios.get이나axios.post를 선택하는 기준은 이 설계 의도에 있습니다.
2️⃣ 상태 코드 (Status Code) = 서버로부터 온 신호
상태 코드는 서버가 요청을 처리한 결과를 숫자로 요약해서 알려주는 신호입니다. 프론트엔드에서는 이 코드를 바탕으로 사용자에게 성공 메시지를 보여줄지, 혹은 에러 페이지로 보낼지 결정하게 됩니다.
- 200 OK: 요청 성공! (조회나 수정이 잘 되었을 때)
- 201 Created: 새로운 리소스 생성 성공 (주로 POST 요청 후 응답)
- 400 Bad Request: 요청 자체가 잘못됨 (필수 값 누락, 형식 오류 등)
- 401 Unauthorized: 인증되지 않음 (로그인이 필요하거나 토큰이 만료됨)
- 403 Forbidden: 권한 없음 (로그인은 했지만 접근 권한이 없는 페이지)
- 404 Not Found: 리소스 없음 (잘못된 URL이거나 삭제된 데이터)
- 500 Internal Server Error: 서버 내부 오류 (서버의 에러)
3️⃣ Request와 Response의 구조
데이터 통신은 크게 '요청(Request)'과 '응답(Response)'으로 나뉩니다.
3-1. Request (클라이언트 → 서버)
클라이언트가 서버로 보내는 메시지입니다. 메서드, URL, 헤더, 그리고 데이터를 담는 Body로 구성됩니다.
// POST /login 요청 예시
Headers: { "Content-Type": "application/json" }
Body: { "email": "test@test.com", "password": "1234" }
3-2. Response (서버 → 클라이언트)
서버가 처리 후 보내주는 메시지입니다. 상태 코드와 헤더, 그리고 서버가 돌려주는 데이터인 Body가 포함됩니다.
// 서버의 응답 예시
{ "id": 1, "name": "Choi" }
axios를 사용하면 response.status로 상태 코드를, response.data로 바디 데이터를 쉽게 꺼내 쓸 수 있습니다.
4️⃣ JSON 직렬화와 역직렬화
데이터를 전송할 때는 자바스크립트 객체 그대로 보낼 수 없습니다. 그래서 JSON이라는 문자열 형식을 빌려 통신합니다.
- 직렬화(Serialization):
JSON.stringify(obj)를 통해 JS 객체를 문자열로 변환합니다. 서버로 보낼 때 사용해요. - 역직렬화(Deserialization):
JSON.parse(string)를 통해 문자열을 다시 JS 객체로 변환합니다. 서버 응답을 사용할 때 필요하죠.
Axios는 기본적으로 JavaScript 객체를 JSON으로 자동 직렬화(Serialization)하여 서버로 전송하고, 서버에서 온 JSON 응답을 객체로 자동 역직렬화(Deserialization/Parsing)하여 제공하는 기능을 갖추고 있습니다.
5️⃣ 통신 전체 흐름 한눈에 보기
프론트엔드가 axios.post('/login', data)를 호출하면 어떤 일이 벌어질까요?
- 프론트: 데이터를 JSON으로 직렬화하여 HTTP 요청을 보냅니다.
- 네트워크: Method, URL, Body 등이 담긴 패킷이 서버로 전달됩니다.
- 서버: 요청을 받아 JSON을 역직렬화하고 비즈니스 로직을 처리합니다.
- 서버 응답: 결과 데이터와 상태 코드를 담아 다시 프론트로 보냅니다.
- 프론트: 응답받은 데이터를 역직렬화하여 화면에 렌더링합니다.
6️⃣ 에러 응답 구조 통일의 중요성
협업 시 서버에서 내려주는 에러 구조가 제각각이면 프론트엔드 코드는 매우 복잡해집니다.
- 문제 상황: 어떤 API는
{ "msg": "error" }, 어떤 API는{ "error_message": "error" }라고 준다면? - 해결 방안: 아래와 같이 에러 구조를 약속(규약)하는 것이 좋습니다.
{
"code": "AUTH_001",
"message": "로그인이 필요합니다."
}
이렇게 구조가 통일되면 공통 에러 처리 로직을 만들기 수월해지고, 사용자에게 일관된 UX를 제공할 수 있으며, 코드의 유지보수성도 비약적으로 향상됩니다.
🔚 마치며
오늘 정리한 HTTP 메서드, 상태 코드, 그리고 JSON 통신 흐름은 웹 개발의 뼈대와 같습니다. 이 기초가 탄탄해야 더 복잡한 비동기 처리나 상태 관리도 수월하게 해낼 수 있습니다.
