HTML API로 서버 생성: 단순한 텍스트 반환 서버
서버 측 웹 서비스를 구축하는 것은 간단합니다. HTTP 요청에 대해 HTML 형식의 순수 텍스트를 응답하면 됩니다. 이 기초적인 접근법은 추가 라이브러리 없이도 안정적으로 작동하며, 브라우저가 모든 복잡한 렌더링 작업을 자동으로 처리합니다.
다음은 내장된 http.server 모듈을 사용한 최소한의 파이썬 서버입니다. 모든 GET 요청에 정적 HTML 페이지를 반환합니다:
from http.server import BaseHTTPRequestHandler, HTTPServer
WEBPAGE = "<h1>Python webpage!</h1>\n"
class HTMLServer(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.end_headers()
self.wfile.write(str.encode(WEBPAGE))
webServer = HTTPServer(("localhost", 8080), HTMLServer)
print("Server running at http://localhost:8080")
webServer.serve_forever()curl을 사용하면 깔끔한 원시 텍스트를 확인할 수 있습니다:
$ curl localhost:8080
<h1>Python webpage!</h1>브라우저에서는 <h1> 태그가 포맷된 제목으로 표시됩니다. 스타일링을 위해 CSS를 추가해 보세요:
WEBPAGE = """
<style>
body {
background-color: lightblue;
font-family: 'Comic Sans MS', cursive;
}
</style>
<h1>Python webpage!</h1>
"""브라우저는 즉시 스타일을 적용합니다. 별도의 단계가 필요 없습니다.
렌더링은 브라우저의 책임이다
서버는 텍스트만 생성하고, 브라우저는 이를 DOM으로 파싱하고, 스타일을 계산하고, 레이아웃을 계산하며, 적절한 DPI, 키프링, 메트릭을 사용해 폰트를 적용합니다. 이 다단계 과정에는 파싱, 스타일 계산, 레이아웃, 그리고 그리기 단계가 포함됩니다.
렌더링은 타이포그래피에 대한 깊은 이해가 필요합니다. 예를 들어 포인트를 픽셀로 변환하거나, 오르내림선과 내림선 높이를 처리해야 합니다. 브라우저는 이러한 복잡성을 모두 자동으로 처리해 줍니다.
HTML 생성은 단지 문자열 조작일 뿐입니다. 불필요한 복잡성을 암시하는 '서버 사이드 렌더링' 같은 전문 용어는 필요 없습니다.
데이터를 표현하기 위한 HTML 사용
모든 데이터는 간단한 문자열 템플릿을 통해 HTML로 표현할 수 있습니다. 다음은 뉴욕 시의 5개 자치구를 예시로 들겠습니다:
boroughs = [
"The Bronx",
"Manhattan",
"Brooklyn",
"Queens",
"Staten Island"
]
LIST = "<li>".join(boroughs)
WEBPAGE = "<h1>NYC Boroughs</h1><ul><li>" + LIST + "</ul>"브라우저는 </li> 태그를 닫지 않아도 올바르게 파싱합니다 (HTML5는 유연합니다).
비슷하게 JSON도 가능합니다:
LIST = '","'.join(boroughs)
WEBPAGE = '{ "nyc_boroughs": ["' + LIST + '"] }'여기서 HTML이 우세합니다. 링크, 폼 등 네이티브 하이퍼미디어 기능을 클라이언트 측 자바스크립트 없이 제공합니다.
- 문자열 기반 HTML 생성의 장점:
- 라이브러리 없이 어떤 언어에서도 작동.
- 최소한의 오버헤드.
- 디버깅 용이: curl로 원시 출력 확인 가능.
- 크로스 플랫폼 호환성 (bash, awk, Python 등).
JSON API 대신 HTML API
이 방식을 HTML API라고 부르자. 서버가 JSON 대신 HTML을 반환합니다. 브라우저는 클라이언트 역할을 하며 하이퍼미디어를 해석합니다.
비교해 보세요:
HTML:
<h1>NYC Boroughs</h1>
<ul>
<li>The Bronx
<li>Manhattan
<li>Brooklyn
<li>Queens
<li>Staten Island
</ul>JSON:
{
"nyc_boroughs": [
"The Bronx",
"Manhattan",
"Brooklyn",
"Queens",
"Staten Island"
]
}HTML은 데이터와 표현을 함께 담고 있습니다. 반면 JSON은 단지 데이터만 전달하므로, 클라이언트에서 렌더링 로직이 필요합니다.
프로덕션용 템플릿 엔진 사용
실제 서비스에서는 Jinja2 같은 템플릿 엔진을 사용하세요. 보안, 반복문, 상속, 구조화 등을 제공합니다.
Jinja 예시:
<h1>NYC Boroughs</h1>
<ul>
{% for borough in boroughs %}
<li>{{ borough }}
{% endfor %}
</ul>- 템플릿 엔진의 핵심 이점:
1. 자동 HTML 엔코딩으로 XSS 공격 방지.
2. 재사용 가능한 조각 (partials).
3. 언어에 맞는 네이티브 문법 (예: Rust용 Htmx, Zig용).
4. 상태 없는 설계로 테스트 및 디버깅 용이.
5. SPA처럼 하이드레이션 오버헤드 없음.
React처럼 클라이언트에서 JSON을 DOM으로 하이드레이션하는 것이 아니라, 템플릿은 서버에서 완전히 렌더링된 HTML을 생성합니다.
가장 중요한 점
- 서버는 HTML 텍스트를 출력하고, 브라우저가 렌더링을 담당합니다.
- HTML API는 순수한 JSON 데이터가 아닌 하이퍼미디어를 제공합니다.
- 문자열 연산은 프레임워크 없이 어디서나 작동합니다.
- 템플릿 엔진은 보안과 구조를 추가합니다.
- 이 접근법은 어떤 프로그래밍 언어에서도 확장 가능합니다.
— Editorial Team
아직 댓글이 없습니다.