[1주차] 양성은 PR 제출합니다.

week1/양성은/week1 양성은.md

@@ -0,0 +1,70 @@
+# 웹 브라우저
+
+웹 브라우저는 사용자가 요청한 웹 페이지를 서버에서 받아와 화면에 시각적으로 표시하는 응용 프로그램이다. 쉽게 말해, 웹의 코드를 우리가 볼 수 있는 화면으로 '번역'하고 '그려주는' 역할을 한다.
+
+### 브라우저의 주요 구조와 역할
+
+브라우저는 여러 구성 요소가 유기적으로 작동하여 웹 페이지를 보여준다.
+
+-사용자 인터페이스(UI): 주소창, 버튼 등 사용자가 직접 보고 상호작용하는 부분이다.
+
+-브라우저 엔진: UI와 렌더링 엔진을 연결하고 제어하는 중간 관리자 역할을 한다.
+
+-렌더링 엔진 (핵심): HTML, CSS 코드를 해석해 실제 화면을 그리는 가장 중요한 부분이다.
+
+-통신 (Networking): 서버에 웹 페이지를 요청하고 받아오는 인터넷 통신을 담당한다.
+
+-자바스크립트 해석기: 웹 페이지의 동적인 기능을 구현하는 자바스크립트 코드를 실행한다.
+
+-자료 저장소: 쿠키, 캐시 등 데이터를 컴퓨터에 저장하는 역할을 한다.
+
+### 렌더링 엔진의 동작 과정
+
+브라우저가 코드를 화면으로 바꾸는 과정은 다음과 같은 단계를 거친다. 이 과정은 순차적이면서도 동시에 진행(점진적 진행)되어 사용자가 최대한 빨리 콘텐츠를 볼 수 있게 한다.
+
+1. 파싱  → DOM, CSSOM 트리 생성
+
+    -브라우저는 HTML 코드를 한 줄씩 읽어 DOM(문서 객체 모델) 트리라는 구조로 변환한다. 이 DOM은 자바스크립트가 웹 페이지를 조작할 수 있는 '다리' 역할을 한다.
+
+    -동시에 CSS 코드를 파싱하여 CSSOM(CSS 객체 모델) 트리를 만든다.
+
+    -특징: HTML 파싱은 문법 오류에 너그럽게 대처하여 구조를 최대한 만들어내지만, CSS는 문법이 틀리면 해당 부분을 그냥 무시한다.
+
+2. 렌더 트리생성
+
+    -파싱으로 만들어진 DOM 트리와 CSSOM 트리를 결합하여 화면에 실제로 '보여질' 요소만으로 구성된 렌더 트리를 만든다. 
+
+3. 레이아웃
+
+    -렌더 트리를 기반으로, 각 요소들이 화면의 어디에, 어떤 크기로 위치할지 정확한 좌표와 크기를 계산한다.
+
+4. 페인팅
+
+    -레이아웃 계산이 끝나면, 각 요소를 화면에 실제로 픽셀 단위로 그린다.
+
+
+## DOM, 가상 DOM, 그리고 자바스크립트
+
+-DOM (Document Object Model): 자바스크립트가 HTML 문서의 내용이나 구조를 변경할 수 있도록, 문서를 객체 형태로 구조화한 모델이다. 즉, 자바스크립트가 웹 페이지를 동적으로 만드는 통로이다.
+
+-가상 DOM (Virtual DOM): 실제 DOM을 직접 자주 변경하면 성능이 저하될 수 있다. 가상 DOM은 이런 문제를 해결하기 위해, 변경 사항을 메모리상의 가상 복사본에 먼저 적용한 뒤, 최종 변경분만 실제 DOM에 '한 번에' 반영하여 성능을 최적화하는 프로그래밍 개념이다. 주로 React, Vue 같은 라이브러리에서 사용한다.
+
+# CSR vs SSR
+
+웹 페이지를 어떻게 그려서 사용자에게 보여주느냐에 따라 크게 두 가지 방식으로 나뉜다.
+
+- SSR
+
+    -전통적인 방식으로, 서버에서 완성된 HTML 페이지를 만들어 사용자에게 전달한다.
+
+    -장점: 초기 로딩 속도가 빠르고, 검색 엔진 최적화에 유리하다.
+
+    -주로 여러 페이지로 구성된 MPA에서 사용된다.
+
+- CSR
+
+    -서버는 뼈대만 있는 HTML을 보내고, 실제 내용은 사용자의 브라우저에서 자바스크립트가 동적으로 생성한다.
+
+    -장점: 초기 로딩 후에는 페이지 전환이 매우 부드럽고 빠르다.
+
+    -주로 단일 페이지로 구성된 SPA에서 사용된다.

week2/week02.md

@@ -0,0 +1 @@
+깃허브 특강