Web (26) 썸네일형 리스트형 이벤트 버블링과 캡처링에 대해 설명해주세요. 답변두 개념은 브라우저에서 특정 화면 요소의 이벤트를 감지하는 방식입니다.이벤트 버블링은 이벤트가 가장 깊은 요소에서 시작해 상위 요소로 전파되는 방식입니다. 반대로, 이벤트 캡처링은 상위 요소에서 시작해 하위 요소로 전파됩니다. 기본적으로 브라우저는 이벤트 버블링을 사용하며, 필요 시 addEventListener의 세 번째 인자로 true를 주어 캡처링을 사용할 수 있습니다. 이벤트 전파를 중지하려면 stopPropagation()을 사용할 수 있습니다.이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 가장 깊은 자식 요소에서 발생하여 부모 요소를 거쳐 최상위 요소로 상향 전파되는 방식입니다. 즉, 이벤트가 발생하면 그 이벤트는 해당 요소에서 처리된 후 부모로 전파되고, 계속해서 상.. React의 생명 주기 메서드에 대해 설명해주세요. 답변React의 생명 주기 메서드는 컴포넌트가 생성되고, 업데이트되고, 소멸되는 과정에서 특정 시점에 실행되는 메서드를 말합니다. 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 useEffect 훅으로 대체됩니다. 개념 정리생명 주기의 3단계:마운트(Mounting): 컴포넌트가 처음 DOM에 삽입될 때 실행되는 과정입니다.주요 메서드: constructor(), componentDidMount()업데이트(Updating): 컴포넌트가 상태(state)나 props가 변경되어 리렌더링될 때 실행됩니다.주요 메서드: shouldComponentUpdate(), componentDidUpdate()언마운트(Unmounting): 컴포넌트가 DOM에서 제거될 때 실행되는 과정입니다.주요 메서드: .. Context API와 Redux를 비교해주세요. 답변Context API는 React에 내장된 상태 관리 도구로, 간단한 전역 상태 관리에 적합하며 추가 라이브러리 설치가 필요하지 않습니다. 하지만 성능 최적화가 어렵고 대규모 애플리케이션에는 부적합할 수 있습니다. 반면 Redux는 복잡한 상태 관리와 비동기 처리가 필요한 대규모 애플리케이션에 적합합니다. 단일 스토어에서 상태를 예측 가능하게 관리하며, Redux Thunk나 Saga를 사용해 비동기 로직을 처리할 수 있습니다. 하지만 보일러플레이트 코드가 많고 소규모 프로젝트에서는 복잡도가 증가할 수 있습니다. Context API 특징Context API는 React에 내장되어있어 추가 라이브러리 설치가 필요하지 않음단순한 전역 상태 관리 기법으로 간단하게 사용하기 좋음컨텍스트가 변경되면 해당 컨.. 클로져(Closure)에 대해 설명해주세요. 답변클로저란 함수가 생성될 때 외부 스코프(lexical scope)에 있는 변수들을 기억하고, 그 함수가 해당 스코프 밖에서 실행되더라도 그 변수들에 접근할 수 있게 하는 특성을 말합니다.자바스크립트는 함수가 생성될 때 외부 스코프에 있는 변수들을 함께 저장하는데, 이를 통해 함수가 외부에서 호출되더라도 외부 변수에 접근할 수 있습니다. 클로저를 사용하는 상황 및 이유데이터 은닉외부에서 접근할 수 없는 변수로 만들어 클로저를 통해 보호합니다.이를 통해 내부 함수만이 그 변수에 접근하고 변경할 수 있도록 합니다.function outerFunction() { let count = 0; return function innerFunction() { count++; .. 깊은 복사와 얕은 복사에 대해 설명해주세요. 깊은 복사와 얕은 복사는 객체나 배열을 복사할 때 그 복사의 깊이에 따라 구분되는 개념입니다.얕은 복사는 객체의 최상위 레벨 프로퍼티들만 복사하는 방법입니다. 즉, 객체 내부에 또 다른 객체나 배열이 있을 경우, 그 내부 객체의 참조값만 복사됩니다. 이로 인해 복사된 객체와 원본 객체는 동일한 내부 객체를 참조하게 되어, 한쪽에서 내부 객체를 수정하면 다른 쪽에도 영향을 미치게 됩니다.반면에, 깊은 복사는 객체의 모든 계층의 프로퍼티들을 재귀적으로 복사하여 완전히 새로운 객체를 생성하는 방법입니다. 따라서 복사된 객체와 원본 객체는 완전히 독립적인 상태가 되며, 한쪽을 수정해도 다른 쪽에 영향을 주지 않습니다.예를 들어, JavaScript에서 얕은 복사는 Object.assign()이나 전개 연산자(... this에 대해 설명해주세요. this는 현재 실행 컨텍스트에서의 객체 참조를 나타냅니다. 즉, 함수가 호출될 때 결정되는 객체를 가리키며, 함수가 어떻게 호출되었는지에 따라 'this'의 값이 달라집니다.1. 전역 컨텍스트에서의 this전역 영역에서의 'this'는 브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다.console.log(this); // window 객체를 출력2. 함수 호출에서의 this일반 함수에서 'this'는 기본적으로 전역 객체를 가리킵니다. 하지만 **엄격 모드(strict mode)**에서는 undefined가 됩니다.function showThis() { console.log(this);}showThis(); // window 객체를 출력 (엄격 모드에서.. 호이스팅에 대해 설명해주세요 호이스팅(Hoisting)은 자바스크립트에서 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 이는 코드의 작성 순서와는 관계없이 자바스크립트 엔진이 실행 시점에 선언부를 먼저 처리하기 때문에 발생합니다. 예를 들어, var 키워드로 변수를 선언하면 호이스팅이 발생하여 변수 선언이 코드의 최상단으로 이동합니다. 하지만 변수의 할당은 원래 위치에 남아 있기 때문에, 선언 전에 변수를 참조하면 undefined를 반환합니다.console.log(a); // undefinedvar a = 5;위 코드에서 a는 호이스팅으로 인해 선언부가 위로 올라가지만, 값이 할당되기 전이므로 undefined가 출력됩니다.반면에 let과 const로 선언한 변수는 호이스팅이 되지만, Tempora.. var, let, const 차이를 설명해주세요 답변var, let, const는 자바스크립트에서 변수를 할당할 때 사용하는 키워드입니다.먼저 var는 함수 스코프를 따르고, 블록 스코프를 무시하고 호이스팅이 발생해 변수 선언 전 접근 시 undefined가 반환됩니다. 또한 변수 재할당이 가능합니다.let은 블록 스코프를 따르며, 호이스팅이 되지만 선언 전 접근 시 ReferenceError가 발생합니다.let 역시 재할당이 가능합니다.const도 블록 스코프를 따르며, 호이스팅이 되지만 선언 전 접근 시ReferenceError가 발생합니다. 또한 const는 재할당이 불가능합니다.다만 객체나 배열의 내부 값은 변경할 수 있습니다. 꼬리 질문var가 블록 스코프를 무시할 때 발생할 수 있는 실제 문제는 무엇인가요?var는 함수 스코프를 따르기 때문.. 이전 1 2 3 4 다음