Aidengoldkr – Tech Blog

이번 수업에서는 웹 개발의 가장 기본적인 개념인 클라이언트-서버 구조와, 둘 사이에서 데이터를 주고받는 방식인 HTTP를 다뤘다.

Next.js로 이미 개발을 해본 입장에서 개념 자체는 낯설지 않았지만, 구조를 정리해서 언어로 설명하는 건 또 다른 일이다.

클라이언트와 서버

개념	설명
클라이언트	서버에 요청을 보내는 프로그램 또는 장치 (ex. 웹 브라우저)
서버	요청을 받아 처리하고 응답을 돌려주는 컴퓨터 시스템

 

클라이언트는 장군, 서버는 성, 그 안의 왕이 웹 서버다. 장군이 성에 물 100L 보급을 요청하면, 왕이 허가하고 처리하는 구조다.

이 비유를 전체 개념에 매핑하면 이렇다.

비유	실제 개념
장군	클라이언트
성	서버
왕	웹 서버
좌표	IP 주소
도로명주소	도메인
성문	포트 (0~65535)
성벽	방화벽
마패	인증 (Authentication)
접근 권한	인가 (Authorization)
요청서	HTTP Message
창고	데이터베이스
약속한 요청 규칙	프로토콜

 

인증(Authentication) 과 인가(Authorization) 는 헷갈리기 쉬운 개념이다. 인증은 "이 사람이 누구인지" 확인하는 것이고, 인가는 "이 사람이 어디에 접근할 수 있는지" 권한을 부여하는 것이다. 마패(신분증)로 신분을 확인하는 게 인증, 확인 후 어느 구역까지 들어올 수 있는지 결정하는 게 인가다.

 

HTTP Message

클라이언트와 서버가 실제로 주고받는 데이터 단위가 HTTP Message다. 구조는 4가지로 나뉜다.

구성 요소	내용
시작줄 (Start Line)	요청/응답의 상태를 나타내는 첫 번째 줄
헤더 (Headers)	메시지 정보를 담은 키-값 집합
빈 줄 (Empty Line)	헤더 종료, 본문 시작을 알리는 구분선
본문 (Body)	실제 데이터 (HTML, JSON 등)

 

헤더 중 Content-Length가 특히 눈에 들어왔다. 서버가 요청을 처리하기 전에 본문 크기를 미리 파악해서, 너무 크거나 이상한 요청은 거절할 수 있도록 하는 역할이다. 이게 결국 Vercel의 4.5MB 제한 같은 서버 단 페이로드 제한의 근거이기도 하다.

 

HTTP Status Code

서버가 요청 처리 결과를 클라이언트에 알리는 3자리 숫자 코드다.

번호대	분류
1xx	정보
2xx	성공
3xx	리다이렉션
4xx	클라이언트 오류
5xx	서버 오류

자주 보게 될 코드들.

코드	설명
200	요청 성공
201	성공 + 새 리소스 생성
204	성공, 반환할 내용 없음
400	잘못된 요청 (파라미터 누락 등)
401	인증 필요
403	인가 없음 (권한 부족)
404	리소스 없음
429	요청 과다
500	서버 내부 오류
503	서버 준비 안 됨

 

401과 403도 인증/인가처럼 헷갈리는 쌍이다. 401은 "누구세요?" — 로그인하지 않은 상태다. 403은 "알고는 있는데, 넌 여기 못 들어와" — 권한이 없는 상태다.

 

Express.js

마지막으로 Express.js를 소개했다. Node.js 기반의 웹 서버 프레임워크로, 앞서 설명한 왕(웹 서버) 역할을 직접 구현할 수 있게 해주는 도구다.

npm install express

import express from 'express'

const app = express()
const PORT = 3000

app.get('/', (req, res) => {
  res.send('서버 동작 중') //기본 라우트
})

app.listen(PORT, () => {
  console.log(`포트 ${PORT}에서 실행 중`)
})

Node.js만으로도 서버를 만들 수 있지만, 처음부터 끝까지 직접 짜면 손이 너무 많이 간다. Express는 라우팅, 미들웨어 등 반복 작업을 추상화해서 최소한의 코드로 서버를 돌릴 수 있게 한다.

레이어 구조로 보면: 운영체제 → Node.js → Express.js 순이다.

---

마무리: 클라이언트-서버, HTTP, 상태 코드는 웹 개발의 언어다. 개발하면서 이미 쓰고 있던 개념들이지만, 용어와 구조로 정리해두니 코드를 읽을 때 더 명확하게 보인다.