Tistory Skin Guide
Day 1 — 웹 작동 원리 (개념 리셋)
1. URL을 입력하면 벌어지는 일
1
사용자: 주소창에 URL 입력
2
브라우저: "서버가 어디 있지?" → DNS 조회
→ 도메인 이름을 실제 서버 주소(IP)로 변환하는 과정입니다.
3
요청: 브라우저 → 서버 "페이지 파일 줘" (**HTTP 요청**)
→ 서버에 "GET /index.html" 같은 메시지를 보내 콘텐츠를 요청합니다.
4
응답: 서버 → 브라우저 HTML 전달 (**HTTP 응답**)
5
렌더링: 브라우저가 HTML 해석 → 화면 출력
💡 왜 배울까요? 이 과정을 이해해야 웹이 단순한 화면이 아니라 '요청과 응답'으로 이루어진 구조라는 것을 알 수 있기 때문입니다.
🎯 핵심: 브라우저가 받는 것은 결국 텍스트 파일입니다.
→ 이 텍스트를 구조(DOM)로 바꾸는 것이 브라우저의 핵심 역할입니다.
2. SSR vs CSR (티스토리 핵심 이해)
SSR (Server-Side)
서버가 HTML을 완성해서 전달
- 이미 완성된 HTML을 수신
- 데이터가 HTML 안에 이미 존재
- 첫 화면이 빠르고 SEO에 유리
CSR (Client-Side)
브라우저(JS)가 HTML을 생성
- 텅 빈 HTML과 JS를 수신
- 브라우저에서 동적으로 생성
- 동적인 사용자 경험에 최적화
⚠️ 티스토리는 SSR 기반입니다!
치환자는 서버에서 처리되므로 자바스크립트(JS)로 직접 제어할 수 없습니다. JS는 렌더링된 결과물에 '효과'를 주는 보조 도구일 뿐입니다.
👉 SSR은 처음 화면이 빠르게 보이고, 검색 엔진(SEO)에 노출되기 유리합니다.