[면접 준비] 프론트엔드 면접 질문과 답변
❓ 브라우저에 대해서 설명해주세요.
브라우저는 다양한 리소스 컨텐츠를 gui를 통해 유저에게 보여주는 소프트웨어이다. 즉 브라우저의 주요 기능은 선택한 웹 리소스( HTML문서이지만, PDF, 이미지 등의 컨텐츠)를 서버에 요청하여 브라우저 창에 표시하는 것이다.
브라우저가 HTML을 해석, 표시하는 방식은 W3C에서 관리하는 표준 사양을 따른다. 또한 각 브라우저는 상호 모방을 통해 유사항 인터페이스 형식을 가진다.
브라우저의 기본 구성 요소
- 사용자 인터페이스 : 주소 표시줄, 뒤로가기 버튼 등이 포함된다.
- 브라우저 엔진 : 주로 랜더링 엔진과 자바스크립트 엔진으로 이루어진다. 렌더링 엔진은 HTML, CSS로 작성된 문서를 해석하고 브라우저 화면에 표시하는 역할을 한다. 자바스크립트 엔진은 JS코드를 해석하고 실행한다. (각 브라우저는 blink, webkit등의 엔진을 사용)
- 네트워킹 : HTTP 요청과 응답을 처리하고 데이터를 브라우저에 전달한다.,
- 데이터 저장소 : 쿠키, 웹 스토리지, 캐시 등과 같이 데이터를 저장하는 공간이다.
❓ 브라우저의 작동 흐름을 설명해주세요.
브라우저의 기본 흐름은 다음과 같다.
1. 네트워킹
- 사용자가 웹 페이지를 요청하면 렌더링 엔진은 해당 URL로 네트워킹 레이어를 통해 요청을 보낸다.
- 웹서버로부터 웹 페이지의 HTML 문서를 8KB 크기 청크로 받아온다.
2. HTML 파싱
- 렌더링 엔진이 서버로부터 받아온 HTML 문서를 파싱하여 DOM(Document Object Model)트리를 생성한다.
3. CSS 파싱
- 렌더링 엔진이 CSS 스타일 시트를 파싱학로 각 DOM 요소에 적용될 스타일을 계산한다.
4. 렌더링 트리 구축
- DOM 트리와 스타일 정보를 기반으로 랜더링 트리를 구축한다. 즉, 렌더 트리를 구축하기 위해서는 DOM(Document Object Model)과 CSSOM(Cascading Style Sheets Object Model)이 필요하다.
5. 레이아웃 프로세스
- 레이아웃 프로세스를 거치며 랜더링 트리를 기반으로 각 요소의 크기와 위치를 계산한다.
6. 페인팅
- 레리아웃을 기반으로 화면에 픽셀을 그리기 시작한다. 즉, 화면에 요소들이 실제로 나타난다.
7. 이벤트 처리
- 사용자 입력 및 JS 이벤트를 처리하고, DOM을 동적으로 조작하고 업데이트한다.
* 웹 페이지의 HTML은 위에서 부터 파싱되어 실행된다. 그렇기에 특정 태그를 조작하는 JS 스크립트는 해당 태그보다 아래 위치해야하는 것이다.(스크립트가 상위에 존재하면 없는 요소를 조작하려할 수 있다.)
* 위 과정은 점진적으로 진행된다. 즉, 엔진은 모든 HTML이 파싱되는 걸 기다리지 않고 렌더링 트리를 빌드하고 배치하게 된다.
❓ DOM에 대해 설명해주세요.
DOM은 Document Object Model의 약자이다.이 모델은 계층적인 트리 구조로 표현되며 각 요소와 텍스트는 노드로 표현된다. 이 노드들이 웹페이지의 구조와 관계를 표현하며, 객체지향적인 특성을 가지고 있어 JS 같은 프로그래밍 언어를 사용하여 동적으로 조작 할 수 있게 된다. 원본 HTML은 단순한 텍스트인 반면 DOM은 이와 거의 일대일로 매칭되는 객체 모델이다.
특징
- 계층 구조
- 객체 지향 설계
- 이벤트 처리
- 플랫폼 독립성
DOM 트리의 루트는 Document객체이다.
❓ 호이스팅이 필요한 이유에 대해 설명해주세요.
(...내가 이걸 대답 못했었다... 분하다... 개념은 알았지만 왜 필요한지를 생각 해 본 적이 없었다.)
호이스팅이란 변수 및 함수의 선언이 코드의 맨 위로 끌어올려지는 현상을 의미한다. 이 현상은 코드 실행 전 자바스크립트 엔진에 의해 진행된다.
즉, 자바스크립트 엔진은 함수 선언문 해석 -> 변수 초기화 -> 코드 실행, 순으로 코드를 진행한다.
이를 더 자세히 풀어 설명하자면 자바스크립트 엔진은 실행 컨텍스트를 구현할 때 environmentRecord에 식별자의 정보를 수집하게 된다. 즉 특정함 함수가 실행되기 전부터 해당 변수명들은 이미 아는 상태가 되는 것이다. 따라서 추후 해당 함수를 실행할 때(해당 함수의 실행 컨텍스트가 콜스택에 들어갈 때)보다 변수의 선언이 먼저 되어있는 형태가 되는 것이다. 이것이 호이스팅이다.
장점
- 호이스팅을 이용하면 어느 위치에서든 함수나 변수를 호출 할 수 있게 되는 것
단점
- 그러나 호이스팅 현상은 개발자가 의도하지 않아도 일어나기 때문에 의도치 못한 에러를 발생시킬 가능성이 존재한다. 예를 들어 var 선언시에는 undefined가 발생, let과 const는 ReferenceError가 발생하게 된다.
장점보단 단점이 많다고 여겨지지만, 자바스크립트의 핵심적이며 기본적인 특성이며, 스코프와 클로저 등을 이해하기 위함 필수 개념이다.
❓ 자바스크립트의 실행 컨텍스트에 대해 설명해주세요.
실핸 컨텍스트의 구성 요소
변수 환경(Variable Environment)
어휘적 환경(Lexical Environment)
const hello = "hello world";
function justFunc(){
console.log(hello);
const a = 3;
}This 바인딩(ThisBinding)
❓ 자바스크립트의 this 키워드에 대해 설명해주세요.
자바스크립트에서 this는 다른 프로그래밍 언어와 다르게 실행 컨텍스트를 가르키게 된다. 이 this 키워드가 어떤 컨텍스트를 가리킬지는 아래 규칙에 따라 결정된다.
기본 바인딩
- 기본적으로 적용되는 바인딩 방법이다. 다른 바인딩 방식이 적용되지 않으면 이 바인딩이 적용된다.
- this가 전역 객체를 가리킨다.
암시적 바인딩(Implicit Binding)
const obj = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name);
}
};
obj.greet(); // "Hello, Alice"- 객체의 메소드로 함수를 호출하면 this는 그 메소드를 호출한 객체에 바인딩된다.
- 객체의 속성(어트리뷰트, 즉 값)으로 할당된 함수를 호출할 때, 그 함수 내부의 this는 해당 객체를 가르킨다.
- 위 예시 코드에서 function은 greet의 어트리뷰트로 할당되었다. 그렇기에 this는 해당 객체인 obj를 가르키게 된다. 즉 obj.greet()을 호출시 this.name은 obj의 name이다.
명시적 바인딩(Explicit Binding)
- this 컨텍스트를 개발자가 직접 정하는 방식이다.
- 모든 JS 함수가 가지는 call(), apply(), bind() 프로토타입 메소드를 이용해 구현한다.
new 바인딩(new binding)
- 객체를 생성할 때 this의 컨텍스트를 결정하는 방법
❓ ES6에서 도입된 클래스는 다른 언어의 클래스와 다른데, 어떻게 다른지 설명해주세요.
(...이것 또한 대답 못했던 질문)
자바스크립트를 스크립트 언어라고 하는데, 스크립트가 뭔지 설명해주세요.
프로토타입이란?