FE 기본상식

가상돔에 대해서 설명해주세요.
가상돔은 웹성능을 최적화하기위해 돔을 관리하는 방법으로 상태가 변경됨에 따라 객체형태의 가상돔을 통해 변경된 부분을 찾아 실제 돔을 업데이트하는 방식을 말합니다

리액트에서 가상돔의 동작원리
스테이트가 변경되면 객체형태의 가상돔과 실제 돔에서 변경점을 찾는 디핑 과정과
변경점을 찾았을때 리컨실리에이션 과정을 통해 실제돔에 변경된 부분만 업데이트하는 것을 말합니다.
이때 setState를 한번에 여러번 호출하면 여러번 이 과정을 하는게아니라 배치 업데이트를 통해 한번에 처리하여 성능을 최적화 합니다.

클로저가 뭔가요?
클로저는 함수가 생성될때 선언된 렉시컬 환경을 참조하여 변수를 기억하고 외부 변수에 접근할 수 있는 특성을 말합니다. 예를 들면 중첩함수를 선언하고 그 함수를 호출했을때 내부함수도 생성되는데 이때, 외부함수의 렉시컬 환경을 참조하여 외부함수의 호출이 끝난 후에도 내부함수가 외부변수에 접근할 수 있습니다 이런 특성을 클로저라고 합니다.

렉시컬
렉시컬 환경은 자바스크립트에서 변수와 함수의 유효 범위를 결정하는 구조입니다. 실행 컨텍스트에서 변수와 함수 정보를 저장하는 ‘환경 레코드’와, 상위 스코프를 참조하는 ‘외부 렉시컬 환경’으로 구성됩니다. 이를 통해 스코프 체인이 형성되고, 클로저 같은 개념이 동작할 수 있습니다.

불변성에 대해 설명해주세요.
a라는 객체가 있을때 b=a라고 재할당하여 사용하면 b를 변경했을때 a도 같이 변경될 수 있습니다.
그 이유는 b=a라고 할당할때, a변수의 메모리에 할당된 주소값까지 할당하여 같은 주솟값을 보고 있어서 이러한 현상이 생기는데, 불변성을 지키려면 깊은복사와 얕은 복사를 사용하여 할당하여야 합니다.
얕은복사는 스프레드연산으로 쉽게 사용할 수 있지만 객체의 자식까지는 불가능하기때문에 트리구조의 객체를 복사할때는 깊은 복사를 사용해야합니다.

상태관리 라이브러리와 그거에 대한 설명

자바스크립트의 동작원리
자바스크립트는 싱글 스레드 언어이며 콜스택에서 한번에 하나의 작업을 실행합니다. 하지만 타이머나 fetch같은 비동기 작업들은 브라우저의 webAPI에서 실행한 뒤에 해당 작업의 콜백을 큐에 넣고. 후에 이벤트루프가 콜스택이 비어있으면 마이크로태스크큐 -> 태스크큐 순서대로 콜스택으로 이동시킨뒤 실행합니다

브라우저의 웹 성능 개선하기 (참고 : 록바의 웹 성능 개선하기)

• 이미지 최적화
  • webp사용하기 : picture태그와 source태그를 사용해 webp를 지원하는 브라우저에선 webp를
    webp를 지원하는 브라우저에선 jpg를 사용한다
  • 적절한 크기의 이미지 사용하기 : img태그의 secret, sizes 속성을 사용해 적절한 크기의 이미지 사용
  • IMAGE CDN 사용하기 : 클라우드 플레어같은 이미지 CDN을 사용해 이미지 최적화
  • CLS 개선하기 : 사용자가 예상치 못한 레이아웃 이동을 최소화 하기(width, height 명시)
    - LAZY LOADING 사용하기 : img태그에 lazy 속성, intersectionObserver API
  • pre load하기