Web/Frontend 기본 CS 정리 (20) 썸네일형 리스트형 렉시컬 환경(Lexical Environment)에 대해 설명해주세요. 답변렉시컬 환경은 코드가 실행될 때 변수를 저장하고 참조하는 구조를 나타내는 개념입니다.자바스크립트에서 함수나 블록이 실행될 때마다 렉시컬 환경이 생성되고, 그 안에서 변수들이 어떻게 선언되고 참조되는지 정의됩니다. 개념 정리스코프 개념 다시 잡기스코프란, 변수나 함수의 유효 범위를 의미함특정 변수나 함수를 어느 위치에서 참조할 수 있는지를 나타내며, 스코프에서 벗어난 위치에서 참조할 경우 Reference Error가 발생한다.자바스크립트의 스코프는 크게 전역 스코프와 로컬 스코프로 나눌 수 있음이 둘은 렉시컬 스코프 규칙에 따라 결정됨→ 렉시컬 스코프 규칙 : 변수가 선언된 위치에 따라 접근 가능 범위가 결정됨로컬 스코프로컬 스코프는 다시 함수 스코프와 코드 블록 스코프로 나눌 수 있음→ 이때 let.. CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요. 답변CORS(Cross-Origin Resource Sharing)란 웹 브라우저에서 다른 출처(domain, protocol, port)에서 리소스를 요청할 때 발생하는 보안 정책으로, 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 권한을 제어하는 메커니즘입니다. 이를 통해, 웹 애플리케이션이 악의적으로 다른 도메인의 자원에 접근하지 못하도록 방지할 수 있습니다. 추가 정리CORS란?Cross-Origin Resource Sharing의 약자웹 브라우저가 다른 출처(도메인, 프로토콜, 또는 포트)에서 리소스를 요청할 때 발생하는 보안 기능예를 들어 https://example.com에서 호스팅된 웹 페이지가 https://api.example.com와 같은 곳에서 데이터를 요청하려고 할 때 .. 이벤트 버블링과 캡처링에 대해 설명해주세요. 답변두 개념은 브라우저에서 특정 화면 요소의 이벤트를 감지하는 방식입니다.이벤트 버블링은 이벤트가 가장 깊은 요소에서 시작해 상위 요소로 전파되는 방식입니다. 반대로, 이벤트 캡처링은 상위 요소에서 시작해 하위 요소로 전파됩니다. 기본적으로 브라우저는 이벤트 버블링을 사용하며, 필요 시 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 객체를 출력 (엄격 모드에서.. 이전 1 2 3 다음