HTTP(하이퍼텍스트 전송 프로토콜)는 웹에서 데이터를 주고받기 위한 프로토콜로, 클라이언트와 서버 간의 통신을 담당합니다.
HTTP는 클라이언트와 서버 간의 요청과 응답으로 이루어진 클라이언트-서버 모델을 따릅니다. 클라이언트는 서버에 요청을 보내고, 서버는 해당 요청에 대한 응답을 제공합니다.
HTTP는 무상태 프로토콜로, 각각의 요청은 서버에 대한 이전 요청과 독립적으로 처리됩니다. 이전 요청에 대한 정보를 기억하지 않습니다. 이는 간단하고 확장 가능한 구조를 제공하지만, 상태를 관리하기 위해 추가적인 메커니즘이 필요한 경우가 있습니다.
HTTP는 텍스트 기반의 프로토콜로, 주로 HTML 문서 등을 전송하는 데 사용됩니다. 그러나 이론적으로는 어떠한 데이터 형식도 전송 가능하며, 헤더에 Content-Type을 명시하여 전송되는 데이터의 형식을 지정할 수 있습니다.
클라이언트는 서버에게 특정 동작을 수행하도록 요청하기 위해 HTTP 메소드를 사용합니다. 가장 일반적인 메소드에는 GET, POST, PUT, DELETE 등이 있습니다.
상태 코드:
서버는 각각의 응답에 상태 코드를 포함하여 요청의 결과를 나타냅니다. 상태 코드는 성공, 리다이렉션, 클라이언트 오류, 서버 오류 등을 나타냅니다. 예를 들어, 200은 성공, 404는 찾을 수 없음, 500은 서버 오류 등을 나타냅니다.
HTTP 요청과 응답은 헤더와 본문으로 구성됩니다. 헤더는 요청 또는 응답에 대한 메타데이터를 포함하며, 본문은 전송되는 데이터를 포함합니다.
HTTPS는 HTTP의 보안 버전으로, 데이터를 암호화하여 전송합니다. HTTPS는 보안 상의 이유로 로그인 정보, 결제 정보 등을 주고받을 때 매우 중요합니다.
HTTP는 REST(Representational State Transfer) 아키텍처 스타일을 기반으로 하는 웹 서비스를 구현하는 데 널리 사용됩니다. RESTful API는 각 리소스에 대한 고유한 URI를 사용하여 데이터를 조작하며, HTTP 메소드를 이용하여 CRUD(생성, 읽기, 갱신, 삭제) 연산을 수행합니다.
HTTP는 웹에서 가장 기본적이고 널리 사용되는 프로토콜 중 하나이며, 다양한 응용 분야에서 데이터 통신에 활용됩니다.
설명: 서버에서 특정 리소스의 데이터를 요청합니다.
예시: 웹 브라우저에서 웹 페이지를 로드할 때 사용됩니다.
javascript
Copy code
fetch("https://api.example.com/articles?id=123")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
설명: 서버에 데이터를 제출하고, 해당 데이터로 새로운 리소스를 생성합니다.
예시: 사용자가 로그인 정보를 서버에 전송할 때 사용됩니다.
javascript
Copy code
fetch("https://api.example.com/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username: "user123", password: "pass123" }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
설명: 서버에 특정 리소스를 업데이트합니다.
예시: 블로그 글을 업데이트할 때 사용됩니다.
javascript
Copy code
fetch("https://api.example.com/articles/123", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ title: "Updated Title", content: "Updated Content" }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
DELETE 메소드:
설명: 서버에서 특정 리소스를 삭제합니다.
예시: 사용자가 자신의 계정을 삭제할 때 사용됩니다.
javascript
Copy code
fetch("https://api.example.com/user/456", {
method: "DELETE",
})
.then(response => console.log('Deleted successfully'))
.catch(error => console.error('Error:', error));
PATCH 메소드:
설명: 리소스의 일부를 수정합니다. 일부 업데이트가 필요할 때 사용됩니다.
예시: 프로필 이미지를 변경할 때 사용됩니다.
javascript
Copy code
fetch("https://api.example.com/user/789", {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ profile_image: "new_image.jpg" }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
이렇게 fetch를 사용하여 각 HTTP 메소드를 처리할 수 있습니다. then 메소드를 사용하여 비동기적인 요청의 결과를 처리하고, catch를 사용하여 오류를 캐치할 수 있습니다.
설명: GET과 유사하지만, 실제 데이터 대신 헤더만을 반환합니다. 주로 리소스 변경 여부 확인에 사용됩니다.
예시: 이미지 파일이 업데이트되었는지 확인할 때 사용됩니다.
설명: 서버에서 지원하는 메소드들을 확인하기 위해 사용됩니다.
예시: 클라이언트가 특정 리소스에 대해 어떤 메소드를 사용할 수 있는지 확인할 때 사용됩니다.
설명: 서버로 보낸 요청이 어떻게 변화되는지 확인하기 위해 사용됩니다. 일반적으로 보안 문제로 인해 사용을 권장하지 않습니다.
예시: 디버깅 목적으로 사용될 수 있습니다.
설명: 프록시 서버를 통해 연결을 설정하기 위해 사용됩니다. 주로 TLS/SSL 연결을 설정하는 데 사용됩니다.
예시: 안전한 연결을 설정할 때 사용됩니다.
이러한 HTTP 메소드들은 각각의 목적과 의미를 가지고 있으며, 클라이언트와 서버 간의 효과적인 통신을 위해 적절한 메소드를 선택하는 것이 중요합니다.
// 1번
let num = 1;
// 2번
setTimeout(() => {
num = 2;
}, 0);
// 3번
num = 3;
// 4번
console.log(num);
3 이 출력됩니다
1번 num 을 선언하고 1로 초기화함
2번 setTimeout 함수는 비동기 함수로, request를 보내고 response가 오면 콜백함수를 실행하여 num = 2로 값을 다시 대입하는데 request를 보낸후 바로 콜백이 실행되지 않고 이후 남아 있는 코드를 실행하게 됩니다.
3번 num = 3 으로 값을 재할당합니다.
4번 console.log(num) 으로 num에 할당되어 있는 3의 값을 출력합니다.
그리고 그 이후 콜백함수가 실행되어 num변수에 2를 재할당합니다.
값을 확인하고 싶다면
setTimeout(() => {
num = 2;
console.log(num)
}, 0);
추가하여 확인이 가능합니다.