부트캠프 63일차 (브라우저, 브라우저 랜더링, 반응형 웹)

오늘의 생각

 

HTMl, CSS 관련해서 꽤 많은 내용들을 하루만에 배웠는데, 생각보다 할 만 했다. 

 

브라우저 동작 원리와 관련 개념들은 네트워크 때 수업을 비롯해 최근 웹 표준 포스팅을 통해 자료 조사 중 어느 정도 알고 있던 부분이라 이해하는데 어렵지 않았다. 

 

브라우저 렌더링은 조금 헷갈렸다. 파싱, DOM 트리, CSSOM 트리 등 모두 한 번쯤 들어는 보았지만 세세한 구동 원리는 완벽히 이해하기 어려움 개념들이었던 것 같다. 시간이 촉박해 추가적인 자료 조사는 하지 못했지만, 복습을 진행하면서 더 찾아볼 예정이다.

 

 

CSS를 더 배우는 건 늘 즐거운 일인 것 같다.

 

디자인적 센스가 뛰어나다고 자부하진 못하지만, 유저 친화적인 디자인을 생각하고 내가 웹 사이트를 만들 때 생각했던 기능들을 부분적이나마 고려하고 구현할 수 있어서 참 재미있다. 

 

---

오늘의 키워드

브라우저, 웹(Web), 사용자 인터페이스(User Interface), 브라우저 엔진(Browser Engine), 렌더링 엔진(Rendering Engine), 자바스크립트 해석기(JavaScript Interpreter), V8 엔진, 힙 메모리(Heap Memory), 콜 스택(Call Stack), 스택 프레임(Stack Frame), 스택 오버플로(Stack Overflow), 스택 추적(Stack trace), 명령어 라인 인터페이스(Command Line Interface, CLI), 일괄 처리 인터페이스(Batch Interface), 그래픽 사용자 인터페이스 (Graphic User Interface, GUI), 웹 스토리지(Web Storage), 로컬스토리지(localStorage), 세션스토리지(sessionStorage), 파싱(Parsing)/파서(parser), DOM Tree (Document Object Model), CSSOM Tree (CSS Object Model), 렌더 트리(Render Tree), 레이아웃, 리플로우(Reflow), 리페인트(Repaint), 모바일 퍼스트(mobile first), 미디어 쿼리(Media Query)

---

오늘의 학습내용

• 웹의 동작 원리
• 브라우저의 정의, 특징, 구조 (사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 자바스크립트 해석기 등)
• V8엔진의 특징과 힙 메모리, 콜 스택, 스택 프레임, 스택 오버플로우 등의 정의
• OS 사용자 인터페이스의 종류 및 각 인터페이스의 특징
• 웹 스토리지의 특징과 로컬 스토리지, 세션 스토리지의 차이점
• 브라우저 렌더링 과정 및 파싱의 정의
• DOM 트리와 CSSOM 트리, 렌더Render 트리의 차이 및 각 트리의 역할
• 레이아웃의 정의 및 페인팅 과정에 따른 리플로우와 리페인트의 차이점, 최적화를 위한 방법
• 반응형 웹을 구성하는 방법, 장점과 단점

 

---

어려웠던 keyword / 활용한 질문

 

Q. 브라우저 렌더링에서 "레이아웃"이란 무엇인가요?

 

A. 레이아웃은 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정으로, 기존의 레이아웃과는 다른 정의를 가집니다. 레이아웃 과정을 통해 각 요소들이 전체 화면에서 어디에, 어떤 크기로, 어떻게 배치가 되어야 하는지 파악할 수 있습니다.

 

Q. 프레임 드랍을 해결하기 위한 최적화 방법으로 무엇이 있나요?

 

A. 불필요한 레이아웃을 줄이고, CSS에서 레이아웃, 페인트를 발생시키는 속성들을 줄여야 합니다. 리플로우 시 리페인트는 필연적으로 일어나므로 가능하다면 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용하는 것이 좋습니다. 또한, 영향을 주는 노드를 줄이기 위해 position을 absolute 또는 fixed를 사용해 영향을 받는 주변 노드들을 줄일 수 있습니다.

 

Q. "모바일 퍼스트"란 무엇인가요?

 

A. 사용자 경험(UX)을 디자인할 때 모바일 사용을 최우선으로 초점을 맞춰 반응형 웹을 디자인하는 것을 말합니다. 모바일 퍼스트를 통해 반응형 웹을 디자인할 경우, 미디어 쿼리 조건을 알맞게 설정해야 합니다.