2025 09 01 스파르타 코딩클럽 1일차

1. 핵심 개념

• 인터넷 (Internet)
  • 네트워크 인프라 (전 세계 컴퓨터를 연결하는 기반 통신망)
• 웹 (Web)
  • 인터넷 위에서 동작, 화면과 정보 제공 서비스
• HTTP (HyperText Transfer Protocol)
  • 웹 동작 기반 기술
  • 클라이언트(브라우저) ↔ 서버 간 요청(Request) & 응답(Response) 프로토콜

---

2. 웹 구성 요소

• 브라우저 (Web Browser)
  • 사용자가 웹에 접속하는 프로그램 (Chrome, Edge, Safari 등)
  • HTML, CSS, JS 해석 → 화면 출력
• 네트워크 (인터넷)
  • TCP/IP 기반 데이터 송수신
• 웹 서버 (Web Server)
  • 클라이언트 요청(Request) → 페이지 응답(Response)
  • 예: Apache, Nginx
• DNS (Domain Name System)
  • 도메인 이름 → 실제 IP 주소 변환
  • www.naver.com → xxx.xxx.xxx.xxx
• 포트 번호 (Port Number)
  • IP가 집 주소라면, 포트는 상세 주소
  • 기본 포트: HTTP(80), HTTPS(443)

---

3. 웹 접속 흐름

1. 사용자가 브라우저에 URL 입력
   → www.naver.com
2. DNS 서버에서 실제 IP 주소 조회
3. 브라우저 → 서버(IP+Port)로 HTTP 요청 전송
4. 웹 서버 요청 분석 → HTML 문서 생성
5. 서버 → 브라우저로 HTTP 응답 전송
6. 브라우저가 HTML, CSS, JS 해석 → 화면 출력

---

4. HTTP 응답 코드

• 1xx (정보) : 요청 처리 중
• 2xx (성공) : 요청 성공 → 200 OK
• 3xx (리다이렉션) : 다른 위치로 이동 필요
• 4xx (클라이언트 오류) : 잘못된 요청 → 404 Not Found
• 5xx (서버 오류) : 서버 내부 문제 → 500 Internal Server Error

---

5. HTML (구조)

• 정의: HyperText Markup Language
• 역할: 웹 문서의 기본 구조
• 구성 요소
  • 태그(Tag): 요소 정의 (<h1>, <p>, <img>)
  • 속성(Attribute): 추가 정보 제공 (src, href, alt)
  • 콘텐츠(Content): 태그 안 실제 내용 (Hello World!)

---

6. CSS (디자인)

• 정의: 웹페이지의 디자인 & 레이아웃 지정하는 스타일 시트 언어
• 구성 요소
  • 선택자(Selector): 대상 지정 (p, .class, #id)
  • 속성(Property): 스타일 지정 (color, font-size)
  • 단위(Unit): px, %, em
  • 박스 모델(Box Model): margin, border, padding, content
• 색상 표기법
  • 이름(red), HEX(#ff0000), RGB(rgb(255,0,0))

---

7. 브라우저 렌더링 과정

1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 생성
3. DOM + CSSOM → 렌더 트리(Render Tree) 구성
4. Layout(배치) → 요소 위치 계산
5. Paint(그리기) → 화면 출력

---

8. 브라우저 기본 구조

브라우저는 사용자가 입력한 웹페이지 요청을 해석하고, HTML/CSS/JS를 화면에 출력하기 위해 여러 컴포넌트로 구성된다.

• 사용자 인터페이스 (User Interface)

  • 주소창, 뒤로가기/앞으로가기, 북마크 등 사용자가 직접 보는 UI 부분

• 브라우저 엔진 (Browser Engine)

  • UI와 렌더링 엔진 사이의 중개자
  • 렌더링 엔진이 요청한 동작을 제어하고 조정

• 렌더링 엔진 (Rendering Engine)

  • HTML, CSS 등을 파싱하여 화면에 표시
  • DOM, CSS를 기반으로 Render Tree 생성 → 배치(Layout) → 그리기(Paint)

• 통신 (Networking)

  • HTTP/HTTPS, TCP/IP 기반으로 서버와 데이터 송수신 담당

• 자바스크립트 해석기 (JavaScript Interpreter)

  • JS 코드를 해석하고 실행하여 DOM, CSSOM을 동적으로 변경 가능

• UI 백엔드 (User Interface Backend)

  • 버튼, 스크롤바, 폰트 렌더링 등 기본적인 UI 요소를 그리는 역할

• 자료 저장소 (Data Persistence)

  • 쿠키, 로컬스토리지(Local Storage), IndexedDB 등 클라이언트 측 데이터 영구 저장

---

9. 브라우저 렌더링 기본 과정

브라우저는 HTML, CSS, JS를 네트워크로 받아와서 화면에 렌더링하는 과정을 거친다.

1. 네트워크 (Network)

   • HTML, CSS, JS 파일을 서버에서 다운로드

2. HTML 파싱 → DOM 트리 (DOM Tree)

   • HTML 문서를 계층적 트리 구조(DOM)로 변환

3. CSS 파싱 → CSSOM 트리 (CSSOM Tree)

   • CSS 파일을 파싱하여 스타일 정보 트리 생성

4. JavaScript 실행

   • JS가 DOM/CSSOM을 수정할 수 있음 → 동적 렌더링 지원

5. Render Tree 생성

   • DOM + CSSOM을 결합 → 화면에 실제 그릴 요소만 포함된 렌더 트리 구성

6. Layout (배치)

   • 각 요소의 크기와 위치를 계산

7. Paint (그리기)

   • 픽셀 단위로 화면에 렌더링

---

궁금점

강의에서는 HTTP와 TCP/IP를 다른 통신처럼 얘기를 해서
서로 무엇이 다른 것인지 검색해본 결과

HTTP가 TCP를 사용하여 데이터를 전달하는 것을 알 수 있었고,
TCP/IP는 운송수단 HTTP는 규칙인 것을 알 수 있었다.
HTTP는 요청과 응답의 형식을 정해놓은 프로토콜이다.