[22일차] ABC 부트캠프

---

브라우저: 사용자의 기기에서 웹문서를 그려 보여주는 앱. (요청 전송 + 응답 해석/렌더링)

웹서버: 네트워크에서 HTTP 요청을 받아 응답을 돌려주는 프로그램/시스템.

---

2) 브라우저: 하는 일 & 내부 구성

• 주요 흐름: URL 입력 → 요청 전송 → 응답(HTML/CSS/JS/이미지) 파싱 → 화면 렌더링
• 구성요소
  • 네트워크 스택: HTTP/1.1·HTTP/2·HTTP/3(QUIC)
  • 렌더링 엔진: HTML/CSS 파싱 → DOM + CSSOM → Render Tree → 레이아웃 → 페인팅 → 합성(Compositing)
  • JS 엔진: JavaScript 실행, DOM 조작
  • 저장소: Cookie, localStorage, sessionStorage, IndexedDB
  • 보안: 샌드박스, 동일 출처 정책(SOP), CSP, CORS 처리
  • 캐시: 메모리/디스크 캐시(재방문 속도↑)
• 핵심 포인트
  • HTTP는 Stateless → 상태는 주로 쿠키/스토리지로 유지
  • 이벤트 루프가 JS 실행과 렌더링 타이밍 조율 (메인 스레드 바쁨 = UI 멈춤)

---

3) 웹서버: 하는 일 & 배치 형태

• 역할: 클라이언트(브라우저) 요청을 받아 정적 파일 또는 동적 결과 반환
• 소프트웨어 예: Nginx, Apache(정적·리버스 프록시), 애플리케이션 서버(Node/Express, Django, Spring 등)
• 배치 패턴
  • 리버스 프록시: 앞단에서 SSL 종료, 캐싱, 압축, 라우팅
  • 로드 밸런서: 여러 서버로 트래픽 분산
  • CDN: 가까운 캐시 서버에서 정적 리소스 제공 → 지연 감소
• 자주 쓰는 포트: 80(HTTP), 443(HTTPS)

---

4) 브라우저 ↔ 웹서버 대화(요청/응답 사이클)

1. 주소창에 https://example.com/path?x=1 입력
   → URL: scheme(https) / host(example.com) / port(기본 443) / path(/path) / query(x=1) / fragment(#…)
2. DNS 조회: 도메인 → IP
3. TCP 3-way + (HTTPS면) TLS 핸드셰이크
4. HTTP 요청 전송 (메서드, 헤더, 바디)
5. 서버 처리 → HTTP 응답(상태코드, 헤더, 바디)
6. 브라우저가 HTML 파싱 중 추가 리소스(CSS/JS/이미지) 요청
7. 캐시/압축/병렬 전송(HTTP/2 멀티플렉싱)로 성능 최적화

요청/응답 예시

GET /articles/1?view=full HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: ...

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: max-age=600
Set-Cookie: sid=abc...; HttpOnly; Secure; SameSite=Lax

---

5) HTTP 기초 체크리스트

• 메서드: GET(조회), POST(생성/전송), PUT/PATCH(수정), DELETE(삭제), HEAD, OPTIONS
• 상태코드 구간: 2xx(성공), 3xx(리다이렉트), 4xx(클라 오류), 5xx(서버 오류)
  • 자주 보는 코드: 200, 301/302, 304, 400, 401, 403, 404, 500
• 핵심 헤더
  • 요청: Host, Accept, Authorization, Cookie, Origin
  • 응답: Content-Type, Cache-Control, ETag, Set-Cookie, Location, CORS 관련(Access-Control-Allow-*)
• HTTP 버전 차이
  • 1.1: Keep-Alive로 연결 재사용
  • 2: 멀티플렉싱, 헤더 압축 → 지연↓
  • 3: QUIC(UDP 기반) → 불안정 네트워크에서 안정성↑

---

6) 인증/세션(자주 헷갈리는 부분)

• 쿠키: 자동 첨부되는 작은 키-값. 옵션 HttpOnly, Secure, SameSite 중요
• 세션: 서버가 사용자 상태를 서버측 저장소에 보관, 클라이언트는 세션ID만 보관
• 토큰(JWT): 클라이언트가 토큰 자체를 보관·전송, 서버는 검증 중심
• 보안 요약
  • XSS: 신뢰 못할 입력이 스크립트로 실행 → 출력 인코딩/CSP
  • CSRF: 사용자의 의도 없는 요청 유도 → SameSite/CSRF 토큰/Origin 검증

---

7) 성능 최적화 한 장

• 캐시 전략: Cache-Control: max-age, ETag/If-None-Match
• 압축: gzip, br
• 리소스 최적화: 이미지 포맷/용량, 코드 스플리팅, lazy-load
• 프리로드/프리페치: <link rel="preload|prefetch">
• CDN로 물리적 거리 단축

---

8) 브라우저 보안 모델 요약

• SOP(동일 출처 정책): 스킴+호스트+포트가 같아야 JS가 자유 접근
• CORS: 다른 출처 자원 허용을 서버 응답 헤더로 선언 (Access-Control-Allow-Origin 등)

---

9) 빠른 암기용 키워드(10)

1. DOM+CSSOM → RenderTree → Layout → Paint
2. HTTP = Stateless (상태는 쿠키/스토리지)
3. DNS → TCP/TLS → HTTP
4. 80/443, HTTPS=TLS
5. HTTP/2=멀티플렉싱, HTTP/3=QUIC
6. 2xx/3xx/4xx/5xx
7. Cookie: HttpOnly/Secure/SameSite
8. SOP & CORS
9. Cache-Control/ETag
10. CDN/Reverse Proxy/Load Balancer

---

10) 미니 흐름도(메모용)

주소창 입력
 → DNS 조회
 → (TCP) + TLS 핸드셰이크(HTTPS)
 → HTTP 요청(메서드/헤더/바디)
 → 서버 처리(정적/동적, 캐시/DB/로직)
 → HTTP 응답(상태코드/헤더/바디)
 → 브라우저 파싱·렌더링(추가 리소스 재요청)

 

 

GUI프레임워크

https://flutter.dev/

Flutter - Build apps for any screen

 

 

 

 

 

 

 

 

 

 

 

---

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.