목차
2. HTTP의 특징
3. HTTP 상태 코드
4. HTTP 통신 방법의 종류
GET, POST, PUT, PATCH, DELETE
→ 용도, 특징, 적용예시, 코드 예시
프론트엔드에서 서버에 데이터를 요청하는 것은 웹 애플리케이션을 개발할 때는 물론 백엔드와의 협업을 위해서도 매우 중요한 부분이다.
이를 이해하기 위해서 먼저 프로토콜과 기본적인 통신 방법에 대해서 알아보자!
1. 'HTTP' (HyperText Transfer Protocol : 하이퍼텍스트 전송 프로토콜)
HTTP 는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다.
프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식 (데이터의 형식)을 정의하는 규칙 체계의 집합이다.
즉, HTTP는 HTML 문서와 같은 리소스 들을 가져올 수 있게 하는 데이터 형식 규칙 같은 것이다.
HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도하다.
클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미한다.
HTTP는 주로 클라이언트와 웹 서버 간의 통신에 사용된다.
웹 브라우저와 서버들은 개별적인 메시지 교환에 의해 통신한다.
보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며,
그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부른다.
(클라이언트가 요청하면, 서버가 응답해준다!)
이를테면, 웹 페이지를 열거나 데이터를 전송하는 등의 작업이 모두 HTTP 프로토콜을 통해 이루어진다.
주로 HTML 문서, 이미지, 비디오, 스크립트 및 기타 리소스를 전송하는 데에 사용된다.
2. HTTP의 특징
1. Stateless (무상태성)
HTTP는 무상태 프로토콜이다. 이는 서버가 클라이언트의 이전 요청이나 상태를 기억하지 않음을 의미한다. 각 요청은 독립적이며, 이전 요청과 상관없이 처리된다. 이러한 특징은 서버의 부하를 줄이고 확장성을 높이는 데 도움이 된다.
2. Connectionless (연결 끊김)
HTTP는 기본적으로 연결 지향적이지 않다. 클라이언트가 서버에 요청을 보내면 서버는 응답을 보내고 연결을 끊는다. 이후 클라이언트가 새로운 요청을 보낼 때마다 새로운 연결이 맺어진다.
3. Request-Response Model (요청-응답 모델)
HTTP는 클라이언트와 서버 간의 요청-응답 모델을 따른다. 클라이언트가 서버에 요청을 보내면 서버는 해당 요청을 처리하고 응답을 반환한다.
3. HTTP 상태 코드
HTTP 상태 코드는 서버가 클라이언트의 요청을 처리한 결과를 나타내는 코드이다. 이는 클라이언트에게 요청의 성공 여부와 그 외 필요한 처리 정보를 효과적으로 전달하는 역할을 한다. 이 코드들은 아래와 같이 다섯 가지 주요 카테고리로 분류된다.
1xx (정보 응답)
100 Continue: 클라이언트가 요청의 나머지 부분을 계속 보내야 함
101 Switching Protocols: 서버가 클라이언트의 요청에 따라 프로토콜을 변경하기로 승인했음
2xx (성공)
200 OK: 요청이 성공적으로 처리되었음
201 Created: 요청이 성공적으로 처리되었으며 새로운 리소스가 생성되었음
202 Accepted: 요청이 접수되었지만 아직 처리되지 않았음
204 No Content: 요청은 성공적이지만 전송할 콘텐츠가 없음
3xx (리다이렉션)
301 Moved Permanently: 요청한 리소스가 새 위치로 영구적으로 이동되었음
302 Found: 요청한 리소스가 일시적으로 다른 URI로 이동했음
304 Not Modified: 캐시된 리소스가 여전히 유효하다는 것을 나타내어, 클라이언트가 캐시된 데이터를 재사용할 수 있음
4xx (클라이언트 오류)
400 Bad Request: 서버가 요청을 이해하지 못함
401 Unauthorized: 요청이 인증을 필요로 함
403 Forbidden: 서버가 요청을 이해했으나 그 요청을 거부하고 있음
404 Not Found: 서버가 요청한 리소스를 찾을 수 없음
408 Request Timeout: 클라이언트가 요청을 시작한 후 서버가 요청을 기다리는 시간이 길어진 경우
5xx (서버 오류)
500 Internal Server Error: 서버에 문제가 있으며 요청을 처리할 수 없음
501 Not Implemented: 서버가 요청 메서드를 지원하지 않음
502 Bad Gateway: 서버가 게이트웨이로 작동 중 문제가 발생했음
503 Service Unavailable: 서버가 일시적으로 요청을 처리할 수 없음. (대개는 서버 과부하나 유지보수로 인한 것)
504 Gateway Timeout: 게이트웨이로 작동하는 서버가 다른 서버로부터 응답을 받지 못했을 때
4. HTTP 통신 방법의 종류
HTTP에는 여러 메서드가 있지만, 주로 아래의 5가지 메서드를 사용하여 통신한다.
1. GET : 리소스를 클라이언트로 가져다줘!
2. POST : 새로 생성된 리소스를 서버로 보낼거야! ("추가"의 의미)
3. PUT : 리소스를 완전히 수정해서 서버로 보낼거야! (전체 갈아엎기, "대체"의 의미)
4. PATCH : 리소스를 일부만 수정해서 서버로 보낼거야! (일부만 수정)
5. DELTE : 리소스를 삭제해줘!
GET 메서드
용도
주로 데이터를 요청하고 가져올 때 사용된다. 요청한 리소스에 대한 정보를 요청한다. 예를 들어, 웹 페이지를 요청하거나 검색 결과를 요청할 때 사용된다.
적용 예시
- 웹 페이지 불러오기 : 웹 브라우저에서 URL을 입력하거나 링크를 클릭할 때, 브라우저는 해당 URL에 대한 GET 요청을 서버에 보내고, 서버는 요청받은 웹 페이지의 HTML, CSS, JavaScript 파일 등을 응답으로 보낸다.
- 데이터 조회 : 데이터베이스에서 특정 정보를 검색할 때 사용한다. 예를 들어, 특정 사용자의 상세 정보나 블로그 게시글의 목록 등을 요청할 때 사용한다.
- 이미지나 다른 파일 검색 : 서버에 저장된 이미지, 동영상, 문서 등의 파일을 GET 요청으로 검색하고 클라이언트에 전달할 수 있다.
- API 데이터 요청 : 외부 API를 통해 데이터를 검색할 때 GET 요청을 사용한다. 예를 들어, 날씨 정보, 주식 시세, 영화 데이터 등 외부 데이터를 API를 통해 요청하고 응답을 받는다.
특징
- 요청된 데이터는 URL의 쿼리 문자열(query string)에 포함될 수 있다.
- GET 요청은 브라우저 히스토리에 남으며, 캐싱될 수 있다.
- GET 요청은 보안적으로 민감한 데이터(예: 비밀번호)를 전송하는 데 사용되지 않아야 한다.
코드 예시
fetch('https://api.example.com/data?param1=value1¶m2=value2')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
<설명>
1. fetch('https://api.example.com/data?param1=value1¶m2=value2) : fetch 함수를 사용하여 지정된 URL에 GET 요청을 보낸다. 이 URL은 'https://api.example.com/data'이며, 쿼리 매개변수로 'param1=value1'과 'param2=value2'가 포함되어 있다. 이렇게 요청을 보내면 서버에 특정한 데이터를 요청할 수 있다.
2. .then(response => response.json()) : 요청에 대한 응답을 받으면, response.json()을 호출하여 응답 본문을 JSON 형식으로 파싱한다. 이렇게 함으로써 서버에서 반환된 JSON 데이터를 JavaScript 객체로 변환한다.
3. .then(data => { console.log(data); }) : 이 부분은 서버에서 받은 데이터를 활용하여 원하는 작업을 수행하는 부분이다. JSON 데이터가 성공적으로 파싱되면, 해당 데이터를 변수 data에 저장하고, 콘솔에 출력한다.
4. .catch(error => { console.error('Error:', error); }) : 요청이 실패하거나 오류가 발생했을 때, 이 부분이 실행된다. error 매개변수는 요청 실패에 대한 정보를 포함하고 있다. 이 부분은 요청이 실패한 경우에 오류 메시지를 콘솔에 출력한다.
즉, 위의 코드는 'https://api.example.com/data'로 GET 요청을 보내고, 응답된 JSON 데이터를 파싱하여 JavaScript 객체로 변환한 후에 콘솔에 출력하는 것을 수행한다. 요청이 실패한 경우에는 오류 메시지를 콘솔에 출력한다.
POST 메서드
용도
POST 메서드는 서버로 데이터를 제출하는 데 사용된다. 이 메서드는 요청 본문(body)에 데이터를 포함하여 서버에 보낸다. POST 요청은 주로 서버에 새로운 리소스를 생성할 때, 또는 클라이언트로 돌려 보낼 임시 문서를 생성하기 위해 사용된다.
적용 예시
- 사용자 등록 : 새로운 사용자가 웹사이트에 가입할 때, 사용자의 이름, 이메일, 비밀번호 등의 정보를 서버에 보내 새로운 사용자 프로필을 생성한다.
- 게시글 작성 : 사용자가 블로그나 포럼에 새 게시글을 작성할 때, 게시글의 제목, 내용, 작성자 정보 등을 서버에 보내 새로운 게시글을 생성한다.
- 댓글 작성 : 특정 게시글에 댓글을 추가할 때 사용한다. 댓글 내용과 관련 게시글의 ID를 서버에 보내 새로운 댓글 리소스를 생성한다.
- 데이터 파일 업로드 : 사용자가 이미지, 동영상, 문서 등의 파일을 서버에 업로드할 때 사용한다. 파일 데이터를 멀티파트 폼 데이터로 서버에 전송하여 저장한다.
특징
- 비멱등성 : 같은 데이터로 여러 번 요청하면 동일한 데이터의 여러 인스턴스가 생성될 수 있다.
- 데이터를 요청 본문에 포함하기 때문에 GET보다 보안적으로 더 안전하다.
- 브라우저 히스토리에 남지 않는다.
- 일반적으로 GET보다 더 많은 데이터를 전송할 수 있다.
코드 예시
fetch('https://api.example.com/submit', {
method: 'POST',
body: JSON.stringify({ key: 'value' }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
<설명>
1. fetch('https://api.example.com/submit', { method: 'POST', body: JSON.stringify({ key: 'value' }), headers: { 'Content-Type': 'application/json' } }) : fetch 함수를 사용하여 'https://api.example.com/submit'에 POST 요청을 보낸다. 이 때, 두 번째 매개변수로 옵션 객체를 전달하여 요청을 구성한다.
이 객체에는 method 속성을 사용하여 요청 메서드를 'POST'로 설정하고,
body 속성을 사용하여 요청 본문에 보낼 데이터를 JSON 형식으로 변환한 후에 설정한다. 예시에서는 객체 { key: 'value' }를 JSON 문자열로 변환하여 설정하고 있다.
또한 headers 속성을 사용하여 요청 헤더를 설정한다. 여기서는 'Content-Type' 헤더를 'application/json'으로 설정하여 요청 본문이 JSON 형식임을 명시하고 있다. 이렇게함으로써 서버로 JSON 형식의 데이터를 전송한다.
2. .then(response => response.json()) : 요청에 대한 응답을 받으면, response.json()을 호출하여 응답 본문을 JSON 형식으로 파싱한다. 이렇게 함으로써 서버에서 반환된 JSON 데이터를 JavaScript 객체로 변환한다.
3. .then(data => { console.log(data); }) : 이 부분은 서버에서 받은 데이터를 활용하여 원하는 작업을 수행하는 부분이다. JSON 데이터가 성공적으로 파싱되면, 해당 데이터를 변수 data에 저장하고, 콘솔에 출력한다.
4. catch(error => { console.error('Error:', error); }) : 요청이 실패하거나 오류가 발생했을 때, 이 부분이 실행된다. error 매개변수는 요청 실패에 대한 정보를 포함하고 있다. 이 부분은 요청이 실패한 경우에 오류 메시지를 콘솔에 출력한다.
요약하면, 위의 코드는 'https://api.example.com/submit'로 POST 요청을 보내고, 응답된 JSON 데이터를 파싱하여 JavaScript 객체로 변환한 후에 콘솔에 출력하는 것을 수행한다. 요청이 실패한 경우에는 오류 메시지를 콘솔에 출력한다.
PUT 메서드
용도
기존 리소스를 완전히 대체하기 위해 사용한다.
* 리소스가 존재하지 않는 경우라면? → 새 리소스를 생성한다.
* 리소스가 이미 존재한다면? → 그 리소스는 요청의 본문 데이터로 갱신(대체)된다.
서버에 제공된 데이터로 해당 리소스를 전체적으로 업데이트한다.
적용 예시
- 사용자의 프로필 업데이트 : 사용자 ID가 주어지고 사용자의 이름, 이메일, 주소 등 모든 정보를 변경해야 할 때 사용된다.
- 파일 교체 : 서버에 저장된 특정 파일을 새 내용으로 완전히 교체할 때 사용할 수 있다. 예를 들어, 서버에 저장된 설정 파일이나 문서를 새 버전으로 업데이트하고자 할 때 사용된다.
- 블로그 포스트 수정 : 게시글의 제목, 내용, 태그 등 모든 정보를 새로운 데이터로 갱신할 필요가 있을 때 적합하다.
특징
- 멱등성 : 같은 PUT 요청을 여러번 수행해도 동일한 결과를 반환한다. (참고: POST는 비멱등)
- 리소스 전체를 업데이트 : 리소스의 일부만 변경하는 것이 아니라, 전체를 새로운 데이터로 교체한다.
- PUT 메서드의 사용은 전체 리소스를 대체하는 행위와 관련되어 있으므로, 부분적인 데이터 변경이 필요할 때는 PATCH 메서드가 더 적합할 수 있다. PUT을 사용할 때는 클라이언트가 리소스의 전체 상태를 서버로 전송하므로, 변경하고자 하는 모든 데이터를 포함시켜야 한다.
코드 예시 (사용자 프로필 업데이트)
// 사용자 데이터 정의
const userData = {
name: "John Doe",
email: "johndoe@example.com",
address: "1234 Broadway St, New York"
};
// Fetch API를 사용하여 PUT 요청 보내기
fetch('https://example.com/users/123', {
method: 'PUT', // HTTP 메서드 설정
headers: {
'Content-Type': 'application/json' // 요청 본문이 JSON 형식임을 명시
},
body: JSON.stringify(userData) // JavaScript 객체를 JSON 문자열로 변환
})
.then(response => {
if (response.ok) {
return response.json(); // 서버로부터 반환된 데이터를 JSON 형식으로 파싱
} else {
throw new Error('Something went wrong on server side'); // 서버 오류 처리
}
})
.then(data => {
console.log('Success:', data); // 성공적으로 데이터를 업데이트하고 반환된 데이터를 출력
})
.catch(error => {
console.error('Error:', error); // 오류 발생 시 콘솔에 오류 메시지 출력
});
<설명>
1. HTTP 메서드: PUT을 사용하여 기존 리소스를 주어진 데이터로 완전히 대체한다.
2. Headers: 요청의 Content-Type을 application/json으로 설정하여, 전송되는 데이터가 JSON 형식임을 서버에 알린다.
3. Body: JSON.stringify()를 사용하여 JavaScript 객체를 JSON 문자열로 변환하고, 이를 요청의 본문으로 전송한다.
4. Response Handling: response.ok를 통해 응답이 성공적인지 확인하고, 성공적인 경우 응답 본문을 JSON으로 변환하여 처리한다. 실패한 경우에는 에러를 발생시키고 이를 캐치한다.
PATCH 메서드
용도
기존 리소스의 일부만 수정하기 위해 사용한다. 이 메서드는 PUT 메서드와 비슷하지만, 주요 차이점은 PATCH가 리소스의 전체 대체가 아닌 일부분만 변경한다는 점이다. 이로 인해 PATCH는 특히 큰 리소스나 대역폭이 제한적인 환경에서 효율적이다.
적용 예시
- 사용자의 프로필의 특정 필드 수정 : 사용자 프로필에서 전화번호나 주소와 같은 특정 정보만 변경할 경우 PATCH 메서드를 사용한다. 이는 전체 프로필을 다시 보내지 않고도 소량의 데이터만으로 업데이트를 완료할 수 있게 해준다.
- 설정 옵션 변경 : 시스템 설정이나 애플리케이션 설정의 특정 부분을 동적으로 조정할 때 사용될 수 있다. 예를 들어, 사용자 설정에서 알림을 활성화하거나 비활성화하는 간단한 수정에 사용된다.
- 재고 수량 업데이트 : 상점의 상품 재고 수량을 업데이트하는 작업에 PATCH 메서드를 사용할 수 있다. 특정 상품의 재고만 조정할 필요가 있을 때 유용하다.
특징
- 비멱등성 : 여러번 요청할 경우 결과가 달라질 수 있다.
- 리소스의 일부를 업데이트 : PATCH 메서드는 리소스의 특정 부분만을 변경하므로, API 설계에서 리소스를 효율적으로 관리하고자 할 때 유용하게 사용된다.
- 다만, 클라이언트는 변경하고자 하는 부분의 정확한 정보만을 전송해야 하며, 이로 인해 구현이 복잡해질 수도 있다.
코드 예시 (사용자의 이메일 주소만 업데이트)
// 업데이트할 이메일 데이터 정의
const emailUpdate = {
email: "newemail@example.com"
};
// Fetch API를 사용하여 PATCH 요청 보내기
fetch('https://example.com/users/123', {
method: 'PATCH', // HTTP 메서드 설정
headers: {
'Content-Type': 'application/json' // 요청 본문이 JSON 형식임을 명시
},
body: JSON.stringify(emailUpdate) // JavaScript 객체를 JSON 문자열로 변환
})
.then(response => {
if (response.ok) {
return response.json(); // 서버로부터 반환된 데이터를 JSON 형식으로 파싱
} else {
throw new Error('Something went wrong on server side'); // 서버 오류 처리
}
})
.then(data => {
console.log('Success:', data); // 성공적으로 데이터를 업데이트하고 반환된 데이터를 출력
})
.catch(error => {
console.error('Error:', error); // 오류 발생 시 콘솔에 오류 메시지 출력
});
<설명>
1. HTTP 메서드: PATCH을 사용하여 기존 리소스의 일부분만 수정한다.
2. Headers: 요청의 Content-Type을 application/json으로 설정하여, 전송되는 데이터가 JSON 형식임을 서버에 알린다.
3. Body: JSON.stringify()를 사용하여 JavaScript 객체를 JSON 문자열로 변환하고, 이를 요청의 본문으로 전송한다.
4. Response Handling: response.ok를 통해 응답이 성공적인지 확인하고, 성공적인 경우 응답 본문을 JSON으로 변환하여 처리한다. 실패한 경우에는 에러를 발생시키고 이를 캐치한다.
DELETE 메서드
용도
리소스를 삭제하기 위해 사용한다.
이 메서드의 주된 목적은 클라이언트가 서버에게 특정 URI에 있는 리소스를 제거하도록 요청하는 것이다.
적용 예시
- 사용자의 계정 삭제: 사용자가 자신의 계정을 삭제하고 싶어 할 때, DELETE 메서드를 사용하여 해당 사용자의 데이터를 데이터베이스에서 완전히 삭제할 수 있다.
- 게시글 삭제 : 사용자가 게시한 글이나 댓글을 삭제할 때 사용된다. 이는 컨텐츠 관리 시스템에서 일반적으로 사용되는 기능이다.
- 세션 또는 토큰 무효화 : 사용자가 로그아웃할 때, 서버에 저장된 세션 또는 인증 토큰을 삭제하기 위해 DELETE 메서드를 사용할 수 있다.
특징
- 멱등성: 리소스를 삭제한 후에 동일한 DELETE 요청을 다시 수행해도 결과가 변하지 않는다.
- 리소스 삭제: 특정 리소스를 서버에서 완전히 삭제할 때 사용된다. 이는 사용자 데이터, 게시물, 파일 등의 데이터를 완전히 제거하는 데 쓰인다.
- 데이터 관리: 데이터의 생명 주기를 관리하며, 더 이상 필요하지 않거나 유효하지 않은 데이터를 정리하는 데 사용된다.
코드 예시 (사용자 계정 삭제 )
// Fetch API를 사용하여 DELETE 요청 보내기
fetch('https://example.com/users/123', {
method: 'DELETE' // HTTP 메서드 설정
})
.then(response => {
if (response.ok) {
return response.text(); // 성공적인 삭제를 확인하는 응답 텍스트를 받아옴
} else {
throw new Error('Failed to delete the user.'); // 삭제 실패 시 오류 처리
}
})
.then(data => {
console.log('Success:', data); // 성공적으로 삭제되었음을 콘솔에 출력
})
.catch(error => {
console.error('Error:', error); // 오류 발생 시 콘솔에 오류 메시지 출력
});
<설명>
1. HTTP 메서드: DELETE를 사용하여 서버에 지정된 리소스(여기서는 특정 사용자)의 삭제를 요청한다.
2. 응답 처리: 요청이 성공했는지 확인하기 위해 response.ok를 확인한다. 성공적인 경우, 서버로부터의 응답 텍스트를 반환하고, 실패한 경우 오류를 발생시킨다.
3. 결과 출력: 삭제 작업이 성공했을 때와 실패했을 때의 처리를 .then() 및 .catch()를 통해 관리한다.
'Languages > JavaScript' 카테고리의 다른 글
| [JavaScript] 프로토타입 (Prototype) (3) | 2024.08.30 |
|---|---|
| [JavaScript] 클래스 정적 메서드와 정적 프로퍼티 (0) | 2024.03.20 |
| [JavaScript] 클래스 상속을 이용한 확장(extends) (0) | 2024.03.19 |
| [JavaScript] 클래스 (Class) (3) | 2024.03.19 |
| [JavaScript] 생성자 함수 (new 연산자, 인스턴스) 쉽게 이해해보기 (0) | 2024.03.03 |
