debounce와 throttle의 개념
일정 시간 동안 동일한 이벤트가 여러번 발생했을 떄 이벤트 핸들링 횟수를 1번으로 제한하는 기술
debounce는 키보드입력 이벤트처럼 짧은 시간내에 집약적으로 호출되는 이벤트, 마지막 입력
throttle는 첫 이벤트만 처리, 핸들링 로직에 나머지 입력값이 누락되는 이슈 발생할 수 있음.
이벤트에 따른 레이아웃 변경과 같은, 즉각적인 피드백이 필요한 경우 사용.
DOM의 개념
마크업 언어로 작성된 문서를 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스
**마크업 언어란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
DOM은 왜 필요한가요?
마크업 언어에는 자바스크립트가 element에 접근 가능한 인터페이스가 없기 때문
DOM을 통해 어떤 동작을 할 수 있는지 예를 들어주세요.
Element에 이벤트 핸들러를 추가하거나, Element를 문서에 추가, 제거, 수정할 수 있음
DOM은 왜 계층적 구조로 표현하는지 설명해주세요.
노드들 간의 관계를 명확히 정의할 수 있고, Event 처리에 유리한 구조이기 때문
이벤트 버블링:이벤트가 발생한 요소로부터 상위 요소로 이벤트가 전파되는 과정
이벤트 캡쳐링: 상위요소에서 발생한 이벤트가 하위요소로 전파되는 과정
Promise와 async-await의 개념
Promise란 비동기 연산의 상태를 나타내는 객체
비동기를 처리하는 함수에 성공 콜백과 실패 콜백을 각각 넘겨 처리하였음
그래서 코드의 가족성을 크게 저하시키는 콜백지옥이 문제가 생김.
async-await란 Promise의 완료를 기다리기 위한 문법
fetch 동작이 완료될 때까지 이부분 실행이 안되면 에러핸들링은 try catch 블록에서 하며, 실행 흐름을 고려하여 적재적소에 써야함.
순차적으로 실행될 필요가 없는 비동기 연산은 Promise.all을 사용하는 것이 적절함.
key에 배열 index를 사용하면 안되는 이유
key는 리스트를 매핑하여 동일한 컴포넌트를 여러개 렌더링할때 각 컴포넌트에 전달되는 고유한 값입니다.
재조정 단계에서 각Node의 key값을 비교하여 추가/ 삭제/ 순서가 변경된 Node를 식별하기 위함.
필요한 리랜더링을 수행하기 위해 사용합니다.
컴포넌트의 순서가 변경되어도 동일한 key값이 유지되기 때문에 key값의 순서는 이전과 동일함으로 리랜더링 대상으로 식별되지 않는다.
고유한 key값이 없는 경우 대체 방법은 다른 props를 적절히 조합하여 고유한 값을 만들거나 랜덤한 UUID를 사용(메모리 많이차지)
비동기 함수와 Callback 함수, 그리고 Event Loop에 대해 설명하시오
자바스크립트는 싱글스레드 이다.
처리시간이 긴 작업으로 인한 스레드 블락 이슈가 생겨 스레드 블락없이 처리할 방법이 필요함
자바스크립트는 메인스레드에서 처리안한다. 노드는 libuv라는 c++라이브러리에서 브라우저에서는 fetch와 같은 웹 api를 통해 백그라운드에서 처리한다.
자바스크립트와 자바스크립트 실행환경으로 구분되어 지는데
자바스크립트 엔진,
백그라운드 (비동기 I/O매니저)
메인쓰레드에서 요청이 들어오면 백그라운드로 보내고 결과를 알기위해 콜백함수를 사용하고 보통 마지막 인자에 전달하게끔 되어 있다.
비동기 작업이 완료되엇을때 메인 쓰레드에서 실행할 함수는 callback함수이다.
콜백함수는 잠시 백그라운드로 전출을 보낸건데 요청이 많아지면 시기를 정하는 체계가 필요하다.
이 역할을 담당하는 것이 바로 이벤트 루프입니당.
메인스레드에서 실행하는 모든 함수들은 call stack이라는 공간에 LIFO(Last In First Out)형태로 차곡차곡 쌓이게 됩니다. 네트워크 요청이 들어오면 바로 백그라운드로 넘겨지고 이벤트가 처리되면 콜백함수가 이벤트 큐에 FIFO(First In Fisrt Out) 구조로 쌓이게 됩니다.
이벤트루프는 이벤트 큐에서 콜 스텍으로 콜백함수를 이동시켜주는 역할을 합니다.
이벤트는 루프는 콜 스택이 완전히 비어져잇는지 호가인하고 푸시해주는 역할을 합니다. 이벤트 큐와 콜스텍 사이의 신호등이라고 할 수 있다.
- 모든 함수 호출은 콜스택에 LIFO구조로 쌓인다.
- 비동기 함수는 콜스택에 들어오는 즉시 백그라운드로 보내진다
- 백그라운드에서 처리가 완료되면 콜스택 함수는 이벤트큐에 FIFO구조로 쌓인다.
- 이벤트 루프는 콜스택이 비어있는지 수시로 확인한다.
- 콜 스택이 비어있을 경우, 이벤트 루프는 이벤트 큐에서 콜백함수를 시프트한다.
- 시프트된 콜백 함수는 콜스택으로 옮겨진후 실행된다.
Type 과 Interface의 차이
둘다 섞어서 사용해도 좋다
// 언제나 객체형태만 된다.
interface User{
name: string;
age: number;
}
// 기본적인 타입, 유연하다. 상속할떄 &을 붙인다
type UserName = string;
age: number;
}보안상의 이유도 필드에서 제외하고싶을떈 Omit
인터페이스는 같은 이름이생기면 심각한 에러를 야기할수 있다. 에러캐칭이 안됨.
특정한 객체의 타입을 선언할떄 객체 (oop)
그외에는 단순한 형태는 타입으로 선언
Execution Context(실행 컨텍스트) 정의와 종류
자바가 실행할떄 글로벌 실행 컨텍스트를 가지고 있음
