Q1) 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
"기능의 효율성과 사용자 경험 최적화에 중점"
- 성능 최적화
- 데이터를 특정 개수 만틈 쪼개서 로드
- 스크롤 감지
- 사용자가 페이지 하단에 도달하면 새로운 데이터를 로드, 뷰포트 높이 감지 로직 필요
- 데이터 캐싱
- 이미 로드된 데이터 캐싱. 사용자가 스크롤을 다시 올릴 때 다시 로드하지 않아도 된다.
- 메모리 관리
- 가상 스크롤(Virtual Scrolling)과 같은 기법을 사용해 현재 화면에 보이는 아이템만 리얼 DOM에 렌더링하고 나머지는 제거하여 메모리 관리
- 접근성
- 키보드나 스크린 리더를 사용하는 사용자들도 무한 스크롤을 사용할 수 있게끔 접근성 고려
- SEO 최적화
- 무한 스크롤은 검색 엔진 최적화에 영향을 줄 수 있음, 적절한 페이징 구조와 함께 사용해야 함
예비 답변
시스템의 효율성과 사용자 경험 최적화에 중점을 두어야합니다.
데이터를 특정 개수만큼 나누어 로드하여 성능을 최적화하고 이미 로드된 데이터는 캐싱하여 사용자가 스크롤을 위로 올릴 시 데이터를 다시 로드하지 않도록합니다. 또한, 가상 스크롤과 같은 기법을 사용하여 현재 화면에 보이는 데이터만 리얼 DOM에 렌더링하고 나머지는 메모리에서 제거하여 메모리를 관리해야합니다.
Q2) JSX란 무엇인가요?
- JSX(Javascript Syntax eXtension)
- 자바스크립트의 확장 문법
- 브라우저에서 실행하지 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 (번들링)
- 문법 규칙
- 컴포넌트가에 여러 요소가 있다면 반드시 이는 하나의 부모 요소로 감싸야 한다.
- 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어짐 -> Virtual DOM에서 변화를 효율적으로 감지 가능하다.
- 컴포넌트가에 여러 요소가 있다면 반드시 이는 하나의 부모 요소로 감싸야 한다.
예비 답변
JSX는 Javascript Syntax eXtension의 약자로 자바스크립트 확장 문법입니다. 이는 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
JSX는 컴포넌트 내부에 여러 요소가 있을 경우 하나의 부모로 감싸야하는데 이는 Virtual DOM을 이용하여 변화를 감지할 때 효율적으로 감지하기 위해 컴포넌트 내부가 DOM 트리 형태를 이루고 있기 때문입니다.
Q3) Javascript의 호이스팅에 대해 설명해주세요.
- 호이스팅
- 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다(실제로 끌어 올려진 것은 아니다).
- 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구부하는 과정(실행 컨텍스트르 위한 과정)을 거친다.
- 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
- 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.
- 정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다.
- 예외
- var를 제외한 다른 변수들은 선언문 이전에 참조하면 Reference에러가 발생한다.
- var은 선언과 동시에 undefined로 초기화 된다.
- 하지만 타 변수들은 선언 시 선언만 될 뿐 초기화되지 않는다.
- let, const는 선언 단계와 초기화 단계가 분리되어 있기 때문
- 만약 해당 변수들을 선언만 하고 코드 실행 전에 접근한다면 초기화되지 않았기 때문에 에러가 발생한다. (변수를 위한 메모리 공간이 아직 확보되지 않았기 때문)
스코프의 시작 지점부터 초기화 시작 지점까지의 구간에서는 해당 변수를 참조할 수 없다. (일시적 사각지대: TDZ, Temporal Dead Zone)
- 즉, var를 제외한 변수들을 선언하고 초기화하지 않았다면 호이스팅에 의해 참조 에러가 발생
- var를 제외한 다른 변수들은 선언문 이전에 참조하면 Reference에러가 발생한다.
예비 답변
Javascript의 호이스팅이란 변수, 함수 선언이 해당 스코프의 최상단으로 끌어 올려지는 것 같은 현상을 말합니다. 이는 자바스크립트 엔진이 코드 실행 전에 필요한 변수, 함수를 등록하는 실행 컨텍스트를 만들고 이를 바탕으로 코드를 실행하기 때문입니다.
하지만 변수의 종류에 따라 호이스팅으로 인한 오류가 발생할 수 있습니다.
var 변수는 호이스티에 의한 오류가 발생하지 않습니다. var는 변수의 선언과 초기화가 동시에 이루어지기 때문입니다.
하지만 let, const 변수는 선언과 초기화가 분리되어 있습니다. 만일 해당 변수를 선언만 하고 코드를 실행한다면 호이스팅에 의해 변수 선언이 최상단으로 끌어 올려지지만 초기화를 하지 않았기 때문에 변수를 위한 메모리 공간을 등록하지 못합니다. 즉, 스코프의 시작 지점에서 변수 초기화 시작 지점까지 해당 변수는 참조하거나 호출할 수 없습니다. 해당 구간을 일시적 사각지대, TDZ라고 하며 이때 변수에 접근한다면 참조 에러(reference error)가 발생합니다.
