[면접준비] 기술 면접 기초 5일차

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

자바스크립트 호이스팅은 함수나 변수 선언이 실제 위치보다 코드 범위의 최상단으로 끌어올려지는 것처럼 보이는 현상으로 자바스크립트 엔진이 코드를 실행하기 전에 코드 분석 과정에서 발생합니다.

• 모든 선언이 영향을 받음: function, var, let, const, class 등 모든 선언이 호이스팅됩니다.
• var 선언: var로 선언된 변수는 선언 위치에 관계없이 코드 범위 최상단에서 undefined로 초기화됩니다.
• let 및 const 선언: let 및 const로 선언된 변수는 호이스팅되지만, 선언 위치까지는 접근 불가능하며, ReferenceError 발생합니다.
• 함수 선언: 함수 선언은 함수 이름 자체를 끌어올리며, 함수 표현식은 호이스팅되지 않습니다.

단점

호이스팅은 예상치 못한 동작을 초래할 수 있으므로 주의해야 합니다. 특히, var 키워드를 사용하여 변수를 선언할 때는 호이스팅으로 인해 의도치 않은 값이 출력될 수 있습니다.

따라서, 명확하고 안전한 코드 작성을 위해 let 및 const 키워드를 사용하는 것이 좋습니다

---

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

 

동기 프로그래밍:

• 작업을 순차적으로 처리합니다.
• 다음 작업을 실행하기 전에 이전 작업이 완료될 때까지 기다립니다.
• 예시: 파일 읽기, API 호출, 사용자 입력 대기

비동기 프로그래밍:

• 작업을 독립적으로 실행합니다.
• 다른 작업을 실행하면서 작업의 완료를 기다리지 않습니다.
• 콜백 함수 또는 이벤트 리스너를 사용하여 작업 완료를 처리합니다.
• 예시: AJAX 요청, 웹 소켓 통신, 이미지 로딩

비동기 프로그래밍의 필요성

1. 응답 속도 향상:

동기 프로그래밍은 모든 작업이 완료될 때까지 기다려야 하기 때문에 응답 속도가 느릴 수 있습니다. 반면에 비동기 프로그래밍은 작업을 독립적으로 실행하여 사용자에게 더 빠른 응답 속도를 제공합니다.

2. 자원 활용:

동기 프로그래밍은 작업 완료를 기다리는 동안 다른 작업을 처리할 수 없어 자원 활용도가 낮습니다. 반면에 비동기 프로그래밍은 여러 작업을 동시에 처리하여 자원 활용도를 높일 수 있습니다.

3. 사용자 경험 향상:

동기 프로그래밍은 작업 처리 중 사용자 상호 작용을 제한하여 사용자 경험을 저하시킬 수 있습니다. 반면에 비동기 프로그래밍은 작업 처리 중에도 사용자 상호 작용을 가능하게 하여 사용자 경험을 향상시킬 수 있습니다.

4. 확장성:

동기 프로그래밍은 작업 수가 증가하면서 관리가 어려워질 수 있습니다. 반면에 비동기 프로그래밍은 작업 수가 증가하더라도 쉽게 확장할 수 있습니다.

5. 웹 개발:

AJAX, 웹 소켓, 웹RTC 등 웹 개발에 사용되는 많은 기술들이 비동기 방식을 기반으로 합니다.

 

---

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

1. 사용자가 주소창에 URL을 입력하면 브라우저는 해당 URL로 HTTP 요청을 생성합니다.
요청은 DNS서버를 통해 도메인 이름을 IP주소로 변환하고, 서버와 TCP/IP 연결을 수락합니다.

2. 서버는 요청을 받고, 필요한 데이터를 포함한 HTTP 응답을 생성하여 브라우저로 전송합니다.이때 브라우저는 응답을 받아 데이터를 읽고 처리합니다.

3. HTML 문서를 파싱하여 DOM트리를 구축합니다. DOM 트리는 문서의 구조를 표현하며 각 HTML 요소는 노드로 표현합니다.

4. CSS파일을 파싱하여 스타일 규칙을 생성하며 DOM트리와 스타일 규칙을 조합하여 계산 후 최종적인 스타일 정보를 형성합니다.

5. DOM트리와 스타일 정보를 결합하여 랜더 트리를 생성합니다. 랜더 트리는 실제 화면에 표시되는 노드들로 구성되며, 각 노드들은 화면에 어떻게 표시될지에 대한 정보를 갖고 있습니다.

6. 랜더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산하여 레이아웃을 수행합니다. 이후 레이아웃에 따라 화면에 요소를 그리는데 이를 페인팅이라고 합니다.

7. HTML 파싱 중에 <script>태그를 만나면 자바스크립트 코드를 다운로드하고 실행합니다.

8. 브라우저는 사용자 입력에 응답하여 이벤트를 처리합니다. 사용자가 클릭하거나 입력하는 등의 동작에 대한 이벤트를 감지 및 등록된 이벤트 핸들러를 실행하여 적절한 동작을 수행합니다.

9. 모든 리소스의 로딩이 완료되면 ‘load’ 이벤트가 발생하며, 이를 통해 페이지 로딩이 완료되었다는 신호를 받을 수 있습니다. 사용자가 볼 수 있는 페이지가 완성되어 화면에 표시됩니다.