HTTP 프로토콜

17. HTTP 프로토콜에 대한 기본 개념과 동작 방식을 이해합니다.
    • 답변)
      • 의도:
        • HTTP 프로토콜의 기본 개념과 동작 방식 이해도 평가.
      • 팁:
        • HTTP의 정의와 주요 특징 설명.
        • HTTP 요청과 응답의 구조 설명.
        • 상태 코드(200, 404, 500 등)의 의미 언급.
      • 모범답안:
        • HTTP는 Hypertext Transfer Protocol의 약자로, 웹 브라우저와 서버 간의 데이터 통신을 위한 프로토콜이다.
        • HTTP 요청은 메서드, URL, 헤더, 바디로 구성되며,
          응답은 상태 코드, 헤더, 바디로 구성된다.
        • 상태 코드는 요청의 결과를 나타내며, 200은 성공, 404는 리소스를 찾을 수 없음, 500은 서버 오류를 의미한다.

---

HTTP 메서드

🖥️ javascript
// Axios 예시
// 조회
axios.get('/users');
// 생성
axios.post('/users', { name: 'John', email: 'john@example.com' });
// 수정
axios.put('/users/123', { name: 'John Updated' });
// 삭제
axios.delete('/users/123');

➕ 추가 HTTP 메서드

PATCH : PUT과 달리 리소스의 일부분만 수정할 때 사용

🖥️ javascript
// 특정 필드만 업데이트
axios.patch('/users/123', { name: 'John' }); // 이름만 수정

HEAD : GET과 동일하지만 응답 본문을 제외한 헤더만 요청

🖥️ javascript

axios.head('/users'); // 헤더 정보만 확인

OPTIONS : 서버가 지원하는 메서드 종류를 확인

🖥️ javascript

axios.options('/users'); // CORS 프리플라이트 요청 등에 사용

---

HTTP 헤더의 주요 종류

요청 헤더

🖥️ javascript

const config = {
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer token123',
    'Cache-Control': 'no-cache',
    'User-Agent': 'Mozilla/5.0...',
    'Origin': 'https://example.com',
    'If-Match': 'etag123',
    'If-None-Match': 'etag123'
  }
};

응답 헤더

🖥️ javascript

{
  'Access-Control-Allow-Origin': '*',
  'Cache-Control': 'max-age=3600',
  'ETag': 'abc123',
  'Last-Modified': 'Wed, 21 Oct 2015 07:28:00 GMT',
  'Set-Cookie': 'sessionId=abc123; Secure; HttpOnly'
}

---

상태 코드

• 200 : 성공
• 201 : 생성 성공

리다이렉션 (3xx)

• 301 : 영구 이동
• 302 : 임시 이동
• 304 : 수정되지 않음 (캐시 사용)

클라이언트 에러 (4xx)

• 400 : 잘못된 요청
• 401 : 인증 필요
• 403 : 권한 없음
• 404 : 리소스 없음
• 405 : 허용되지 않은 메서드
• 406 : 허용되지 않은 형식
• 409 : 리소스 충돌
• 429 : 요청이 너무 많음

• 500 : 서버 에러

---

HTTP 통신 특징

무상태성(Stateless)

🖥️ javascript

// 매 요청마다 인증 정보를 포함해야 함
axios.get('/api/data', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

비연결성(Connectionless)

🖥️ javascript

// Keep-Alive 헤더로 연결 유지 가능
const config = {
  headers: {
    'Connection': 'keep-alive'
  }
};

---

보안 관련 헤더

🖥️ javascript

{
  'Strict-Transport-Security': 'max-age=31536000',
  'X-Content-Type-Options': 'nosniff',
  'X-Frame-Options': 'DENY',
  'X-XSS-Protection': '1; mode=block',
  'Content-Security-Policy': "default-src 'self'"
}

캐시 제어

🖥️ javascript

// 클라이언트 측 캐시 설정
axios.get('/api/data', {
  headers: {
    'Cache-Control': 'max-age=3600',
    'If-None-Match': 'etag123'
  }
});

에러 응답 구조 예시

🖥️ javascript

{
  status: 400,
  error: {
    code: 'VALIDATION_ERROR',
    message: '유효하지 않은 입력입니다.',
    details: {
      field: 'email',
      reason: '이메일 형식이 올바르지 않습니다.'
    }
  }
}

---

요청 형식

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer token123

{
    "name": "John",
    "age": 30
}

응답 형식

HTTP/1.1 200 OK
Content-Type: application/json
Date: Mon, 06 Jan 2025 12:00:00 GMT

{
    "id": 1,
    "name": "John",
    "age": 30
}