아직은 백엔드 프로그래밍에 앞서 기초를 다지는 시간!
오늘은 서버와 HTTP에 대한 TIL을 적어봅니당.
서버(Server)란 뭘까?
식당으로 비유하니 이해가 쉬웠다.
우리가 웹을 사용할 때:
- 클라이언트(홀) = 손님이 앉아있는 공간
- 서버(주방) = 주문을 받아서 음식을 만드는 공간
손님이 주문하면(요청), 주방에서 음식을 만들어 가져다줍니다(응답). 이게 클라이언트-서버 관계
서버의 2가지 의미
1) 하드웨어로서의 서버
- 24시간 365일 켜져있는 강력한 컴퓨터
- 전 세계 어디서든 접근할 수 있는 고정 주소(IP)를 가짐
2) 소프트웨어로서의 서버
- 그 컴퓨터 안에서 실행되는 프로그램
- 예: Node.js, Spring 등으로 만든 애플리케이션
서버의 두 가지 역할
1: 웹 파일 제공
클라이언트: "index.html 요청"
→ 서버에서 찾음
서버: HTML, CSS, JS 파일을 그대로 전달이건 정적 콘텐츠. 파일을 그냥 있는 그대로 줌.
2: API를 통한 데이터 제공
클라이언트: "새우깡을 "찜 목록"에 추가해줘"
→ 상품 정보(JSON)를 함께 전달
서버: 1. 정보를 받아서 해석
2. "찜 목록"에 추가 처리 (비즈니스 로직)
3. "성공했음." + 결과 데이터를 JSON으로 응답이건 동적 콘텐츠입니다. 매번 다른 결과를 만들어서 줌.
HTTP(HyperText Transfer Protocol)란?
HTTP는 클라이언트와 서버가 "이렇게 주고받자"고 약속한 통신 규칙.
HTTP 요청(Request)과 응답(Response) 구조
HTTP 메시지는 항상 3개의 파트로 구성됩니다:
┌─────────────────────┐
│ 시작줄(Start Line) │ ← "뭘 요청하는지"
│ GET /items HTTP/1.1 │
├─────────────────────┤
│ 헤더(Headers) │ ← "요청한 데이터의 자세한 정보"
│ Content-Type: ... │
├─────────────────────┤
│ 본문(Body) │ ← "실제 데이터"
│ { "name": "..."} │
└─────────────────────┘HTTP 메서드 (Method) - 4가지
| GET | 조회 | "찜 목록 보여줘" |
| POST | 생성 | "새우깡 추가해줘" |
| PUT/PATCH | 수정 | "가격 업데이트해줘" |
| DELETE | 삭제 | "이거 지워줘" |
javascript
// 실제 코드 예시
const response = await fetch('http://서버주소/items', {
method: 'POST', // 어떤 메서드?
headers: {
'Content-Type': 'application/json' // 뭐 보내는데?
},
body: JSON.stringify({ // 실제 데이터
name: '새우깡',
price: 1500
})
});상태 코드 (Status Code)
2xx - 성공!
200 OK : "요청 성공했어"
201 Created : "새로 만들었어"
4xx - "클라이언트 오류"
400 Bad Request : "요청 틀림"
401 Unauthorized : "권한 없음"
404 Not Found : "요청한 정보가 서버에 없음"
💥 5xx - 서버 오류
500 Internal Server Error :데이터 전송 방법
URL에 붙여서 보내기 (GET)
GET http://서버/search?keyword=새우깡
↓
쿼리 스트링- 간단한 조회 조건 용도
- ex) 검색어, 페이지 번호
: 몸통(Body)에 숨겨서 보내기 (POST)
javascript
// 복잡한 데이터를 보낼 때
const payload = [
{ productNo: 123, name: '노트북' },
{ productNo: 456, name: '마우스' },
{ productNo: 789, name: '키보드' }
];
// 많은 데이터는 URL에 못 담기에Body에 넣어서 POST로 보냄실제 상황에서는 어떻게 될까?
네이버 쇼핑에서 "맥북" 검색
클라이언트 요청
GET http://search.shopping.naver.com/ns/search?query=맥북
서버 응답
Status: 200 OK
Content-Type: text/html
Body: <!DOCTYPE html><html>...</html>
(검색 결과가 담긴 HTML 페이지)
브라우저가 HTML을 받아서 화면에 표시!상황: 상품에 "찜" 버튼을 클릭
클라이언트 요청
POST http://api.shopping.naver.com/items
Headers: { Content-Type: application/json }
Body: {
"productNo": "12011111173",
"action": "add"
}
서버가 데이터베이스에 저장
서버 응답
Status: 201 Created
Body: {
"id": "abc-123",
"isKeep": true,
"count": 2
}
클라이언트가 JSON을 받아서 "찜 완료!" 표시핵심 개념
서버의 역할
- 하드웨어: 24시간 켜져있는 컴퓨터
- 소프트웨어: 그 안에서 돌아가는 프로그램
- 정적 파일 제공 (HTML, CSS, JS)
- 동적 데이터 제공 (API)
HTTP 통신
- 요청: 클라이언트가 먼저 "요청"
- 응답: 서버가 "응답"
- 메서드: GET(조회), POST(생성), PUT(수정), DELETE(삭제)
- 상태 코드: 2xx(성공), 4xx(클라이언트 오류), 5xx(서버 오류)
'Camp > 웹 개발 기초' 카테고리의 다른 글
| [TIL] REST API란? Postman으로 Mock Server 만들기 (0) | 2026.06.04 |
|---|---|
| [TIL]HTML,CSS,JavaScript 란 (0) | 2026.06.01 |
| [TIL]WEB이란 무엇인가 (0) | 2026.06.01 |
| [TIL]프론트엔드와 백엔드 (0) | 2026.05.28 |