웹 개발 기초: HTTP와 웹 브라우저 동작 원리
웹 개발을 처음 배우는 사람이라면 HTTP, URL, 브라우저의 역할과 같은 기본 개념을 이해하는 것이 중요합니다. 이 글에서는 웹 개발 기초 개념을 쉽게 정리하여 설명하겠습니다.
1. URL (Uniform Resource Locator)
웹 자원의 위치 지정
URL은 웹에서 특정 자원의 위치를 나타내는 주소입니다.
URL의 구성 요소
https://[github-username].github.io/[repository-name]/- 프로토콜 (Protocol):
http또는https(보안 계층 추가 여부에 따라 결정) - 서브도메인 (Subdomain):
github-username - 도메인 (Domain):
github.io - 서브디렉토리 (Subdirectory):
repository-name
HTTP vs. HTTPS
- HTTP: 데이터를 암호화하지 않고 전송 → 보안 취약 ❌
- HTTPS: HTTP에 보안 계층이 추가되어 데이터를 암호화하여 안전성과 무결성을 보장 ✅
2. HTTP 메서드
웹에서 데이터를 주고받을 때 사용하는 주요 HTTP 메서드는 다음과 같습니다:
- GET: 데이터를 검색 (예: 웹페이지 요청)
- POST: 데이터를 서버로 보내고 리소스를 생성 (예: 회원가입)
- PUT: 데이터를 업데이트 (예: 회원정보 수정)
- DELETE: 데이터를 삭제 (예: 회원 탈퇴)
이 메서드를 통해 서버와 클라이언트가 데이터를 주고받습니다.
3. HTTP 헤더
요청 헤더 (Request Headers)
- User-Agent: 클라이언트의 브라우저 및 운영체제 정보
- Accept: 클라이언트가 수용할 수 있는 콘텐츠 유형
- Authorization: 인증 토큰 또는 크리덴셜
응답 헤더 (Response Headers)
- Content-Type: 반환되는 콘텐츠의 유형 (예:
text/html,application/json) - Content-Length: 콘텐츠의 길이
- Set-Cookie: 쿠키 설정 정보
이러한 헤더를 활용하여 클라이언트와 서버 간 통신을 원활하게 합니다.
4. HTTP 본문 (Body)
클라이언트가 서버로 보내는 데이터는 본문(Body) 에 포함될 수 있습니다.
- GET 요청: 보통 본문을 포함하지 않으며, URL을 통해 데이터를 전달
- POST, PUT 요청: 데이터를 추가 또는 업데이트할 때 사용 (폼 데이터, JSON 형식 등)
5. 상태 코드 (Status Codes)
HTTP 응답 상태 코드는 서버가 클라이언트의 요청을 어떻게 처리했는지 알려줍니다.
성공 응답 (2xx)
200 OK: 정상 처리201 Created: 새 리소스 생성됨204 No Content: 내용 없음 (예: 삭제 요청 성공 시)
클라이언트 에러 응답 (4xx)
400 Bad Request: 잘못된 요청401 Unauthorized: 인증 실패403 Forbidden: 접근 거부404 Not Found: 리소스를 찾을 수 없음
서버 에러 응답 (5xx)
500 Internal Server Error: 서버 내부 오류501 Not Implemented: 지원되지 않는 기능502 Bad Gateway: 게이트웨이 오류
6. 브라우저의 역할
웹 브라우저는 서버와의 통신을 통해 웹페이지를 표시하는 중요한 역할을 합니다.
브라우저가 수행하는 과정
- 서버에 요청을 보냄 (HTTP 요청)
- 서버에서 필요한 파일을 받아옴 (HTML, CSS, JavaScript 등)
- HTML을 파싱(읽고 구조화)
- CSS를 파싱하여 디자인 적용
- HTML과 CSS 정보를 합쳐 화면에 렌더링 (출력)
- 이후 JavaScript 실행 및 동적 요소 로딩
브라우저는 이러한 과정을 자동으로 수행하며, 개발자 도구(DevTools)를 통해 요청/응답 확인, 디버깅, 성능 최적화 등의 작업을 할 수 있습니다.
마무리 및 추가 학습 자료
이 글에서는 웹 개발의 기초 개념인 URL, HTTP 메서드, 헤더, 본문, 상태 코드, 그리고 브라우저의 동작 과정을 설명했습니다.
