[React] HTTP 프로토콜이란?

jiny·2025년 2월 7일

기술 면접 준비 리액트(React)

기술 면접

목록 보기

54/78

🗣️ HTTP 프로토콜에 대한 기본 개념과 동작 방식을 설명해주세요.

의도: 지원자가 HTTP 프로토콜의 기본 개념과 동작 방식을 이해하고 있는지 평가
팁
- HTTP의 정의와 주4요 특징을 설명하세요.
- HTTP 요청과 응답의 구조를 설명하세요.
- 상태 코드(200, 404, 500 등)의 의미를 언급하세요.
나의 답안

HTTP는 웹에서 클라이언트와 서버가 데이터를 주고받기 위해 사용하는 가장 기본적인 통신 프로토콜입니다.
브라우저(클라이언트)가 서버에 요청을 보내고, 서버가 이에 대한 응답을 반환하는 요청-응답 구조로 동작합니다.

사용자가 브라우저에서 URL을 입력하면 클라이언트는 서버로 HTTP 요청을 전송합니다.
이때 요청에는 메서드, 헤더, 필요한 경우 바디 등이 포함됩니다.
서버는 요청을 처리한 뒤 상태 코드, 응답 헤더, 그리고 콘텐츠를 담아 HTTP 응답을 보냅니다.
클라이언트는 이 응답을 받아 화면에 렌더링하거나 로직에 맞게 데이터를 처리합니다.

HTTP는 기본적으로 비연결성과 무상태성을 가지기 때문에, 각각의 요청은 독립적으로 처리되고 이전 요청과 연결되지 않습니다.
이 때문에 세션 유지나 인증 등을 위해 쿠키나 토큰 같은 별도의 메커니즘이 필요합니다.
주어진 답안 (모범 답안)

HTTP는 HyperText Transfer Protocol의 약자로, 웹 브라우저와 서버 간의 데이터 통신을 위한 프로토콜입니다.

HTTP 요청은 메서드, URL, 헤더, 바디로 구성되며, 응답은 상태 코드, 헤더, 바디로 구성됩니다.
상태 코드는 요청의 결과를 나타내며, 200은 성공, 404는 리소스를 찾을 수 없음, 500은 서버 오류를 의미합니다.

📝 개념 정리

🌟 HTTP란?

HTTP(HyperText Transfer Protocol, 하이퍼텍스트 전송 프로토콜)는 웹에서 클라이언트(브라우저)와 서버(Web Server) 간의 데이터 통신을 담당하는 프로토콜이다.
즉, 웹 페이지, 이미지, 동영상 등을 요청(Request)하고 응답(Response)받을 때 사용되는 규칙이다.

🌟 HTTP의 특징

클라이언트-서버 구조 (Client-Server Architecture)
- HTTP는 클라이언트(요청을 보내는 쪽)와 서버(요청을 처리하고 응답을 보내는 쪽) 간의 요청(Request)과 응답(Response) 방식으로 동작한다.
- 예: 사용자가 웹 브라우저에서 https://www.example.com 입력 → 서버가 웹 페이지 데이터를 응답

무상태성 (Stateless)
- HTTP는 각 요청 간의 상태를 저장하지 않는다. (독립적 요청 처리)
- 즉, 클라이언트가 요청을 보낼 때마다, 서버는 이전 요청 정보를 기억하지 않는다.
- 세션(Session)과 쿠키(Cookie) 또는 JWT 등을 활용하여 상태를 유지할 수 있다.

연결 지향적이지만 기본적으로 비연결성(Connectionless)
- 초기 HTTP는 비연결성(Connectionless) 특성을 가진다. → 요청 후 응답을 받으면 연결이 종료된다.
- 하지만 HTTP/1.1부터 Keep-Alive 옵션을 지원하여 연결을 유지할 수 있다. → 성능 향상

텍스트 기반의 프로토콜
- HTTP는 사람이 읽을 수 있는 텍스트 형식의 프로토콜을 사용한다. (예: 요청 헤더, 응답 헤더)

확장성이 높음
- HTTP는 다양한 데이터 포맷(JSON, XML, HTML, 이미지, 동영상 등)을 전송할 수 있다.
- 또한, 버전별로 성능과 보안이 개선되었다. (HTTP/1.1 → HTTP/2 → HTTP/3)

🌟 HTTP 동작 방식

HTTP는 요청(Request)과 응답(Response)으로 이루어진다.

요청(Request) 구조
클라이언트가 서버에 데이터를 요청할 때 HTTP 요청 메시지를 보낸다.

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

요청 요소	설명
HTTP 메서드	`GET`, `POST`, `PUT`, `DELETE` 등 요청의 동작을 정의
URI(Uniform Resource Identifier)	요청하는 리소스의 주소
HTTP 버전	사용되는 HTTP 버전 (`HTTP/1.1`, `HTTP/2`)
헤더(Header)	요청 관련 추가 정보 (`User-Agent`, `Accept`, `Authorization` 등)
본문(Body)	`POST`, `PUT` 요청 시 전송할 데이터

응답(Response) 구조
서버는 클라이언트의 요청에 대해 HTTP 응답 메시지를 반환한다.

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024

<html>...</html>

응답 요소	설명
HTTP 상태 코드	요청의 처리 결과 (`200 OK`, `404 Not Found` 등)
헤더(Header)	응답 관련 정보 (`Content-Type`, `Cache-Control` 등)
본문(Body)	실제 응답 데이터 (HTML, JSON, XML 등)

🌟 HTTP 메서드 (CRUD 연산과 매핑)

HTTP 메서드는 클라이언트가 서버에 요청하는 동작을 정의하는 역할을 한다.

HTTP 메서드	설명	예제
GET	리소스 조회	`GET /users/1`
POST	새로운 리소스 생성	`POST /users`
PUT	기존 리소스 전체 수정	`PUT /users/1`
PATCH	기존 리소스 부분 수정	`PATCH /users/1`
DELETE	리소스 삭제	`DELETE /users/1`

예: GET /products/10 요청 시, ID 10번 상품 데이터를 가져옴

🌟 HTTP 상태 코드 (Response Status Code)

서버가 클라이언트의 요청을 처리한 결과를 나타내는 3자리 숫자 코드이다.

1xx (정보)

코드 의미
100 Continue 요청을 계속 진행하라는 의미

코드	의미
100 Continue	요청을 계속 진행하라는 의미

2xx (성공)

코드 의미
200 OK 정상 처리됨
201 Created 새로운 리소스가 생성됨
204 No Content 요청 성공했지만 반환할 데이터 없음

코드	의미
200 OK	정상 처리됨
201 Created	새로운 리소스가 생성됨
204 No Content	요청 성공했지만 반환할 데이터 없음

3xx (리다이렉션)

코드 의미
301 Moved Permanently 영구적으로 이동함 (새로운 URL로 변경됨)
302 Found 일시적으로 다른 위치로 이동

코드	의미
301 Moved Permanently	영구적으로 이동함 (새로운 URL로 변경됨)
302 Found	일시적으로 다른 위치로 이동

4xx (클라이언트 오류)

코드 의미
400 Bad Request 요청이 잘못됨
401 Unauthorized 인증 필요
403 Forbidden 접근 거부됨
404 Not Found 요청한 리소스를 찾을 수 없음

코드	의미
400 Bad Request	요청이 잘못됨
401 Unauthorized	인증 필요
403 Forbidden	접근 거부됨
404 Not Found	요청한 리소스를 찾을 수 없음

5xx (서버 오류)

코드 의미
500 Internal Server Error 서버 내부 오류
503 Service Unavailable 서버가 현재 사용 불가능

코드	의미
500 Internal Server Error	서버 내부 오류
503 Service Unavailable	서버가 현재 사용 불가능

🌟 HTTP 버전별 차이점

버전	주요 특징
HTTP/1.0	단일 요청-응답, `Keep-Alive` 미지원
HTTP/1.1	지속 연결(`Keep-Alive`) 지원, 성능 개선
HTTP/2	멀티플렉싱(병렬 요청), 헤더 압축, 서버 푸시
HTTP/3	QUIC 프로토콜 기반, 속도와 보안 강화

🌟 HTTP 보안 (HTTPS)

HTTP vs. HTTPS
- HTTP: 데이터를 암호화하지 않음 → 중간자 공격(MITM, Man-in-the-Middle) 위험
- HTTPS: SSL/TLS 암호화 사용 → 데이터 보호 및 신뢰성 향상

HTTPS의 핵심 요소
- SSL/TLS 인증서: 보안 통신을 위한 암호화 키 제공
- 대칭키 암호화: 클라이언트-서버 간 데이터 암호화
- 공개키 기반(PKI): 신뢰할 수 있는 인증 기관(CA)이 인증서를 발급

🌟 HTTP 캐싱 (Cache Control)

HTTP 요청 시 불필요한 데이터 재전송을 막기 위해 캐싱(Cache)을 사용한다.
Cache-Control, ETag, Expires 등을 활용한다.
주요 캐싱 헤더

헤더 설명
Cache-Control max-age=3600 → 1시간 동안 캐시 유지
ETag 데이터 변경 여부 체크
Expires 캐시 만료 날짜 설정

헤더	설명
Cache-Control	`max-age=3600` → 1시간 동안 캐시 유지
ETag	데이터 변경 여부 체크
Expires	캐시 만료 날짜 설정

🌟 HTTP 요청 예제

다음은 자바스크립트 fetch API를 사용한 HTTP 요청 예제이다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error: ", error));