Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
🥨Hoisting (호이스팅)
함수 안에 있는 모든 선언들을 모두 끌어 올려서 해당 유효 범위(스코프)의 최상단에 선언하는 것을 의미한다.
🍩TDZ (Temporal Dead Zone)
선언 단계부터 초기화 시작 전까지의 구간을 TDZ(Temporal Dead Zone)이라고 한다.
(한국말로 일시적인 사각지대라는 의미)
let , const , var 호이스팅 , TDZ 관계
- let. const변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않음
- var, function, import의 선언은 TDZ의 영향을 받지 않음
- 변수가 먼저 선언이 된 경우, 초기화에 따라서 TDZ가 생깁니다. 특히 let,const와 var는 초기화 시점이 다릅니다. var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않습니다.
👨🔧번들링과 웹팩
🍔번들링
번들링이란 여러 자원들을 하나로 묶는다는 뜻입니다.
- 코드의 모듈화,리소스 최적화,반복 작업의 자동화 의 장점이 있습니다.
🍟웹팩
웹팩은 번들러의 대표 주자중 하나입니다.
- 웹팩은 모듈 단위 코드 작성을 가능하게 하며 , 웹팩은 이러한 모듈들을 하나의 js파일로 압축합니다.
- 장점으로 하나의 js 파일만 다운받으면 되기에 네트워크 부하를 줄이며 리소스 최적화가 되어 성능의 향상이 이루어집니다.
👻React
🍖Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
- Virtual DOM 은 HTML을 실제 작성전에 가상에 DOM 으로 구현하는 객체 모델입니다.
- 실제 DOM에서 브라우저에서 화면에 그리는 작업은 무거운 과정이기에 가상의 돔에서 예측 하여 결과를 수행하고 DOM 필요사항과 변경사항을 빠르고 가볍게 처리할 수 있습니다.
- 현재 트렌드는 복잡한 SPA 에서 DOM조작이 굉장히 빈번히 일어나기에 브라우저가 연산이 많기에 가상돔 활용의 이점은 커져가고있습니다.
🍗Class Component와 Function Component의 차이점이 무엇인가요?
클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다. 그러나
class 컴포넌트
- state 기능 및 라이프 사이클 기능을 사용할 수 있다.
- 임의 메서드를 정의할 수 있다.
- render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
함수형 컴포넌트
- 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다.
- 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 앞서 언급한 것처럼 리액트 훅이 도입되면서 해결되었다.
그렇기에 요새는 함수형 컴포넌트가 주사용이 되었지만 , 그래도 클래스 컴포넌트를 알아야 하는 이유는 예전에 작성된 코드들이 있기에 유지보수를 위해서 공부해야한다.
🍺React Hook의 사용 규칙에 대해 설명하세요.
Hook 이란 ?
- Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
- Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
Hooks의 사용규칙
1. 최상위에서만 Hook을 호출
React 함수(컴포넌트)의 최상위에서만 Hook을 호출 할 것.
반복문, 조건문, 중첩된 함수등에서 호출 X
2. React 함수에서만 Hook을 호출
Custom Hook에서는 호출 가능
일반적인 Javascript 함수에서는 호출 X
3. Hook을 만들때 앞에 use 붙히기
그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문 (공홈)
4. React는 Hook 호출되는 순서에 의존
한 컴포넌트에서 여러개의 hook이 사용되는 경우
hook은 위에서부터 아래로 순서에 맞게 동작한다.
🐷운영체제
🍎Node.js는 싱글 스레드인가요?
node.js는 자바스크립트에서 분리된 언어로 문법이 같다. 즉, node.js를 사용해 자바스크립트가 웹브라우저에서만 동작하는 한계를 극복해 프로그램을 만들 수 있게 되었다. 특히, node.js를 사용해 서버를 만들 수 있게 됨으로써 자바스크립트라는 하나의 언어를 사용해 웹페이지를 만들 수 있게 되었다.
- node.js는 자바스크립트를 동작하는데, 자바스크립트는 멀티 스레드가 아니다. 즉, node.js는 싱글 스레드로 동작하면서 동시에 여러 요청을 처리할 수 있어야한다. 따라서 node.js 웹서버는 다음과 같은 특징을 갖는다.
- none-blocking I/O (하나의 요청 처리하는 동안 다른 요청을 블로킹하지 않는다는 의미)
- asynchronous
앞서 말한 클라이언트 요청을 처리한 일꾼이 응답을 가져왔다면,(일을 할당받은 일꾼이 서버 또는 db에 쿼리를 날려 응답을 받아왔다는 뜻) 콜백 함수를 실행하게 된다.
🍏JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
node.js는 v8이라는 자바스크립트 엔진과 비동기 작업을 처리하는 libuv라는 라이브러리로 이루어져있습니다.
- 먼저 v8에는 memory heap과 하나의 call stack이 있다. (여기서 하나의 call stack이 있다는 것과 싱글 스레드는 같은 의미로 이해할 수 있다) memory heap은 메모리 할당이 일어나는 곳이고, call stack은 코드 실행에 따라 호출 스택이 쌓인다. call stack은 차례대로 실행되기 때문에 비동기 처리를 할 수 없다.
- 따라서, 비동기 작업을 가능하게 하는 것은 바로 libuv라는 라이브러리에서 non-blocking IO라는 기능을 가능하게 하는 이벤트 루프를 제공하기 때문이다. libuv는 c언어로 생성되었고, 시스템 커넬을 이용하는데, 커넬은 멀티 스레드를 이용한다. 따라서, node.js는 libuv가 멀티 스레드로 동작하기 때문에 비동기 처리를 할 수 있다. 아래 이미지의 internal C++ Thread Pool이 멀티 스레드이다.
🍊Event Loop에 대해 설명할 수 있나요?
콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인
콜 스택이 비어있고, 태스크 큐에 대기 중인 함수가 있다면 순차적(FIFO, First In First Out)으로
태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
-> 이러한 반복을 tick이라고 함
🍋가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
가비지 컬렉션이란?
- 가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것이다.
- 비워줘야 할 메모리 공간을 남겨두지 않고 메모리를 꽉채우게 되면, 메모리 누수(memory leak)가 발생한다.
- 메모리 누수로 속도저하, 예기치 못한 종료, 느린 응답속도 등과 같이 많은 문제가 발생할 수 있다.
- 메모리 누수가 발생하지 않게 프로그래머는 이를 방지하고 버그가 있으면 잡아야한다.
- 가비지 컬렉터는 프로그래밍 언어에서 프로그래머가 해야할 위와 같은 일을 대신해준다.
- 가비지 컬렉션 기능을 가진 언어(혹은 엔진)는 자바, C#, 자바스크립트 등이 있다.
