3/8 취준 기록 - 5일차

기술 면접 질문 리스트

 

1. Javascript의 호이스팅에 대해 설명해주세요.
2. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
3. 브라우저의 작동방식에 대해서 설명해주세요

---

1. Javascript의 호이스팅에 대해 설명해주세요.

답변: 
자바스크립트의 식별자가 마치 현재 스코프의 최상단으로 끌어올려진 것 처럼 동작하는 것을 호이스팅이라 합니다.
var, let, const 키워드 모두 호이스팅이 발생하지만, let과 const는 호이스팅 되지 않는 것 처럼 동작합니다.
그 이유로 var 키워드는 선언과 초기화가 동시에 일어나 undefined가 할당되기 때문에 선언문 이전에 변수 참조 시 에러가 발생하지 않습니다. 반면, let과 const는 선언과 초기와 단계가 분리되어 있어 초기화 이전 변수 참조 시 ReferenceError가 발생합니다. 스코프 최상단과 변수 초기화 이전의 영역을 일시적 사각지대 TDZ라고 부르는데, 이 영역에서 변수를 참조할 경우 에러가 발생합니다.

자바스크립트의 호이스팅은 스코프의 최상단으로 변수 선언문이 끌어올려진 것 처럼 동작하는 것을 말합니다.
var, let , const 키워드 모두 호이스팅이 발생하지만, 동작에 차이가 있습니다.
var 키워드는 변수 선언 단계와 초기화 단계가 동시에 진행돼 undefined로 초기화 되므로 선언문 이전에 변수 참조가 가능합니다.
let, const 키워드는 변수 선언 단계와 초기화 단계가 분리되어 진행돼 자바스크립트 코드 실행 흐름이 선언문에 도달하기 이전에 변수를 참조하게 될 경우 참조에러가 발생하는 데, 스코프 최상단 부터 초기화 이전의 영역을 TDZ(일시적 사각지대)라 하며 이 영역에서 변수를 참조할 경우 참조에러가 발생합니다.

함수도 함수 호이스팅이 발생합니다.
함수 선언문의 경우 undefined로 초기화 되는 것이 아닌 함수 객체로 초기화 되기 때문에 함수의 호출이 가능합니다.
함수 표현식의 경우 함수 리터럴을 변수에 할당하기 때문에 변수 호이스팅처럼 동작하므로 함수 표현식 이전에 변수를 참조할 경우 undefined로 평가됩니다.

2. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.

답변: 
동기는 한 번에 하나의 작업만을 수행하고 현재 작업이 끝난 후 다음 작업을 수행합니다.
즉, 코드가 실행될 때 위에서 아래로 순차적으로 동작하는 방식을 말합니다.
동기 프로그래밍은 직관적이지만, 작업이 오래걸리거나 응답이 늦어지는 경우 처리될 때 까지 대기하고 다른 상호작용이 불가능합니다.
비동기는 현재 작업이 완료되지 않았음에도 다른 작업을 수행할 수 있습니다.
이전의 작업이 아직 수행중이거나 응답과는 상관없이 다른 작업을 동시에 처리할 수 있는데, 
병렬로 작업을 처리하므로 프로그램의 실행 흐름이 중단되지 않고, 총 코드 실행시간을 줄일 수 있습니다.
웹 서비스 사용자의 입장에서 서버로부터 응답을 받는동안에도 유저 인터렉션이 가능하다는 장점이 있습니다.
자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 수행할 수 있는데, 이벤트 루프에 의해 동시에 작업 처리가 가능합니다.

3. 브라우저의 작동방식에 대해서 설명해주세요

답변:  
1) 브라우저 주소창에 url을 입력하면 브라우저는 DNS(Domain Name System) 서버를 통해 IP주소를 받아온다 그리고 브라우저는 IP주소를 이용해서 서버에 요청을 보낸다. 서버로 부터 받은 HTML과 CSS 파일을 파싱하고 DOM Tree(Document Object Model)와 CSSOM Tree(CSS Object Model)을 만든다.
 
2) DOM Tree와 CSSOM Tree를 바탕으로 화면에 그리기 위한 Render Tree를 만든다. Render Tree는 스타일 정보가 설정되어 있으며 실제 화면에 표시되는 노드들로만 구성되어 있다.
 
3) Render Tree를 바탕으로 Viewport 내에서 각 노드들의 정확한 위치와 크기(Layout)를 계산한다.
 
4) Layout 계산이 완료되면 실제 화면이 그려지는데 Render Tree를 바탕으로 실제 픽셀값을 채워넣는 Paint가 발생한다