Lesson
웹 통신과 REST API
HTML에서 시작해 HTTP·REST·DOM·JSON까지, 브라우저와 서버가 데이터를 주고받는 전 과정을 훑습니다.
총 12개 주제
마크업 · 마크다운 · HTML
마크(Mark)는 데이터에 이름표를 붙이는 행위다. 같은 '안녕하세요'라도 태그로 감싸면 그것이 제목임을 기계가 알 수 있다. 마크업은 기계를 위한 정교한 설계도, 마크다운은 사람을 위한 간결한 메모다.
- 마크(Mark) = 데이터에 성격과 구조를 부여하는 이름표
- 마크업(HTML)은 기계(브라우저)용, 마크다운(.md)은 사람(작성자)용
- 하이퍼텍스트(HT)는 문서 사이를 순간이동시키는 비선형 텍스트
- 하이퍼링크 `<a>`는 이미 만들어진 길로 이동, 폼 태그 `<form>`은 새 데이터를 주문
- `<!DOCTYPE html>`은 최신 규격(HTML5)으로 그리라는 작전 개시 선언
웹 통신을 물류 시스템으로 이해하기
프론트엔드가 손님이고 백엔드가 기지라면, 그 사이를 오가는 기차가 요청과 응답이다. 화물은 JSON 패키지, 선로는 URL 주소, 기관차는 Axios 같은 라이브러리, 운행 규칙은 REST다.
- 패키지(객체) = 실제 데이터 조각, JSON 형식
- 선로(API) = 데이터 전용 통로와 정거장, URL 주소
- 기관차(Axios) = 화물을 싣고 움직이게 하는 동력
- 물류 규정(REST) = 선로 설계와 운행 방식에 대한 표준 규칙
- 상태 코드: 200(배송 성공) · 404(선로 없음) · 500(기지 사고)
동기 vs 비동기 통신
모뎀 시대에는 요청 하나를 보내고 전체 응답이 올 때까지 기다려야 했다. 현대 인터넷은 텍스트·이미지·광고를 동시에 요청하고 도착하는 대로 각각 렌더링한다.
- 동기(Synchronous): 순차 처리, 자원 점유(대기), 제어는 간단하지만 비효율적
- 비동기(Asynchronous): 동시 처리, 자원 효율적, 제어는 복잡하지만 높은 응답성
- 비유 — 동기는 전화 통화(한 명이 말하면 다른 한 명은 듣기만), 비동기는 메신저(보내 놓고 다른 일 수행)
Stateless(무상태)를 올바르게 이해하기
무상태는 '아무도 상태를 갖지 않는다'는 뜻이 아니다. 프론트엔드는 화면 상태를 갖고 백엔드는 영구 데이터를 갖는다. 무상태인 것은 그 사이를 오가는 REST API 통신 구간뿐이다.
- 프론트엔드: 다크모드 설정, 장바구니 목록 등 화면 상태(State)를 보유 — Stateful
- 백엔드/DB: 회원 정보, 게시글 등 영구적 데이터를 저장 — Stateful
- 가운데 통신 구간만 Stateless — 서버는 이전 요청을 기억하지 않는다
- 장점: 확장성(서버 증설이 쉬움), 안정성(한 서버가 고장 나도 무관), 단순성
회원가입으로 보는 상태의 여정
입력창에 타이핑하는 동안은 프론트엔드 내부 상태다. 가입 버튼을 누르는 순간 그 상태는 무상태 패키지로 포장되어 전송되고, 백엔드에서 객체로 조립된 뒤 데이터베이스에 영구 상태로 정착한다.
- 1단계: 입력창 내부 상태(State) → 버튼 클릭 시 무상태 패키지로 포장
- 2단계: 백엔드의 독립 모듈에서 패키지를 수신하고 저장 처리
- 3단계: '부품(객체)'으로 조립되어 데이터베이스에 영구 상태로 정착
- HTTP 통신은 무상태 요청과 무상태 응답의 규칙을 따른다 (예: JWT 인증)
HTTP 메서드와 상태 전송
REST의 이름 그대로 '표현 상태 전송(REpresentational State Transfer)'이다. 클라이언트가 가진 상태를 HTTP 메서드에 실어 서버로 보내고, 서버는 속성과 기능으로 처리한 뒤 응답한다.
- GET — 조회(READ), POST — 생성(CREATE)
- DELETE — 삭제(DELETE), PUT/PATCH — 수정(UPDATE)
- 클라이언트는 HTML(속성)과 Script(기능)를 갖고, 서버도 동일하게 속성과 기능을 갖는다
- 연결 자체는 무상태(Stateless)로 유지된다
Safe 메서드와 Unsafe 메서드
서버의 데이터 상태를 바꾸느냐가 기준이다. 단순 조회는 몇 번을 호출해도 서버가 그대로지만, 생성·수정·삭제는 호출할 때마다 서버의 물리적 상태가 달라진다.
- Safe Methods (상태 변화 X): GET — 요청 전후 서버 상태가 동일하게 유지
- Unsafe Methods (상태 변화 O): POST / PUT / DELETE — 서버 데이터가 물리적으로 변경
REST API의 3대 구성 요소
REST는 자원을 주소로 지목하고, 행위를 메서드로 표현하며, 실제 내용물은 JSON으로 주고받는다. 주소에 동사를 넣지 않는 것이 핵심 원칙이다.
- 자원(Resource): 데이터의 위치를 나타내는 주소(URI) — 오직 명사 형태로 구성
- 행위(Verb): 자원을 어떻게 다룰지 결정하는 메서드(GET/POST 등)
- 표현(Representation): 실제 주고받는 데이터(JSON 등)
DOM — 정적 HTML에서 동적 객체로
브라우저가 HTML 소스 코드를 파싱하면 각 태그가 메모리 위의 객체가 되어 트리를 이룬다. 이 객체들도 결국 속성과 기능을 가진 객체이므로, 객체지향에서 배운 개념이 그대로 적용된다.
- 정적 HTML 소스 → 브라우저 파싱 → 동적 DOM 트리 객체
- 속성(Property): 고유 식별자 id, 디자인 스타일 class, 사용자 정의 데이터 `data-*`
- 기능(Method): DOM 동적 제어(수정·생성), 이벤트 처리(클릭·입력 감지), 애니메이션 실행
- DOM의 태그는 객체지향의 클래스 인스턴스, 어트리뷰트는 멤버 변수, 스크립트는 메서드에 대응
DOM vs JSON — 텍스트에서 객체로
둘 다 텍스트를 프로그래밍 가능한 객체로 바꾼다는 점에서 같지만, 출발점과 목적이 다르다. DOM은 HTML 문서를 구조화(Modeling)하고, JSON은 데이터를 표기법에 맞춰 형식화(Notation)한다.
- DOM: HTML 문서(텍스트) → 모델링 → 트리 구조 객체
- JSON: 데이터 구조(텍스트) → 표기법 → 네이티브 메모리 객체
- DOM 접근은 `document.getElementById()`, JSON 파싱은 `JSON.parse()`
JSON과 React의 데이터 흐름
표기법(Notation)은 데이터를 기록하는 규칙이고, 주석(Annotation)은 부가 정보를 덧붙이는 라벨이다. React에서는 상태(State)가 바뀌면 UI가 다시 그려진다 — UI = f(state).
- 직렬화(Stringify): 객체 → 텍스트, 역직렬화(Parsing): 텍스트 → 객체
- JSON의 본질은 Key : Value 문법
- React 핵심 공식: UI = f(state) — 상태가 바뀌면 화면이 다시 렌더링된다
- `useState` 훅은 읽기 전용 값과 변경 함수를 쌍으로 제공한다
아토믹 디자인 — 차원으로 보는 UI 설계
원자에서 페이지까지 UI를 단계적으로 조립하는 방법론이다. 앞서 본 데이터 차원의 확장과 같은 구조로, 점에서 시작해 선·면·입체로 확장된다.
- 0차원 Atoms(원자): 위치만 존재하는 최소 단위 — 버튼, 입력창
- 1차원 Molecules(분자): 요소 간 관계성이 형성된 선형 결합
- 2차원 Organisms(유기체): 독립적 개체로 실재하는 복합 결합
- 추상 Templates(템플릿): 내용 없는 구조의 틀 (`null`)
- 3차원 Pages(페이지): 데이터가 주입되어 완성된 최종 화면