쿼리 파라미터 ?key=value&key=value :: 웹 서버에서 처리 과정

URL 쿼리 파라미터(?sst=...&sod=...)가 웹 서버에서 어떻게 처리되는지를 단계별로 정리해 드릴게요.

---

1️⃣ URL 예시

 

https://example.com/page?sst=as_view&sod=desc

• https://example.com → 도메인/IP (웹 서버 위치)
• /page → 요청할 리소스(웹 페이지, API 엔드포인트 등)
• ?sst=as_view&sod=desc → 쿼리 파라미터 (서버에 전달되는 데이터)

1️⃣ API 엔드포인트란?

• API(Application Programming Interface)
• 엔드포인트 = 클라이언트(브라우저, 앱, 다른 서버)가 요청을 보내서 데이터를 받거나 서버 기능을 호출할 수 있는 URL
• 단순 웹 페이지 파일이 아니라, 서버가 동적으로 처리 후 JSON, XML 등 데이터를 반환하는 주소

예시:

 

https://example.com/api/get_user?user_id=123

• /api/get_user → 엔드포인트
• 쿼리 파라미터 → 서버에 전달할 데이터
• 서버 응답 → JSON

 

{
  "user_id": 123,
  "name": "Alice",
  "email": "alice@example.com"
}

---

2️⃣ 웹 페이지 파일과 API 엔드포인트 차이

구분	웹 페이지 파일	API 엔드포인트
URL 예시	/index.html /about.html	/api/get_user /page
반환 데이터	HTML, CSS, JS → 브라우저가 렌더링	JSON, XML 등 → 브라우저 또는 앱에서 처리
서버 역할	정적 파일 제공	동적 처리 DB 조회, 로직 수행

 

중요한 점: /page라는 경로가 항상 HTML 파일을 의미하는 건 아님

• 서버 설정이나 애플리케이션에서 /page 요청을 받으면
• 내부적으로 데이터베이스 조회, 계산 등 처리 후 JSON을 반환하도록 코딩 가능

 

---

3️⃣ 어떻게 가능하냐?

1. 웹 서버에서 요청 라우팅
   • Nginx/Apache는 /page 요청을 애플리케이션 서버(PHP, Python, Node.js 등)로 전달
2. 애플리케이션 서버 처리
   • 요청 경로(/page)를 보고, HTML 파일을 반환할지, JSON 데이터 반환할지 결정
   • 예: Python Flask

 

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/page")
def api_page():
    data = {"sst": "2025-10-03", "sod": "abc"}
    return jsonify(data)  # JSON 반환

1. 클라이언트는 /page에서 받은 JSON을 JS로 처리 → 웹 페이지에 보여주거나 앱에서 사용

---

4️⃣ 요약

• API 엔드포인트 = 데이터/기능 제공용 URL
• /page가 HTML 파일이 아닐 수 있는 이유: 웹 서버가 요청 경로를 코드에서 처리하도록 설정했기 때문
• 브라우저는 JSON을 직접 렌더링하지 않고, JS 등에서 받아서 화면에 표시

---

1️⃣ 기본 규칙

1. / → 기본 문서(Default Document) 요청
   • 대부분의 웹 서버에서 루트 경로 / 요청 시 index.html / index.htm / index.php 등 기본 파일을 자동으로 반환
   • 예: / = /index.html
2. /index.html → 명시적 요청
   • /와 같은 파일을 가리킴, 단 브라우저 주소창에 그대로 /index.html 표시

---

2️⃣ 그런데 /index는?

• 일반적으로 웹 서버가 자동으로 .html을 붙이지 않음
• 즉, /index라고 요청하면 서버는 다음을 시도함:
  1. /index라는 파일이 있는지 확인
  2. 없으면 404 Not Found 반환

예외 가능:

• Nginx, Apache에서 설정을 통해 확장자 생략 지원 가능
  • Apache: MultiViews 옵션→ /index 요청 시 /index.html 자동 매핑

 

<Directory "/var/www/html">
    Options +MultiViews
</Directory>

• • Nginx: 기본적으로 try_files로 설정 가능

location / {
    try_files $uri $uri.html =404;
}

---

3️⃣ 요약

요청반환 여부

/	가능 → 기본 문서(index.html) 반환
/index.html	가능 → 파일 명시적 요청
/index	기본 설정에서는 404, 서버 설정에 따라 .html 자동 매핑 가능

핵심: 브라우저는 /를 /index.html로 해석하지만, /index는 서버 설정 없으면 해석 못함

---

2️⃣ 브라우저에서 요청 단계

1. 사용자가 브라우저에 URL 입력 → Enter
2. 브라우저가 DNS 조회 → example.com → IP 확인
3. 브라우저가 서버 IP로 HTTP/HTTPS 요청 전송

GET /page?sst=2025-10-03&sod=abc HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 ...

• 쿼리 파라미터가 요청 경로(/page?sst=...)에 그대로 포함됨
• Host 헤더 → 가상 호스트 구분용
• 기타 헤더 → 브라우저/세션 정보 전달
   

1️⃣ User-Agent 헤더

• 클라이언트(브라우저, 앱 등)가 서버에게 “내가 어떤 환경에서 요청하는지” 알려주는 문자열

🔹 예시

 

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

• 의미:
  • OS: Windows 10
  • 아키텍처: 64-bit
  • 브라우저: Chrome 120
  • 렌더링 엔진: WebKit/Safari 계열

서버는 이 정보를 활용해 브라우저별 최적화, 통계, 모바일/데스크톱 분기 처리 등 가능

---

2️⃣ 세션(Session) 관련 헤더

• HTTP 자체에는 세션이라는 개념이 없음, 세션 관리는 보통 쿠키(Cookie) 기반으로 구현
• 클라이언트 → 서버: Cookie 헤더
• 서버 → 클라이언트: Set-Cookie 헤더

🔹 예시

• 서버가 세션 발급 (응답):

 

Set-Cookie: sessionid=abc123; Path=/; HttpOnly; Secure

• 클라이언트가 다음 요청 시:

Cookie: sessionid=abc123

 

즉, 브라우저/클라이언트는 쿠키를 통해 세션을 관리하고, 헤더 이름은 Cookie

---

🔹 요약

헤더	용도
User-Agent	클라이언트 환경 정보 (브라우저, OS, 렌더링 엔진 등)
Cookie	클라이언트 → 서버: 세션/로그인 정보 전달
Set-Cookie	서버 → 클라이언트: 세션 발급/갱신

참고: 세션 ID는 서버에서 발급하며, Cookie에 담겨야 HTTP 요청마다 서버가 해당 세션을 인식 가능

---

3️⃣ 웹 서버 단계

• Nginx/Apache → 요청 받음
• 가상 호스트와 포트, URI 매칭 → 어떤 root 디렉터리/애플리케이션 처리할지 결정
• 예시 (Nginx):

server {
    listen 80;
    server_name example.com;
    root /var/www/example;
}

1️⃣ root /var/www/example는 URI가 아니에요

• URI(Uniform Resource Identifier) = 브라우저 주소창에 입력하는 URL과 관련된 식별자
  • 예: https://example.com/index.html → URI
• root /var/www/example는 웹 서버 설정에서 실제 파일 시스템 경로를 지정하는 거예요
  • 즉, 서버 내부에서 파일을 어디서 읽어올지 알려주는 경로
  • 브라우저에는 /index.html로 보이지만, 서버는 실제로 /var/www/example/index.html 파일을 찾아서 응답

---

2️⃣ 웹 브라우저 주소 vs 서버 내부 경로

구분	브라우저 URL	서버 내부 경로
사용 용도	클라이언트가 요청하는 리소스 식별	웹 서버가 실제 파일 찾는 위치
예시	/index.html, /about	/var/www/example/index.html
입력 여부	브라우저/앱에서 입력	서버 설정, 프로그래밍 코드에서 지정

핵심: 브라우저에 입력하는 URL과 서버의 파일 경로는 1:1 매핑일 수도 있고, 재작성(rewrite) 규칙 등으로 다를 수도 있음

---

3️⃣ 프로그래밍 중에도 쓰이는 이유

• 서버 애플리케이션에서 파일 읽기/쓰기 시 실제 파일 시스템 경로 필요
• 예시 (Python Flask):

 

from flask import Flask, send_from_directory

app = Flask(__name__)
@app.route("/files/<filename>")
def files(filename):
    # 서버 파일 경로 지정
    return send_from_directory("/var/www/example", filename)

• 여기서 /var/www/example가 root 디렉터리 역할

---

4️⃣ 요약

1. root /var/www/example = 서버 파일 시스템 경로
2. 브라우저 주소창에 입력하는 URL/URI와 다름
3. 서버는 이 경로를 기준으로 요청받은 리소스를 찾아서 응답
4. 프로그래밍에서도 파일 접근, API 응답, 동적 컨텐츠 생성 등에 사용

---

4️⃣ 서버 애플리케이션 처리

• 요청이 웹 애플리케이션(예: PHP, Python Flask, Node.js 등)로 전달됨
• 서버는 쿼리 파라미터를 언어별 방식으로 파싱
  • PHP: $_GET['sst'], $_GET['sod']
  • Python Flask: request.args.get('sst'), request.args.get('sod')
  • Node.js Express: req.query.sst, req.query.sod
• 예시 (Python Flask):

 

from flask import Flask, request
app = Flask(__name__)

@app.route("/page")
def page():
    sst = request.args.get("sst")  # as_view
    sod = request.args.get("sod")  # dec
    return f"SST: {sst}, SOD: {sod}"

---

5️⃣ 서버 응답

• 서버가 처리 결과를 HTML/JSON 등으로 만들어 브라우저에 전송

 

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 25

SST: as_view, SOD: dec

• 브라우저가 응답 수신 → 화면에 렌더링

---

6️⃣ 흐름 요약 그림

1. 브라우저 → URL 입력 → DNS → 서버 IP
2. HTTP 요청 → /page?sst=...&sod=..., Host 헤더 포함
3. 웹 서버(Nginx/Apache) → 요청 라우팅 → 애플리케이션(PHP, Node.js, Python Flask) 전달
4. 애플리케이션 → 쿼리 파라미터 파싱 → 처리
5. 서버 응답 → 브라우저 렌더링

---

✅ 정리

• URL 파라미터(sst, sod)는 클라이언트 → 서버 데이터 전달 수단
• 서버는 쿼리 파라미터를 언어별 GET 변수/객체로 읽어서 처리
• Host 헤더 + 가상 호스트 + root 디렉터리 → 요청이 어떤 사이트/애플리케이션으로 갈지 결정

728x90

---

 

1️⃣ 파싱(Parsing)이란?

• 어떤 데이터나 문자열을 분석해서 의미 있는 구조로 바꾸는 과정
• 쉽게 말하면 사람이 이해하기 어려운 텍스트를 컴퓨터가 이해할 수 있는 형태로 변환하는 것

---

🔹 예시 1: URL 쿼리 파라미터

URL:

https://example.com/page?sst=as_view&sod=dec

• 브라우저가 서버에 요청을 보낼 때, 서버는 이 문자열 그대로 처리하지 않아요
• 파싱을 통해:

 

sst = "as_view"
sod = "dec"

• 이렇게 각각의 변수/키-값 쌍으로 나누어 의미를 이해

---

🔹 예시 2: JSON 파싱

서버에서 받은 JSON 데이터:

 

{
  "name": "Alice",
  "age": 25
}

• 프로그래밍 언어에서 파싱하면:

 

data["name"]  # "Alice"
data["age"]   # 25

• 문자열 → 자료구조(dictionary, object)로 변환

---

🔹 예시 3: HTML 파싱

• 웹 크롤링에서 HTML을 그대로 읽는 건 어렵고 의미 있는 데이터만 가져와야 할 때
• <div class="title">Hello</div> → 파싱 → "Hello" 추출

---

2️⃣ 요약

• 파싱 = 데이터 분석 + 구조화
• 문자열, 파일, HTTP 요청, JSON, HTML 등 어디서나 사용
• 목적: 컴퓨터가 처리할 수 있는 의미 있는 구조로 바꾸기

---

 

JSON(JavaScript Object Notation) 자체는 텍스트, 즉 문자열 기반 포맷이에요. 😄

---

1️⃣ JSON의 본질

• JSON은 사람도 읽을 수 있고, 컴퓨터가 쉽게 처리할 수 있는 데이터 포맷
• 데이터 타입을 문자열 형태로 표현
• 예:

{
  "name": "Alice",
  "age": 25,
  "isMember": true
}

• 위 자체는 텍스트 파일이나 문자열로 저장됨
• "name", "Alice", 25, true 모두 텍스트 형식으로 존재

---

2️⃣ 문자열 vs 객체

• 프로그래밍 언어에서 JSON 문자열은 문자열 타입(str)

json_str = '{"name": "Alice", "age": 25}'
type(json_str)  # <class 'str'>

• 실제 사용하려면 파싱(parse) 해서 객체/딕셔너리로 변환

 

import json
data = json.loads(json_str)
print(data["name"])  # Alice
type(data)  # <class 'dict'>

• 즉, JSON은 전송/저장용 문자열 → 프로그램에서 객체/배열로 변환해서 사용

---

3️⃣ 요약

• JSON 자체 = 문자열(텍스트 기반 데이터 포맷)
• 프로그래밍에서 사용하려면 파싱(parse) → 객체/배열로 변환
• 전송: 문자열로 → 수신: 파싱 → 사용 가능

---

 

1️⃣ 흐름 정리

1. 클라이언트 → 서버: JSON 문자열 전송

{"name": "Alice", "age": 25}

1. 서버: JSON 문자열 → 파싱(parse) → 객체/배열로 변환 → 처리
2. 서버 → 클라이언트: 처리 결과 → JSON 문자열로 변환 → 응답

---

2️⃣ JSON 변환 용어

• 파싱(parse): 문자열 → 객체/배열 (읽어서 사용)
• 직렬화(serialization) 또는 인코딩(encoding): 객체/배열 → 문자열(JSON) (보낼 수 있게 변환)

언어	문자열 → 객체 (파싱)	객체 → 문자열 (직렬화/인코딩)
Python	json.loads()	json.dumps()
JavaScript	JSON.parse()	JSON.stringify()
JAVA	ObjectMapper.readValue()	ObjectMapper.writeValueAsString()

 

---

3️⃣ 예시 (Python)

 

import json

# 클라이언트에서 받은 JSON 문자열
json_str = '{"name": "Alice", "age": 25}'

# 1️⃣ 파싱: 문자열 → 객체
data = json.loads(json_str)
data['age'] += 1  # 처리: 나이 1 증가

# 2️⃣ 직렬화: 객체 → JSON 문자열
response_json = json.dumps(data)
print(response_json)  # {"name": "Alice", "age": 26}

• 서버는 JSON 문자열 형태로 클라이언트에 응답
• 클라이언트는 다시 파싱해서 사용 가능

---

4️⃣ 요약

과정	설명
JSON 파싱	문자열 → 객체/배열 (서버에서 처리 가능하게 변환)
처리	객체/배열로 데이터 연산, DB 저장 등
JSON 직렬화	객체/배열 → 문자열(JSON) (클라이언트에게 응답)

핵심: 클라이언트와 서버가 데이터를 주고받을 때는 항상 문자열(JSON) 형태, 내부 처리 시에는 객체/배열

---

1️⃣ 기본 원리

• 서버가 JSON으로 응답하면 문자열 형태로 전송됩니다.
• 브라우저나 앱에서 바로 객체/배열처럼 쓰는 게 아니라, 문자열을 파싱(parse) 해서 사용해야 합니다.

---

🔹 예시 (JavaScript)

서버 응답(JSON 문자열):

 

'{"name": "Alice", "age": 26}'

클라이언트에서 사용:

 

// 1️⃣ 서버에서 받은 JSON 문자열
let jsonString = '{"name": "Alice", "age": 26}';

// 2️⃣ 파싱: 문자열 → 객체
let data = JSON.parse(jsonString);

// 3️⃣ 객체 사용
console.log(data.name);  // Alice
console.log(data.age);   // 26

• 파싱하지 않고 문자열 그대로 쓰면 "data.name"처럼 접근할 수 없어요.

---

🔹 fetch API 예시

 

fetch('https://example.com/api/user')
  .then(response => response.json()) // 자동으로 JSON 문자열 파싱
  .then(data => {
      console.log(data.name); // 객체처럼 사용 가능
  });

response.json()이 내부적으로 **JSON.parse()**를 수행해서 문자열 → 객체로 변환해 줌

---

2️⃣ 요약

1. 서버 응답 = JSON 문자열
2. 클라이언트에서 객체/배열로 사용하려면 파싱 필요 (JSON.parse() 또는 언어별 함수)
3. 브라우저 fetch/axios 같은 라이브러리는 대부분 자동으로 파싱 기능 제공