Kim-Baek 개발자 이야기

브라우저에서 html을 그리기 위해서 여러 가지 과정이 있다는 것을 알고 있었지만 정확하게 알지 못했는데, 렌더 트리가 어떻게 그려지고, 어떤 과정인지를 정확하게 설명하고 있는 내용이다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 클라이언트 (브라우저) 를 보면 렌더링엔진과 자..

프론트엔드 관련 테스트를 하면서, 항상 사용했던 것이 브라우저의 개발자 도구이다. 개발자 도구를 통해서 어떤 행동을 할 수 있을지를 아래에서 설명한다. 1.1 개발자 도구 크롬 브라우저가 제공하는 개발자 도구(DevTools)은 자바스크립트 개발에 필수적인 강력한 도구이다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도의 설치가 필요없다. 개발자 도구는 아래의 단축키로 오픈할 수 있다. 단축키 Windows F12 또는 Ctrl + Shift + I macOS command ⌘ + option ⌥ + I 예전에 프론트엔드를 개발할 때 가장 어려운 것이 무엇일까요? 라는 질문을 들은 적이 있다. 그 때의 나는 디버깅이 아닐까요 라고 대답을 했던 것 같다. 사실 프론트엔드의 디버깅을 내가 잘 할 줄 ..

- Type 통일 : 부모타입에 자식객체를 모두 대입가능 상속 -> 다형성 + overriding -> abstract -> Interface - 코드 재사용 -> 타입통일 : 다형성을 위해 사용이 된다. ※ 객체와의 좋은 관계 1. high cohesion (높은 집중도) (하나의 클래스가 하나의 일만 하자) : 단일 책임 2. loose coupling (느슨한 연결) - 관계가 깊을수록 다른 쪽에 영향을 끼칠 가능성이 많다. ◎ 내부 class (Nested class, inner class) - JDK 1.1 에서 추가되었다. GUI에 대한 것이 많이 바뀌게 되었는데, 그것을 지원하기 위해 나오게 되었다. class A{ class B{ } -> class 안에 class를 정의 -> 외부 cla..