1. 오늘의 학습 목표
학습 목표: 웹 통신의 근간이 되는 HTTP 프로토콜의 동작 방식을 이해합니다. 클라이언트의 요청(Request)과 서버의 응답(Response) 메시지 구조를 설명할 수 있습니다.
핵심 요약: HTTP는 브라우저와 웹 서버가 서로 대화하기 위해 사용하는 공통 약속입니다.
2. 핵심 개념 파헤치기
2.1. HTTP/HTTPS란?
HTTP : 웹 브라우저(클라이언트)와 웹 서버 사이에 HTML 문서와 같은 리소스를 주고받기 위해 사용되는 통신 규약입니다. 쉽게 말해, "웹 페이지를 보여줘"라고 요청하고, "알았어, 여기 있어"라고 응답하는 정해진 규칙입니다.
HTTPS(Secure) : HTTP에 보안 계층(SSL/TLS)을 추가한 버전입니다. 모든 통신 내용이 암호화되기 때문에, 중간에 누군가 데이터를 가로채더라도 내용을 알 수 없어 더 안전합니다. 오늘날 대부분의 웹사이트는 HTTPS를 사용합니다.
2.2. 핵심 원리
요청(Request) 메시지 구조
시작 줄 (Start Line): 요청의 종류(예: GET), 요청할 리소스의 주소(예: /index.html), HTTP 버전으로 구성됩니다
헤더 (Headers): 요청에 대한 부가적인 정보(예: 브라우저 정보, 원하는 데이터 형식 등)를 담고 있습니다
본문 (Body): 서버에 데이터를 보낼 필요 있을 때 사용됩니다. (예: 로그인 폼 데이터) GET 요청은 보통 본문이 비어있습니다.
응답 (Response) 메시지 구조
상태 줄: HTTP 버전, 요청의 성공 여부를 나타내는 상태 코드(예: 200 OK), 상태를 설명하는 텍스트로 구성됩니다
헤더: 응답에 대한 부가적인 정보를 담고 있습니다.
본문: 실제 요청한 데이터로 HTML 문서나 이미지 파일 등이 담기는 부분입니다
3. 코드로 배우기
3.1. 구현 목표
JavaScript의 fetch API를 사용하여 웹 서버에 실제로 HTTP GET 요청을 보내고, 브라우저의 개발자 도구(F12) 네트워크 탭에서 요청과 응답 메시지를 직접 눈으로 확인합니다.
3.2. [1단계: 요청을 보낼 HTML 파일 작성]
HTTP 요청을 보내고 결과를 콘솔에 출력하기 위한 간단한 HTML 파일을 준비합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTTP Request Test</title>
</head>
<body>
<h1>Fetch API로 HTTP 요청 보내기</h1>
<p>F12를 눌러 개발자 도구의 콘솔과 네트워크 탭을 확인하세요.</p>
<script src="app.js"></script>
</body>
</html>
3.3. [2단계: JavaScript fetch로 GET 요청 보내기]
app.js 파일을 만들고, 공개된 테스트용 API인 JSONPlaceholder에 GET 요청을 보내는 코드를 작성합니다. fetch 함수는 HTTP 요청을 보내는 가장 현대적이고 간단한 방법입니다.
//app.js
const API_URL = '[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)';
//fetch 함수는 기본적으로 GET 요청을 보냅니다.
fetch(API_URL)
.then(response => response.json()) //서버 응답을 JSON 형태로 파싱합니다.
.then(data => {
console.log('서버로부터 받은 데이터:', data);
})
.catch(error => {
console.error('요청 실패:', error);
});4. 전체 코드
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>HTTP Request Test</title>
</head>
<body>
<h1>Fetch API로 HTTP 요청 보내기</h1>
<p>F12를 눌러 개발자 도구의 콘솔과 네트워크 탭을 확인하세요.</p>
<script>
//app.js
const API_URL = '[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)';
fetch(API_URL)
.then(response => response.json())
.then(data => {
console.log('서버로부터 받은 데이터:', data);
})
.catch(error => {
console.error('요청 실패:', error);
});
</script>
</body>
</html>'개발 > 웹 개발' 카테고리의 다른 글
| Day 6: HTML과 시맨틱 웹 (1) | 2024.08.02 |
|---|---|
| Day 5: CORS (Cross-Origin Resource Sharing) (1) | 2024.08.01 |
| Day 4: 동기 vs 비동기 (2) | 2024.07.31 |
| Day 3: REST API의 이해 (0) | 2024.07.29 |
| Day 1: 브라우저 렌더링 (DOM, CSSOM) (0) | 2024.07.25 |
