기술면접 (33) 썸네일형 리스트형 13_Javascript의 호이스팅에 대해 설명해주세요. ✅ 호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 소스 코드의 맨 위로 끌어올려지는 것을 의미합니다. 이는 실제로 코드의 위치와 상관 없이 변수 및 함수 선언이 컨텍스트(함수 스코프 or 전역 스코프)의 맨 위로 옮겨지는 것을 의미합니다. ✅ 변수 호이스팅: JavaScript에서는 변수 선언이 선언되기 전에도 사용할 수 있습니다. 이는 변수가 해당 스코프의 맨 위로 끌어올려진 후에 선언된 것처럼 동작합니다. console.log(x); // undefined var x = 5; 위의 코드에서 x 변수는 선언되기 전에 console.log()에서 사용되었지만, 오류가 발생하지 않고 undefined를 출력합니다. 이는 변수 선언이 호이스팅되어 해당 스코프의 맨 위로 끌어올려졌기.. 12_JSX란 무엇인가요? ✅ JSX(JavaScript XML) JavaScript에서 UI를 작성하기 위한 XML과 유사한 문법을 제공하는 확장 문법입니다. 주로 React.js에서 사용되며 JavaScript 코드 안에 마크업을 작성할 수 있게 해줍니다. JSX는 가독성이 높고 컴포넌트 기반의 개발을 용이하게 해주는 장점을 가지고 있습니다. JSX는 JavaScript와 XML을 조합한 것으로 JavaScript 표현식을 포함할 수 있으며 HTML과 유사한 구조를 가지고 있습니다. JSX 코드는 일반적으로 컴파일되어 JavaScript 함수 호출이나 객체로 변환되어 브라우저에서 실행됩니다. 11_데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은? ✅ 데이터가 많은 무한 스크롤(infinite scroll)을 구현할 때 가장 중요하게 고려해야 할 7가지 포인트 1️⃣ 성능 최적화: 많은 양의 데이터를 처리할 때 성능이 중요합니다. 스크롤 동작이 부드럽고 빠르게 이루어져야 합니다. 데이터를 효율적으로 관리하고, 필요한 만큼만 로드하도록 최적화된 알고리즘을 사용해야 합니다. 2️⃣ 가상화(Virtualization): 대규모 데이터를 가진 리스트나 테이블을 표시할 때 가상화 기술을 사용하면 성능을 향상시킬 수 있습니다. 화면에 보이는 부분만 렌더링하여 메모리 사용량을 최소화하고 스크롤 속도를 높일 수 있습니다. 3️⃣ 데이터 청크(chunk): 모든 데이터를 한 번에 로드하는 것이 아니라 청크(chunk) 단위로 나누어서 로드하는 방식을 사용할 수 있.. 10_ 연산자 == & 연산자 === ✅ '=='와 '==='는 비교 연산을 수행하는 데 사용됩니다. ✅ '==' 연산자 (동등 연산자): '==' 연산자는 두 피연산자가 동등한지 비교합니다. 두 값의 타입이 다르면 타입 변환을 수행한 후 비교합니다. 이러한 형 변환을 '타입 강제 변환' 또는 '타입 강제 형변환'이라고 합니다. '==' 연산자는 타입 강제 변환으로 인해 예기치 않은 동작을 일으킬 수 있으므로 주의해서 사용해야 합니다. 예를 들어, '1' == 1은 true로 평가됩니다. 여기서 문자열 '1'이 숫자 1로 형 변환되어 비교됩니다. ✅ '===' 연산자 (일치 연산자): '===' 연산자는 엄격한 동등성(strict equality)을 검사합니다. 두 값의 타입과 값이 완전히 같은지를 비교합니다. 타입 강제 변환을 수행하지 않.. 9_Arrow Function 무엇인가? ✅ Arrow Function은 ECMAScript 6(ES6)에서 도입된 새로운 함수 표현 방식으로 기존의 함수 표현식과는 다르게 간결하고 명료한 문법을 제공하여 코드를 더 읽기 쉽고 작성하기 쉽게 만듭니다. // 일반 함수 표현식 function multiply(a, b) { return a * b; } // Arrow Function const multiply = (a, b) => a * b; ✅ Arrow Function의 주요 특징: 1️⃣ 간결한 문법: 일반 함수 표현식보다 더 간결한 문법을 가지고 있습니다. 2️⃣ Lexical this 바인딩: Arrow Function 내에서 this는 함수를 감싸는 외부 스코프의 this와 동일합니다. 이를 Lexical this 바인딩이라고 합니다. .. 8_Async/Await & Promise의 차이 Async/Await와 Promise는 JavaScript에서 비동기 코드를 다룰 때 사용되는 두 가지 기능입니다. ✅ Promise Promise는 JavaScript에서 비동기 작업을 처리하는데 사용되는 객체입니다. Promise는 비동기 작업이 완료되었을 때 성공 또는 실패를 나타내는 대기(pending), 이행(fulfilled), 거부(rejected)의 세 가지 상태 중 하나를 가집니다. Promise는 성공 또는 실패와 관련된 처리기(Handler)를 등록할 수 있습니다. .then()을 사용하여 성공 처리기를 등록하고, .catch()를 사용하여 실패 처리기를 등록할 수 있습니다. ✅ Async/Await async 함수는 Promise를 사용하여 비동기적으로 동작하는 함수를 정의하는 방법.. 7_변수 선언 키워드 var : let : const 차이 var는 ES6 이전의 구식 방식이므로, 보통 let 또는 const를 사용하여 블록 스코프를 지향합니다. 값을 변경할 필요가 없는 경우에는 const를 사용하여 의도를 명확히 할 수 있습니다. 1️⃣ var: 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 var 변수는 해당 함수 내에서만 유효합니다. 호이스팅(hoisting)이 발생합니다. 변수 선언 전에 변수를 사용해도 에러가 발생하지 않고 undefined로 초기화됩니다. 재선언이 가능합니다. 동일한 변수명으로 여러 번 선언해도 문제가 발생하지 않습니다. 2️⃣ let: 블록 스코프를 가집니다. 즉, 블록({}) 내에서 선언된 let 변수는 해당 블록 내에서만 유효합니다. 호이스팅(hoisting)이 발생합니다. 하지만 선언 전에 변수를 사용하.. 6_useEffect 실행 순서 useEffect 훅은 함수 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나 호출되는데, 컴포넌트의 상태나 속성(props) 값이 변경될 때 두 가지 상황에서 실행됩니다. 1. 초기 렌더링(initial render): 컴포넌트가 처음 렌더링될 때 useEffect 훅이 실행됩니다. 이때 useEffect의 두 번째 매개변수로 전달된 배열(dependency array)의 값이 비어 있거나, 배열이 전달되지 않은 경우입니다. 이때 useEffect 훅은 컴포넌트가 화면에 처음 렌더링될 때 한 번만 실행됩니다. 2. 의존성 배열(dependency array)의 값이 변경될 때: useEffect의 두 번째 매개변수로 전달된 배열(dependency array)에 포함된 값이 변경될 때마다 useEffe.. 5_useRef 란 무엇인가? useRef는 React에서 사용되는 Hook 중 하나로, 함수 컴포넌트 내에서 변수를 생성하고 관리할 수 있게 해주는 기능입니다. useRef를 사용하면 컴포넌트가 리렌더링될 때마다 변수가 재생성되지 않고 이전 값이 유지됩니다. 주로 DOM 요소에 대한 참조를 저장하거나, 컴포넌트의 생명주기를 벗어난 값을 유지할 때 활용됩니다. useRef를 사용하면: 1. DOM 요소에 대한 참조 저장: useRef를 사용하여 컴포넌트가 렌더링될 때 생성된 DOM 요소에 대한 참조를 저장할 수 있습니다. 이를 통해 필요한 경우에 DOM 요소에 직접 접근하여 작업할 수 있습니다. 2. 컴포넌트의 생명주기를 벗어난 값 유지: useRef를 사용하여 컴포넌트의 생명주기를 벗어난 값을 유지할 수 있습니다. 이는 컴포넌트가 .. 4_가상 돔(Virtual DOM & 실제 돔(Real DOM) 리액트에서는 가상 돔(Virtual DOM)과 실제 돔(Real DOM)을 사용하여 UI를 관리합니다. 🌿가상 돔(Virtual DOM): 가상 돔은 실제 돔의 가벼운 복사본입니다. 리액트 컴포넌트의 상태(state)나 props가 변경될 때마다 새로운 가상 돔이 생성됩니다. 이전 가상 돔과 현재 가상 돔을 비교하여 변경된 부분을 찾아내고, 해당 부분만을 실제 돔에 반영합니다. 이를 통해 실제 돔에 접근하는 횟수를 최소화하고, 효율적으로 UI를 업데이트할 수 있습니다. 가상 돔은 객체로 이루어져 있어서 메모리에서의 작업이 실제 돔보다 빠르고, DOM 조작이 필요한 시간을 최소화합니다. 🌿실제 돔(Real DOM): 실제 돔은 HTML 문서에 직접적으로 반영되는 문서 객체 모델입니다. 브라우저에서 렌더링되.. 이전 1 2 3 4 다음
