브라우저

내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..

브라우저가 어떻게 웹 페이지를 사용자에게 보여주는 지 그 과정을 자세하게 아는 것은 프론트엔드 개발자에게 꼭 필요한 지식이라고 생각한다. 따라서 면접 때 충분히 물어볼 수 있고, 면접 때 설사 물어보지 않더라도, 실무에서 트러블 슈팅을 할 때 알고 있어야 하는 내용이라고 생각을 해서 나름대로 정리를 해 보려고 한다. 먼저 아래의 그림을 보자. W3에서 말하는 사용자 액션이 발생하고(ex. https://www.google.com 을 브라우저 url에 입력한다) 브라우저가 이를 감지해서 웹 페이지를 아래의 그림 순서대로 로드한다. 여기에서 노란색 부분은 웹 페이지에서 벗어난 후 문서를 읽어들이기 전을 의미하고, 파란색 부분은 자바스크립트 이벤트는 없고 전부 네트워크 레벨에서 일어나는 일이다. 첫 번째 일어..

오늘은 패스트캠퍼스에서 최근에 수강했던 김태곤님의 강의를 듣고 학습했던 내용을 정리해 보려고 한다. 시작하기에 앞서서 이 강의는 패캠에서 어떠한 대가도 제공받지 않고 직접 수강하고 내용을 정리하는 것임을 밝힌다. 정리는 강의 목차 순서대로 정리했다. 1. 정체되지 않는 프론트엔드 개발자의 일하는 방식 프레임워크를 위주로 공부하다 보면.. 따라가기 급급해진다. 내부적인 원리를 이해하지 못하면 남는 것이 없다. React, Vue는 컴포넌트 기반 개발이라는 공통점 ⇒ 이를 잘 알고 있으면 새로운 기술도 어렵지 않게 배울 수 있다. Homebrew → 패키지 매니저 for Mac VirtualBox → IE 환경 테스트 Frontend Developer : 어플리케이션이 사용자와 맞닿은 접점을 책임지는 사람 ..

오늘은 웹팩이 무엇인지에 대해서 알아보고 기본적인 사용법을 확인해 보려고 한다. 자바스크립트를 사용한 웹 서비스 어플리케이션의 복잡도가 증가하면서 자바스크립트 코드의 양이 많아지고, 이러한 코드를 유지 보수하기 쉽게 만들려고 모듈로 관리하는 방법이 필요하게 되었다. 자바스크립트에서는 ES2015 이전에 모듈을 사용하기 위해서 여러가지 명세가 존재했다. 대표적으로 AMD, CommonJS 등이 있다. 그러다가 ES2015에서 자바스크립트는 표준 모듈 시스템을 제안했다. 우리가 잘 아는 export/import 방식으로 말이다. 안타까운 사실은 모든 브라우저가 이러한 ES2015방식의 모듈 시스템을 지원하지는 않는다는 점이다.(특히 IE가 그렇다) 크롬의 경우 버전 61부터 모듈 시스템을 지원한다. 그래서 ..

프론트엔드 개발자로 면접을 준비하면서 나올 수 있는 질문 리스트를 틈틈이 작성해 보고자 한다. 첫 번째로 웹 브라우저와 HTML 관련된 질문 리스트를 적어 본다. 참고로 이는 화상 면접이나 전화 면접에서 나올 만한 예상 질문들을 정리하는 내용으로, 경력 3년 이하 주니어 개발자 면접을 대비하기 위함이기에 너무 자세하고 깊은 내용보다는 간결하고 핵심적인 내용 위주로 적어보았다. Web Browser 브라우저의 동작 원리를 간단하게 설명해 주세요. 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립..