1일 1CS(Computer Science)

HTTP란 무엇인지 설명해 주세요.

표자 2025. 6. 4. 09:57

🤔 HTTP가 뭐죠?

카페에서 주문하는 과정을 생각해보세요! ☕

  • 손님(클라이언트): "아메리카노 한 잔 주세요!"
  • 바리스타(서버): "네, 여기 아메리카노입니다!"

HTTP(Hypertext Transfer Protocol)는 웹에서 브라우저와 서버가 데이터를 주고받는 약속된 방식입니다.

📱 React에서 HTTP 사용 예시

// React에서 데이터 가져오기
const fetchUsers = async () => {
  try {
    const response = await fetch('/api/users');
    const users = await response.json();
    setUsers(users);
  } catch (error) {
    console.error('데이터 가져오기 실패:', error);
  }
};

🔄 HTTP의 특징들

1️⃣ 비연결성 (Stateless)

  • 한 번 요청-응답하면 연결 끊어짐
  • 마치 택시 타고 목적지 도착하면 내리는 것처럼! 🚕
  • 서버는 이전 요청을 기억하지 않음

2️⃣ 요청-응답 구조

  • 클라이언트가 먼저 요청해야 서버가 응답
  • 서버가 먼저 데이터를 보낼 수 없음

3️⃣ 다양한 데이터 형식 지원

  • HTML, JSON, 이미지, 비디오 등 모든 걸 전송 가능

📋 HTTP 메서드들

GET - 데이터 가져오기 📥

// Next.js API 예시
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: '데이터 조회 성공!' });
  }
}

POST - 데이터 생성 ✨

// 새 글 작성
const createPost = async (postData) => {
  const response = await fetch('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(postData)
  });
};

PUT - 데이터 수정 ✏️

DELETE - 데이터 삭제 🗑️

🔐 HTTP vs HTTPS

HTTP 🔓

  • 데이터가 그대로 전송
  • 누구나 중간에 볼 수 있음
  • 개발할 때만 사용

HTTPS 🔒

  • 데이터를 암호화해서 전송
  • 중간에 가로채도 읽을 수 없음
  • 실제 서비스에서는 필수!

📊 상태 코드 알아보기

2xx - 성공! 🎉

  • 200: 요청 성공
  • 201: 생성 성공

4xx - 클라이언트 실수 😅

  • 400: 잘못된 요청
  • 401: 로그인 필요
  • 404: 페이지 없음

5xx - 서버 오류 💥

  • 500: 서버 내부 오류
  • 503: 서버 점검 중

🎯 RESTful API란?

REST는 HTTP를 잘 활용하는 설계 원칙이에요!

📍 URI로 자원 표현

// 좋은 예시
GET /api/users        // 사용자 목록
GET /api/users/123    // 특정 사용자
POST /api/users       // 새 사용자 생성
PUT /api/users/123    // 사용자 수정
DELETE /api/users/123 // 사용자 삭제

🎭 HTTP 메서드로 행동 표현

  • GET: 조회 (읽기만)
  • POST: 생성
  • PUT: 전체 수정
  • PATCH: 부분 수정
  • DELETE: 삭제

 

🚀 꿀팁들

1️⃣ 에러 처리하기

const apiCall = async () => {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('요청 실패');
    return await response.json();
  } catch (error) {
    console.error('API 호출 실패:', error);
  }
};

2️⃣ 로딩 상태 관리

  • API 호출 중 로딩 스피너 표시
  • 사용자 경험 개선 필수!

3️⃣ 캐싱 활용

  • 같은 데이터 반복 요청 방지
  • Next.js의 SWR, React Query 활용

 

HTTP란 무엇인지 설명해 주세요.

프론트엔드와 관련된 질문이에요.

HTTP(Hypertext Transfer Protocol) 는 웹 상에서 클라이언트와 서버 간 데이터를 주고받는 데 사용되는 통신 규약입니다. 클라이언트가 서버에 요청을 보내고, 서버가 이에 대한 응답을 반환하는 방식으로 동작합니다. HTTP는 비연결성(stateless) 을 특징으로 하여 한 번의 요청-응답이 끝나면 연결이 종료됩니다. 또한, 통신이 안전하게 연결될 수 있도록 TCP 연결을 사용합니다.

 

HTTP는 HTML, JSON 등 다양한 데이터 포맷을 전달할 수 있습니다. 요청과 응답에는 URL 경로, 각종 메서드, 상태 코드와 헤더 등 정해진 몇 가지 정보를 포함합니다.

 

HTTP의 보안을 강화한 버전인 HTTPS(Hypertext Transfer Protocol Secure) 는 HTTP에 TLS/SSL 프로토콜에 따라 데이터를 암호화하여 전송합니다. 이를 통해 보안 상 중요한 정보들을 안전하게 보호하여 통신을 주고 받습니다.

 

HTTP와 함께 자주 언급되는 RESTFul API은 무엇인가요? 🤔

RESTful API는 REST(Representational State Transfer) 스타일을 준수하여 설계된 API를 의미합니다. 여기서 REST는 웹의 리소스를 클라이언트와 서버가 일관된 방식으로 처리할 수 있도록 하는 설계 원칙입니다.

기본적으로 REST에서는 리소스를 고유한 URI로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용해 행위를 표현합니다. 예를 들어, /users URI에 GET 요청을 보내면 사용자 목록을 가져오는 API로 동작할 수 있습니다.

다음은 REST의 핵심 규칙들입니다.

  1. 클라이언트-서버 분리: 클라이언트와 서버 간 역할을 명확히 분리합니다.
  2. 무상태성(Stateless): 서버는 클라이언트의 상태를 저장하지 않으며, 각 요청은 독립적으로 처리합니다.
  3. 일관된 인터페이스(Uniform Interface): 고유한 URI로 리소스를 식별하고 일관된 인터페이스를 통해 클라이언트와 서버가 간단하고 예측 가능하게 통신할 수 있게 합니다.
  4. 캐시 가능성: 가능하다면, 서버의 응답 시간을 개선하기 위해 리소스 캐싱을 지원합니다.
728x90
저작자표시 (새창열림)