1.상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
상태 값에 따라 컴포넌트를 어떤 식으로 렌더링할지 관리하기 위해 사용합니다.
하나의 컴포넌트 내에서만 사용될 경우 useState 사용, 여러 컴포넌트에서 사용하면 전역 상태 관리 라이브러리를 사용해 state를 관리하고 있습니다.
2.Redux가 무엇인가요, 왜 Redux를 사용하시나요?
자바스크립트 앱을 위한 전역 상태 관리 라이브러리입니다.
특정 state에 대해서 여러 컴포넌트에서 사용될 경우 전역으로 관리하기 위해 사용합니다.
3.Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
같은 Flux 아키텍처를 가진 전역 상태 중에 Zustand 사용 경험이 있습니다 .
Redux에 비해 코드 볼륨 및 라이브러리 용량도 적습니다. Provider가 필요 없습니다.
4.버츄얼 돔과 리얼 돔의 차이를 설명해주세요
리얼 DOM은 데이터 변경이 발생할 때 새로운 DOM을 생성합니다. 버츄얼 DOM은 새로운 element가 업데이트된 경우 새로운 버츄얼 DOM 생성하여 리얼 DOM과 비교 후 업데이트된 DOM만 리얼 DOM과 동기화합니다.
5.useRef에 대해 설명해보세요
useRef는 특정 DOM element에 접근 해야할 때 사용되는 react hooks입니다. useRef를 사용해 DOM 조작을 하는 것이 리렌더링을 발생시키지는 않습니다. 스크롤 이벤트, focus 이벤트 처리, 패키지를 사용할 때도 특정 DOM에 접근하기 위해 사용됩니다
6.useEffect의 실행 순서에 대해 설명해주세요
컴포넌트 렌더링 이후에 useEffect 콜백 함수 로직이 실행됩니다. 자식 컴포넌트에서 부모 컴포넌트의 useEffect가 순차적으로 실행됩니다.
7.var, let, const의 차이에 대해 알려주세요.
var: 함수 레벨 스코프,중복 선언 가능, 값 재할당 가능
let : 블록 레벨 스코프,중복 선언 불가능 , 값 재할당 가능
const: 블록 레벨 스코프,중복 선언 불가능,값 재할당 불가능
8.Async/Await와 Promise의 차이
Promise는 자바스크립트에서 비동기 처리를 편리하게 도와주는 객체입니다. peding / fulfilled / reject 상태를 통해 비동기 통신의 상태 관리가 가능합니다. Async를 사용한 함수는 Promise를 반환하며 함수 내부에서 Await을 만나면 Promise가 처리될 때까지 기다립니다. Async / Await을 사용하여 비동기 코드를 동기 코드처럼 다룰 수 있습니다.
9.데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은?
데이터가 10,000개일 경우 그 내용을 그리기 위해 DOM 노드가 많이 생겨 렌더링 속도를 고려해야 합니다. windowing 기법을 통해 사용자에게 보이는 부분만 렌더링하면 속도 개선에 많은 도움이 됩니다.
10.CloudFront를 사용해본적이 있나요? 사용해봤다면, CloudFront로 배포하는 이유를 설명해주세요.
사용한적은 없습니다.
Cloudfront는 CDN으로 각 Edge에 Origin 파일을 캐시로 가지고 있습니다. Edge에서 캐시된 파일은 TTL 이 있어서 TTL 이 만료되기 전까지 특별한 요청이 없으면 Origin 파일을 요청하지 않습니다.
