공통_기술면접

상태관리

1. Context API

   • Provider 로 감싼 컴포넌트에 전역 상태관리를 할때 props drilling을 하지 않을수 있고 함수를 전달하기 위함.

클래스형 / 함수형 컴포넌트의 차이

1. 클래스형(class component)

   • state, lifeCycle 관련 기능사용 가능하다.
   • class 키워드 필요
   • Component로 상속을 받아야한다.
   • render() 메소드 필수
   • 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.

     • 메모리 자원 내용 추가 필요함
   • 임의 메서드를 정의할 수 있다.
2. 함수형(function component)

   • state, lifeCycle 관련 기능사용 불가능
   • 메모리 자원을 함수형 컴포넌트보다 덜 사용한다.

     • 메모리 자원 내용 추가 필요함

호이스팅 이란

호이스팅란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미.

전역에서 선언된 변수는 전역 컨텍스트 촤상위로 끌어올려지며,

함수 내에 선언된 변수는 함수 최상위로 끌어올려집니다.

그리고 모든 선언문(var, let, const, function, function*, class)은 호이스팅 됩니다.

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계와

초기화 단계가 한번에 진행되며 let, const 키워드로 선언된 변수는 선언 단계가 이뤄지고

런타임 때 초기화와 할당이 이뤄집니다.

클로저

클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하여, 함수가 해당 스코프 밖에서 실행되어도 그 환경에 접근할 수 있게 하는 기능

즉, 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해주는 특성

왜냐하면 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합 때문입니다.

코드로 생각해보면

function a(){
	for(var i = 0 , i < 5; i ++){
		 setTimeout(()=>{
		  console.log(i);
		 },1);
	}
}
a();
// 5,5,5,5,5 출력 

// 클로저를 사용 
function a(){
	for(var i = 0 , i < 5; i ++){
		(function(j){
			setTimeout(()=>{
			  console.log(j);
			 },1);
		})(i);

	}
}
a();
// 0,1,2,3,4 출력 
// 위처럼 나올수 있는건 스코프에 접근할수있기때문

자바스크립트의 스레드

싱글스레드이기때문에 오래걸리는 작업을 실행하면 브라우저의 먹통이 발생

Web Worker를 사용하면 브라우저의 부하를 줄일수있음

Web Worker 종류

1. 메모리 복사 postMessage (message)
2. 메모리 소유권 주기 postMessage (message, transfer)
3. 메모리 공유 new SharedWorker 사용하기
   Atomics.store 접근 , 보안이슈로 http headers 설정을 해야 사용이 가능