JavaScript 주니어 개발자 기술면접

var는 함수 스코프를 가지며 재할당과 재선언이 가능하고, 호이스팅 시 undefined로 초기화됩니다. let은 블록 스코프를 가지며 재할당은 가능하지만 재선언은 불가능하고, 호이스팅되지만 TDZ(Temporal Dead Zone)로 인해 선언 전 접근이 불가능합니다. const는 let과 동일하게 블록 스코프를 가지지만 재할당이 불가능하며, 선언 시 반드시 초기화해야 합니다. 실무에서는 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 권장됩니다.

CORS 에러는 브라우저의 동일 출처 정책(Same-Origin Policy)으로 인해 발생합니다. 프로토콜, 도메인, 포트 중 하나라도 다르면 다른 출처로 간주되어 리소스 접근이 차단됩니다. 해결 방법으로는 서버에서 Access-Control-Allow-Origin 헤더를 설정하는 방법, 프록시 서버를 중간에 두는 방법, 개발 환경에서는 webpack-dev-server의 proxy 설정을 활용하는 방법이 있습니다. Preflight 요청이 필요한 경우 서버에서 OPTIONS 메서드도 처리해야 합니다.

debounce는 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트가 발생한 후 일정 시간이 지나면 한 번만 실행하는 기법입니다. throttle은 일정 시간 간격으로 최대 한 번만 실행되도록 제한하는 기법입니다. debounce는 검색창의 자동완성처럼 사용자 입력이 끝난 후 API를 호출할 때 적합하고, throttle은 스크롤 이벤트나 리사이즈 이벤트처럼 일정 간격으로 계속 실행되어야 하는 경우에 적합합니다. 둘 다 성능 최적화를 위해 불필요한 함수 호출을 줄이는 목적으로 사용됩니다.

map은 배열의 각 요소를 변환하여 새로운 배열을 반환하는 메서드로, 원본 배열과 동일한 길이의 배열을 생성할 때 사용합니다. filter는 조건을 만족하는 요소만 선택하여 새로운 배열을 반환하므로, 특정 조건으로 데이터를 걸러낼 때 사용합니다. reduce는 배열의 모든 요소를 순회하며 하나의 값으로 축적(accumulate)하는 메서드로, 합계 계산, 객체 변환, 중첩 배열 평탄화 등 다양한 용도로 활용됩니다. 세 메서드 모두 원본 배열을 변경하지 않는 불변성을 유지합니다.

Lazy Loading은 뷰포트에 보이지 않는 이미지를 즉시 로드하지 않고, 사용자가 스크롤하여 해당 영역에 도달할 때 로드하는 기법입니다. 초기 페이지 로딩 속도를 개선하고 불필요한 네트워크 대역폭 사용을 줄일 수 있습니다. 구현 방법으로는 img 태그의 loading 속성에 lazy 값을 설정하는 네이티브 방식, Intersection Observer API를 사용하여 요소의 가시성을 감지하는 방식, 또는 react-lazyload 같은 라이브러리를 활용하는 방법이 있습니다. 최신 브라우저에서는 네이티브 lazy loading이 가장 간단하고 효과적입니다.