1. 클로저에 대해서 설명해주세요.
클로저란, 함수가 선언될 때의 스코프를 기억하며, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말한다.
(함수가 자신이 생성된 환경을 기억하는 것)
자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다.
1-1. 클로저는 언제 활용하나요?
클로저는 변수와 함수의 접근 범위를 제어하고, 특정 데이터와 상태를 유지하기 위해 사용된다.
1) 데이터 은닉 : 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있다. 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있다. 특정 함수 내부에서만 접근 가능한 변수를 생성하고, 조작할 수 있는 함수만 외부로 노출하여 안전하게 데이터를 관리한다.
2) 비동기 작업에 활용 : 비동기 작업에서 이전의 실행 컨텍스트를 유지해야할 때. 콜백 함수가 비동기적으로 실행될 때 클로저를 사용하면 함수 실행 시점의 변수를 참조할 수 있다.
3) 모듈 패턴 구현 : 모듈 패턴이란, 특정 기능을 캡슐화하고, 외부에 공개하고자 하는 부분만 선택적으로 노출하는 것. 코드의 응집력을 높이고, 유지보수성을 향상시키는 패턴이다. 클로저를 활용하면, 필요한 함수와 데이터만 외부로 노출하여 모듈 패턴을 쉽게 구현할 수 있다.
2. reflow와 repaint의 차이점에 대해서 설명해주세요.
reflow란?
브라우저가 페이지의 레이아웃을 다시 계산하는 과정
DOM의 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 한다.
자식요소, 부모요소 모두 영향을 주기에 비용이 많이 든다.
repaint란?
계산 결과를 화면에 다시 그리는 과정
요소의 모양이나 스타일이 변경될 때 발생한다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등 스타일만 변경되는 경우
reflow보다는 비용이 덜 들지만, 성능에 영향을 주기도 한다.
2-1. 클로저는 언제 활용하나요?
1) reflow를 유발하는 CSS 속성 사용을 최소화하는 것
가능한 한 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경하지 않게 한다.
2) CSS 애니메이션 최적화
transform, opacity 속성만 사용하는 것이 성능에 유리하다. GPU 가속을 사용할 수 있어 reflow를 일으키지 않고, repaint만 발생시키므로 CPU 자원을 적게 사용한다.
3) will-change 속성 사용
will-change 속성을 사용하면 브라우저에게 특정 요소가 변경될 것이라고 미리 언질할 수 있다. 하지만 자주 사용하면 메모리 낭비가 발생하기에 필요한 요소에만 적용해야한다.
3. 실행 컨텍스트에 대해서 설명해주세요.
자바스크립트에서 코드가 실행되는 환경을 의미
1) 전역 실행 컨텍스트
자바스크립트가 처음 실행될 때 생성되는 컨텍스트. 프로그램이 종료될 때까지 유지. (전역에 선언된 변수, 함수가 모두 포함되고 어디서든 접근 가능하다.)
자바스크립트는 싱글쓰레드이기 때문에 전역 실행 컨텍스트는 1개만 존재한다.
2) 함수 실행 컨텍스트
함수가 호출될 때마다 생성 되는 컨텍스트. 각 함수는 자신만의 실행 컨텍스트를 가지고, 이 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효하다.
3-1. 실행 컨텍스트는 어떤 구성 요소로 이루어져 있나요?
변수 객체, 스코프 체인, this 구성요소로 이루어져 있다. 구성 요소들을 바탕으로 코드가 실행되는 동안의 환경을 관리하고, 코드 실행 시 변수의 유효 범위나 함수 호출의 맥락을 결정 짓는다.
1) 변수 객체
실행 컨텍스트 내에서 사용되는 변수와 함수 선언을 저장하는 공간. 전역 컨텍스트에서는 전역 객체가 변수 객체 역할, 함수 컨텍스트에서는 활성화 객체가 변수와 매개변수를 관리한다.
활성화 객체란?
함수가 실행될 때 생성되는 특수한 객체
- 함수의 매개변수와 arguments 객체를 초기에 저장한다.
- 함수 내부에서 선언된 변수들을 저장한다.
- 함수 스코프에서 변수 검색의 기준점 역할을 한다.
2) 스코프 체인
현재 실행중인 컨텍스트와 외부 렉시컬 환경의 연결을 유지한다. 변수를 참조할 때 현재 컨텍스트에서 찾지 못하면 외부 환경으로 범위를 넓혀가며 변수를 찾는다.
var x = 'global';
function outer() {
var y = 'outer';
function inner() {
var z = 'inner';
console.log(x); // 'global'
console.log(y); // 'outer'
console.log(z); // 'inner'
}
inner();
}
outer();스코프 체인
inner 함수: [inner scope] → [outer scope] → [global scope]
변수 검색 순서:
- z: inner scope에서 찾는다.
- y: inner scope에 없어서 outer scope에서 찾는다.
- x: inner, outer scope에 없어서 global scope에서 찾는다.
3) this
실행 컨텍스트에 따라 참조하는 객체가 달라진다. 전역 컨텍스트에서는 this가 전역 객체를 가리키고, 함수 컨텍스트에서는 함수 호출 방법에 따라 달라진다.
4. 이벤트 루프에 대해서 설명해주세요.
이벤트 루프는 비동기 작업을 처리할 수 있게 해주는 메커니즘이다.
자바스크립트는 싱글 스레드 기반 언어이므로 한 번에 하나의 작업만 처리할 수 있다.
하지만 이벤트 루프가 콜 스택과 태스크 큐를 관리하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와준다.
콜 스택: 현재 실행 중인 코드들이 쌓이는 곳
태스크 큐: 비동기 작업이 완료되면 그 결과를 대기시키는 곳
예시) setTimeout(callback, 0)
1. setTimeout(callback, 0)을 호출한다.
2. 웹 API에 의해 타이머가 설정된다.
3. 0밀리초 후에 만료되면 콜백 함수가 태스크 큐에 추가된다.
4. 콜스택이 비어있는 시점에 이벤트 루프가 태스크 큐에서 대기 중인 callback을 꺼내서 실행한다.
이벤트 루프 덕분에 자바스크립트는 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적으로 처리할 수 있습니다.
4-1. 앞서 말씀하신 태스크 큐의 종류에는 무엇이 있나요?
매크로태스크 큐와 마이크로태스크 큐로 나뉜다.
매크로태스크 큐: setTimeout, setInterval 같은 일반적인 비동기 작업들이 대기하는 큐
이벤트 루프가 콜 스택과 마이크로태스크 큐의 작업을 모두 처리한 후, 하나씩만 처리한다.
마이크로태스크 큐: Promise.then()과 같이 중요도가 높은 작업들이 대기하는 큐
매크로태스크 큐보다 우선순위가 높다. 이벤트 루프는 콜 스택이 비어있는 시점에 매크로태스크를 실행하기 이전에 마이크로태스크 큐에 있는 모든 작업들을 먼저 처리한다.
'Technical Interview' 카테고리의 다른 글
| FE 질문 (1) (0) | 2025.01.22 |
|---|