실행 컨텍스트
-
자바스크립트 콜스택에 대해서 말씀해주세요.
자바스크립트의 콜 스택은 함수 호출을 추적하고 제어하는 데이터 구조이다. 스택 자료 구조를 사용하여 함수 호출 및 반환을 관리하며, 현재 실행 중인 함수를 추적합니다. 함수가 호출되면 해당 함수의 실행 컨텍스트가 콜 스택에 푸시되고, 함수 실행이 완료되면 팝되어 제거됩니다. 콜 스택은 LIFO(Last-In-First-Out) 구조(후입선출)를 따르므로 가장 나중에 추가된 함수가 가장 먼저 실행되고 완료됩니다.
+) 오버플로우 발생 가능 -
콜 스택 안에 동일한 식별자가 여럿일 때, JS 엔진이 어떻게 outer를 활용해서 의사결정을 할까요?
콜 스택 내에서 동일한 식별자가 여러 번 사용될 때, 자바스크립트 엔진은 "스코프 체인"을 통해 outer(외부) 스코프에서 해당 식별자를 찾습니다. 스코프 체인은 함수 내에서 변수를 찾을 때 해당 함수의 스코프, 그 함수를 감싸는 외부 함수의 스코프, 전역 스코프 순서대로 탐색합니다. 처음 일치하는 변수를 찾으면 그 값을 사용합니다.
+) 변수 셰도잉 개념 -
실행 컨텍스트의 객체에 담긴 정보는 무엇이 있나요?
실행 컨텍스트 객체는 함수가 실행될 때 생성되며, 실행 중인 코드 블록에 대한 정보를 포함하고 있는데, 이 객체는 활성화된 함수 또는 전역 코드와 관련된 변수, 함수 및 범위 정보를 저장합니다. 주요 정보로는
- 해당 함수의 매개변수, 지역 변수, 함수 선언 등의 정보를 포함하는 변수 객체
- 변수 및 함수를 찾을 때 사용되는 스코프 체인 정보가 포함됩니다.
- 또한 함수 내부에서 사용되는 this의 값이 담깁니다.
-
실행 컨텍스트의 역할은 무엇인가요?
- 실행 컨텍스트는 함수의 실행 환경을 설정하고 함수가 실행될 때 필요한 정보를 관리하는데 사용됩니다. 이 정보는 변수 및 함수의 스코프, this 값, 매개변수, 지역 변수 등을 포함합니다. 실행 컨텍스트는 콜 스택에 푸시되어 함수가 실행되며, 함수 실행이 완료되면 팝되어 스택에서 제거됩니다.
-
실행 컨텍스트 렉시컬 환경은 무엇이고 어떤 역할은 하는지 설명해 주세요.
- 실행 컨텍스트의 렉시컬 환경은 변수와 스코프를 관리하는 중요한 역할을 합니다. 렉시컬 환경은 변수 객체와 스코프 체인을 포함하며, 변수의 식별자와 해당 값을 연결하고, 스코프 체인을 통해 변수 및 함수를 검색하는 데 사용됩니다. 이를 통해 변수의 스코프와 스코프 체이닝이 구현됩니다. 렉시컬 환경은 함수가 정의된 시점의 환경을 유지하므로 클로저와 관련된 중요한 개념을 구현합니다.
클로저
-
캡슐화에 대해서 설명하고 이것이 왜 필요한 지 말씀해주세요.
캡슐화는 객체 지향 프로그래밍에서 중요한 원칙 중 하나로, 데이터와 관련 동작을 하나의 단일 단위로 묶는 것을 의미합니다. 이는 데이터와 관련된 함수(메서드)를 하나의 객체 내에 묶어 정보 은폐와 보호를 제공합니다.
- 정보 은폐: 객체 내부의 데이터를 외부로부터 감춤으로써 데이터의 무단 접근을 방지합니다. 이로써 객체 내부 구현을 숨겨 정보 노출을 최소화할 수 있습니다.
- 모듈화: 관련된 데이터와 동작을 논리적으로 그룹화하여 코드의 유지 보수와 확장을 용이하게 합니다.
- 안정성: 캡슐화는 데이터에 접근을 제한하므로 데이터 일관성을 유지하고 오류를 방지하는데 도움을 줍니다.
-
클로저의 예시를 들고 과정을 설명하세요.
- 클로저는 함수가 다른 함수 내부에서 정의되고, 외부 함수의 변수에 접근할 때 발생합니다.
function outerFunction() {
const outerVariable = 10;
function innerFunction() {
console.log(outerVariable); // outerVariable에 접근
}
return innerFunction;
}
const closureFunc = outerFunction(); // outerFunction 실행
closureFunc(); // innerFunction 실행 (outerVariable에 접근)outerFunction은 innerFunction을 반환하며, closureFunc가 innerFunction을 참조합니다. 이때, innerFunction은 outerVariable에 접근할 수 있는데, 이것이 클로저의 핵심입니다. innerFunction은 외부 함수의 변수를 기억하고 사용할 수 있습니다.
-
클로저란 무엇인가요?
클로저는 함수가 다른 함수 내에서 정의되고, 외부 함수의 변수를 기억하고 사용하는 함수입니다. 이로써 외부 함수의 변수가 외부 스코프를 벗어난 후에도 접근 가능하게 됩니다. 클로저는 함수와 그 함수가 생성될 때의 렉시컬 환경(스코프) 간의 관계를 나타내는 개념입니다.
-
클로저가 유용하게 사용되는 상황에 대해 설명해주세요.
- 정보 은폐: 클로저를 사용하여 변수를 은폐하고 필요한 정보에 안전하게 접근할 수 있습니다.
- 콜백 함수: 비동기 작업에서 콜백 함수로 클로저를 활용하여 외부 변수를 유지하고 조작할 수 있습니다.
- 데이터 보호: 클로저를 활용하여 데이터를 읽기 전용으로 만들거나 특정 조건에 따라 데이터를 수정할 수 있게 제어할 수 있습니다.
-
React hook에서 클로저가 어떻게 쓰이는지 설명해 주세요.
- React Hook 중에서 useEffect에서 클로저가 자주 사용됩니다. useEffect는 컴포넌트의 상태나 프롭스가 변경될 때 특정 동작을 실행할 때 사용됩니다. 이때 클로저를 사용하여 useEffect 내에서 외부 변수나 상태를 참조하고 이전 값을 유지할 수 있습니다. 예를 들어, 특정 상태의 변경을 감지하고 이전 값과 현재 값의 비교를 수행할 때 클로저가 유용하게 활용됩니다.
+) useState로 설명
- React Hook 중에서 useEffect에서 클로저가 자주 사용됩니다. useEffect는 컴포넌트의 상태나 프롭스가 변경될 때 특정 동작을 실행할 때 사용됩니다. 이때 클로저를 사용하여 useEffect 내에서 외부 변수나 상태를 참조하고 이전 값을 유지할 수 있습니다. 예를 들어, 특정 상태의 변경을 감지하고 이전 값과 현재 값의 비교를 수행할 때 클로저가 유용하게 활용됩니다.
DOM
-
이벤트 버블링에 대해서 설명해주세요.
- 이벤트 버블링은 HTML 요소에서 발생한 이벤트가 해당 요소에서 상위 요소로 전파되는 현상을 말합니다. 이벤트가 발생한 요소에서 상위 요소로 이벤트가 전파되면서 각 상위 요소에서도 이벤트 핸들러가 호출됩니다. 이벤트 버블링은 이벤트 처리 및 위임에 영향을 미치는 중요한 개념입니다.
-
DOM 트리 최상위 노드가 무엇이며, 그것의 특징을 말해주세요.
- DOM(Document Object Model) 트리의 최상위 노드는
<html>요소입니다. 이 노드는 모든 웹 페이지의 루트 요소로서, 다른 모든 HTML 요소와 그들의 계층적 구조의 부모입니다. 이 노드의 특징은 다음과 같습니다:
웹 페이지의 시작점이며, 모든 요소는 이 노드 아래에 존재합니다.
<html>요소는<head>와<body>요소를 직접 자식으로 가지고 있으며, 웹 페이지의 구조를 정의합니다.
- DOM(Document Object Model) 트리의 최상위 노드는
-
이벤트 위임이 무엇인가요?
- 이벤트 위임은 하위 요소가 아닌 상위 요소에 이벤트 핸들러를 등록하여 하위 요소에서 발생한 이벤트를 처리하는 기법입니다. 이를 통해 동적으로 생성되는 요소나 많은 요소에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다.
-
HTML 어트리뷰트와 DOM 프로퍼티의 차이는 무엇인가요?
- HTML 어트리뷰트는 HTML 요소의 속성(attribute)을 나타내며, 일반적으로 문자열로 값이 표현됩니다. JavaScript에서 이 속성을 읽을 수 있으며, getAttribute 메서드로 접근 가능합니다.
- DOM 프로퍼티는 JavaScript 객체로 나타내어지는데 DOM 프로퍼티는 해당 요소의 현재 상태를 나타내며, JavaScript로 접근 및 수정할 수 있습니다. 예를 들어, element.id로 DOM 프로퍼티에 접근할 수 있습니다. DOM 프로퍼티는 동적으로 변경될 수 있으며, HTML 어트리뷰트와 항상 동기화되지는 않습니다.
- 간단히 말하면, HTML 어트리뷰트는 초기 HTML 속성을 나타내고, DOM 프로퍼티는 해당 요소의 현재 상태 및 값을 나타냅니다.
-
DOM 조작 시 어떤 점을 주의하며 개발했는지 말해 주세요. 없다면 DOM 조작 시 주의해야 할 사항에는 어떤 것이 있는지 말해 주세요.
- 성능: DOM 조작은 비용이 많이 들 수 있으므로 최대한 효율적으로 처리해야 합니다.
- 캐싱: DOM 요소에 대한 참조를 캐싱하여 중복 탐색을 피하고 조작 속도를 향상시킵니다.
- 이벤트 위임: 이벤트 위임을 활용하여 이벤트 처리를 효율적으로 관리하고 메모리 누수를 방지합니다.
- 레이아웃 리플로: 요소 크기 또는 위치를 변경할 때, 레이아웃 리플로(Layout Reflow)를 최소화하려고 노력해야 합니다. 이는 성능에 영향을 줄 수 있는 고비용 작업입니다.
- 보안: 사용자 입력을 동적으로 생성된 HTML로 렌더링할 때, 적절한 입력 값 검증 및 이스케이핑을 수행하여 XSS 공격을 방지합니다.
