매일 면접 질문

📌 E2E 테스트란?`E2E(End-to-End) 테스트`는 애플리케이션의 전체적인 흐름을 사용자 관점에서 테스트하는 방식입니다. 실제 사용자처럼 애플리케이션을 처음부터 끝까지 사용하면서 모든 기능이 올바르게 작동하는지 확인합니다.주요 특징실제 브라우저 환경에서 테스트 진행사용자 행동을 시뮬레이션버튼 클릭페이지 이동데이터 입력 등`Cypress`, `Playwright` 등의 도구 사용E2E 테스트의 장점사용자 관점의 테스트실제 사용자 경험과 동일한 방식으로 테스트사용자에게 영향을 미치는 오류를 조기 발견통합적 검증UI 상호작용API 호출화면 전환여러 구성 요소의 통합 동작 확인신뢰성 향상프로덕트 안정성 증가배포 후 발생할 수 있는 리스크 감소  📌 E2E 테스트 vs 유닛 테스트유닛 테스트의 한계개..

기본 개념`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.  useEffect`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.주요 특징비동기적 실행화면 표시 후 실행성능에 미치는 영향이 적음사용 사례useEffect(() => { // API 데이터 가져오기 fetchData().then(data => setData(data)); // 이벤트 리스너 등록 window.addEventListener('resize', handleResize); // 클린..

1. 호이스팅이란?`호이스팅(Hoisting)`은 자바스크립트에서 변수와 함수 선언이 코드의 최상단으로 "끌어올려지는" 것처럼 동작하는 현상을 말합니다. 이는 자바스크립트 엔진의 코드 실행 방식 때문에 발생합니다.  2. 인터프리터 언어인데 호이스팅이 가능한 이유자바스크립트는 `인터프리터 언어`로 알려져 있지만, 실제로는 코드 실행 전에 두 가지 주요 단계를 거칩니다:컴파일 단계 (Creation Phase)실행 단계 (Execution Phase)  3. 실행 과정 상세 분석3.1 컴파일 단계 (Creation Phase)이 단계에서는 다음과 같은 작업이 이루어집니다:변수 선언 처리`var`로 선언된 변수는 `undefined`로 초기화`let`과 `const`로 선언된 변수는 초기화하지 않음 (Tem..

`디바운스(Debounce)`와 `쓰로틀(Throttle)`은 연속되는 이벤트나 함수의 호출을 제어하여 최적화하는 기법입니다.`디바운스(Debounce)`는 연속적으로 이벤트가 발생했을 때, 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다. `쓰로틀(Throttle)`은 일정 시간 간격동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 ..

`Virtual DOM(Document Object Model)`은 실제 DOM을 JavaScript 객체로 메모리 상에 복제한 가상 DOM입니다. 실제 DOM 조작은 브라우저의 `리플로우`와 `리페인트` 과정을 거치기 때문에 비용이 많이 드는 작업입니다. React와 같은 프레임워크는 이 Virtual DOM을 활용하여 UI를 효율적으로 관리합니다. Virtual DOM은 실제 DOM 요소의 가벼운 복사본으로, 상태 변경 시 전체 UI를 Virtual DOM에 먼저 렌더링합니다. 컴포넌트의 `상태(State)`가 변경될 때마다 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 `비교(Reconciliation)`하여 변경된 부분만 실제 DOM에 한 번에 `반영(Batch Update..

1. 코드 스플리팅2. 레이지 로딩3. 파일 포맷 변환4. 캐싱5. 비동기, 지연 로딩1. 코드 스플리팅자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.const MyComponent = React.lazy(() => import('./MyComponent')); 2. 레이지 로딩페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그 때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 ..

`이벤트 전파`에는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떠한 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파에는 크게 세 단계로 나눌 수 있습니다.캡처링(Capturing)타겟(Target)버블링(Bubbling) 클릭! 1. 캡처링(Capturing)`캡처링`은 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 즉, 부모에서 자식으로 아래로 내려가며 이벤트가 전파되는 단계를 `캡처링`이라고 합니다.// 캡처링 예시element.addEventListener('..