728x90

1. HTTP 요청 구조

HTTP 요청은 **클라이언트(브라우저, 모바일 앱 등)**에서 서버로 보내는 데이터입니다.
요청을 어떻게 보내고, 어떤 정보를 포함하는지 이해하는 것이 중요합니다.

✅ HTTP 요청의 구성 요소

  1. URL (Uniform Resource Locator)
  2. Method (메소드)
    • 요청 방식입니다. 주로 4가지가 사용됩니다.
      • GET: 서버에서 데이터를 가져옴
      • POST: 서버에 데이터를 전송
      • PATCH: 서버의 데이터를 부분적으로 수정
      • DELETE: 서버에서 데이터를 삭제
  3. Header (헤더)
    • 요청에 대한 메타 정보가 포함됩니다. 키-값 쌍으로 구성되며, string 형식으로 작성됩니다.
    • 예: Content-Type: application/json, Authorization: Bearer <token>
  4. Body (본문)
    • POST, PUT, PATCH 요청에서 사용됩니다. 서버로 보내는 실제 데이터입니다.
    • 예: JSON 형식의 데이터 ({"name": "John", "age": 30})

✅ 비유

HTTP 요청은 '편지'와 같다

  • URL: 편지를 보낼 주소
  • Method: 편지 종류 (편지 보내기, 편지에 답장, 편지 수정, 편지 회수)
  • Header: 편지의 정보 (발송인, 수신인, 날짜 등)
  • Body: 편지 내용

2. HTTP 상태 코드 (Status Code)

HTTP 상태 코드는 서버가 클라이언트에게 응답을 보낼 때 그 상태를 알려주는 숫자입니다.
주로 3자리 숫자이며, 범위에 따라 응답의 종류가 나눠집니다.

✅ 상태 코드 범위

코드 범위 의미 설명
100-199 정보 응답 요청을 받았으며, 클라이언트가 계속 진행해야 함
200-299 성공 응답 요청이 성공적으로 처리되었음
300-399 리다이렉션 요청한 리소스가 다른 곳으로 이동되었음
400-499 클라이언트 에러 응답 클라이언트의 잘못된 요청
500-599 서버 에러 응답 서버 측 오류가 발생했을 때
 

✅ 상세 상태 코드 설명

  • 200 OK: 요청이 성공적으로 처리되었습니다.
  • 201 Created: 새 리소스가 성공적으로 생성되었습니다.
  • 301 Moved Permanently: 리소스가 영구적으로 다른 URL로 이동되었습니다.
  • 400 Bad Request: 요청이 잘못되었거나 필수 값이 빠졌습니다.
  • 401 Unauthorized: 인증이 필요하거나 인증 토큰이 잘못되었습니다.
  • 403 Forbidden: 인증은 되었지만 해당 리소스에 접근할 권한이 없습니다.
  • 404 Not Found: 요청한 리소스가 존재하지 않습니다.
  • 405 Method Not Allowed: 사용하려는 HTTP 메소드가 허용되지 않습니다.
  • 500 Internal Server Error: 서버에서 예기치 않은 오류가 발생했습니다.

3. 같은 URL에 여러 개의 Method

  • URL은 하나, 하지만 Method는 여러 개일 수 있습니다.
  • 예를 들어, /api/user라는 URL이 있다고 할 때:
    • GET /api/user: 사용자 데이터를 가져옴
    • POST /api/user: 새로운 사용자 데이터를 추가
    • PUT /api/user: 기존 사용자 데이터를 수정
    • DELETE /api/user: 사용자 데이터를 삭제

✅ 비유

**URL은 '도로'**이고, Method는 '차 종류'
한 도로에서 여러 차가 주행할 수 있지만, 각 차는 목적이 다릅니다.

4. HTTP 요청 예시

다음은 POST 요청을 사용하는 예시입니다.

# POST 요청 예시 (API 호출)
POST /api/user HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer <token>

{
  "name": "John",
  "age": 30
}
  • POST: 데이터를 서버에 전송
  • Host: 요청을 받을 서버의 주소
  • Content-Type: 전송하는 데이터의 형식
  • Authorization: 인증 토큰

5. HTTP 응답 예시

다음은 200 OK 응답 예시입니다.

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 123

{
  "name": "John",
  "age": 30
}
  • 200 OK: 요청이 성공적으로 처리됨
  • Content-Type: 응답 데이터 형식
  • Content-Length: 응답 데이터 크기

✅ 한 줄 요약

HTTP 요청과 응답은 메시지 교환의 규칙이며, URL, Method, Header, Body와 함께 Status Code로 결과를 알려줍니다.

728x90

'개발자 성장 로드맵 > 백엔드' 카테고리의 다른 글

Dependency Injection (DI)과 Inversion of Control (IoC)  (0) 2025.07.22
Nest.js 요청 사이클 구조 완전 정리 — Postman을 활용한 API 테스트  (2) 2025.07.22
Next.js와 Express.js의 차이점  (7) 2025.07.21
서버 개발의 시작! 백엔드 개발자 되는 법  (0) 2025.06.21
728x90

🌳 DOM Tree (Document Object Model)

DOM은 웹 문서를 트리(Tree) 형태로 표현한 구조야. **HTML 문서 안의 모든 요소(태그, 텍스트, 속성)**를 객체처럼 다룰 수 있게 해주지.

DOM Tree 예시 다이어그램

HTML 예시

 
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </body>
</html>

나무 모양 다이어그램:

DOM 이해 비유

  • document → 전체 나무
  • html → 큰 가지
  • head, body → html 아래 두 갈래 큰 가지
  • 태그들 → 잎사귀
  • 텍스트 → 잎사귀에 적힌 글자

🌐 BOM (Browser Object Model)

DOM은 “문서”를 다루고, BOM은 브라우저 자체를 다루는 개념이야.

  • BOM은 DOM보다 더 “바깥쪽”에 있음
  • 웹 페이지가 아닌, 브라우저 환경 자체를 다루는 객체들이 BOM에 포함됨
  • 대표적인 BOM 객체:
    • window
    • navigator
    • screen
    • history
    • location

✅ 주요 BOM 객체 설명

1. window

  • 최상위 객체 (DOM, BOM 둘 다 포함)
  • 비유: 브라우저 창 전체
  • 예시:
window.alert("Hello!");
console.log(window.innerWidth);

2. document

  • DOM의 진입점
  • HTML 문서를 표현
  • 예시:
     
document.getElementById("title");

3. navigator

  • 브라우저 정보
  • 예시:
console.log(navigator.userAgent);
console.log(navigator.language);

4. screen

  • 사용자 화면 해상도 정보
  • 예시:
console.log(screen.width);
console.log(screen.height);

5. location

  • 현재 URL 정보 + 이동 기능
  • 예시:
console.log(location.href);
location.href = "https://www.google.com";

6. history

  • 사용자가 방문한 페이지 이력
  • 예시:
history.back();
history.forward();

✅ DOM vs BOM

구분DOMBOM
역할 문서(HTML)를 객체로 표현 브라우저 환경 자체를 다룸
최상위 객체 document window
예시 document.getElementById window.alert, location.href
 

✅ 비유로 정리

  • DOM → 웹페이지의 설계도
  • BOM → 브라우저라는 집 전체의 컨트롤러
  • window → 집 전체
  • document → 집 안의 설계도
  • navigator → 집의 신분증
  • screen → 집의 창문 크기
  • location → 집 주소
  • history → 집 방문 내역
728x90

'개발자 성장 로드맵 > 프론트엔드' 카테고리의 다른 글

NPM 기초 완전 정리  (2) 2025.07.11
자바스크립트 모듈 시스템 완전 정리  (2) 2025.07.11
Front-End 개발 필수: 이벤트 버블링·캡처링, JS 모듈, 배열 메서드 총정리  (1) 2025.07.11
Front-End 필수 개념: script 로드 전략과 this 이해하기  (2) 2025.07.10
프론트엔드 개발자 입문 로드맵  (2) 2025.06.21

+ Recent posts

티스토리툴바