학습
JavaScript HTTP 요청 및 응답 이해
JavaScript HTTP 요청 및 응답 이해 — 중급
HTTP 요청 및 응답 이해
1. 도입 (왜 배워야 하는가)
HTTP는 웹의 기본 프로토콜로, 클라이언트(브라우저)와 서버 간의 데이터 통신을 담당합니다. 실무에서는 RESTful API를 통해 데이터를 주고받는 경우가 많으며, 이때 HTTP 요청과 응답의 이해는 필수적입니다. 만약 이 부분을 모른다면, 웹 애플리케이션을 제대로 개발하거나 디버깅하는 데 어려움을 겪을 수 있습니다. 예를 들어, 데이터가 왜 로드되지 않는지, 또는 서버에서 어떤 오류가 발생했는지를 이해하지 못하면 문제 해결에 큰 지장을 초래할 수 있습니다.
2. 핵심 개념 설명
HTTP 요청은 클라이언트가 서버에 보내는 메시지이며, HTTP 응답은 서버가 클라이언트의 요청에 대해 보내는 메시지입니다. 이를 이해하기 위해 다음과 같은 비유를 활용할 수 있습니다:
- HTTP 요청: 식당에서 음식을 주문하는 것과 같습니다. 고객이 서버(식당)에 주문을 요청합니다.
- HTTP 응답: 식당에서 고객에게 주문한 음식을 제공하는 것과 같습니다. 서버가 요청에 대한 응답으로 데이터를 제공합니다.
관련 용어 정리
| 용어 | 정의 |
|---|---|
| GET | 서버에서 데이터를 조회할 때 사용하는 요청 |
| POST | 서버에 데이터를 전송할 때 사용하는 요청 |
| PUT | 서버의 데이터를 수정할 때 사용하는 요청 |
| DELETE | 서버의 데이터를 삭제할 때 사용하는 요청 |
| 상태 코드 | 요청의 처리 결과를 나타내는 3자리 숫자 |
3. 기본 코드 예제
HTTP 요청을 만들기 위해 fetch API를 사용할 수 있습니다.
// GET 요청 예제
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('네트워크 응답이 좋지 않습니다.');
}
return response.json(); // JSON 형태로 변환
})
.then(data => console.log(data))
.catch(error => console.error('문제가 발생했습니다:', error));{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit..."
}- fetch 함수는 지정한 URL에 GET 요청을 보냅니다.
- .then(response => {...})에서 응답을 처리하며, response.ok로 요청이 성공했는지 확인합니다.
- response.json()는 응답을 JSON 형태로 변환합니다.
- 변환된 데이터는 다음 .then(data => console.log(data))에서 콘솔에 출력됩니다.
- .catch(error => console.error('문제가 발생했습니다:', error))는 오류 발생 시 메시지를 출력합니다.
4. 실전 활용 예제
1. 쇼핑몰에서 장바구니를 구현할 때
장바구니에 상품을 추가할 때 POST 요청을 사용할 수 있습니다.
// POST 요청 예제
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // 요청 방식
headers: {
'Content-Type': 'application/json', // 데이터 형식
},
body: JSON.stringify({
title: '새로운 상품',
price: 10000,
}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('문제가 발생했습니다:', error));2. 블로그에서 댓글 기능 추가할 때
댓글을 삭제할 때 DELETE 요청을 사용할 수 있습니다.
// DELETE 요청 예제
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE',
})
.then(() => console.log('댓글이 삭제되었습니다.'))
.catch(error => console.error('문제가 발생했습니다:', error));5. 흔한 실수와 주의사항
- 잘못된 코드:
fetch(url).then(response => response.json());- 올바른 코드:
fetch(url)
.then(response => {
if (!response.ok) throw new Error('네트워크 오류');
return response.json();
});- 잘못된 코드: GET 요청으로 데이터 전송 시도
fetch(url, {
method: 'GET',
body: JSON.stringify(data),
});- 올바른 코드: POST 요청으로 데이터 전송
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
});