Section4 기술면접 레퍼런스

JavaScript

• Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

  호이스팅은 var, let, const, function, class 키워드 등을 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다.

  우선 let,const와 var의 호이스팅 방식의 차이를 봐야합니다.

  var의 경우 선언 단계와 함께 undefined로 초기화되므로 초기화 코드를 만나기 전부터 참조가 가능합니다.

  반면에, let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 즉, 스코프에 변수를 등록하지만, 초기화 단계는 변수 선언문 코드에 도달했을때 이루어지기 때문에 초기화 이전에 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생합니다.

  따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이를 Temporal Dead Zone이라고 합니다.

  따라서, let과 const는 호이스팅이 되기는 하지만 초기화가 이루어지지 않은 상태 (Uninitialized)에서 호이스팅이 되기 때문에 초기화 단계를 만나기 전에는 참조할 수가 없으며 일시적 사각지대 (TDZ)가 생기는 것입니다.

브라우저 렌더링

• 브라우저 렌더링 방식에 대해 설명하세요. (Seciton4 Unit1 Chapter2. 브라우저 렌더링 개념학습)

  렌더링 방식은 렌더링 과정으로도 볼 수 있습니다.

  1. 사용자가 브라우저를 통해 웹 사이트에 접속
  2. Resource Downloading : 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받음
  3. HTML DOM Tree 구축 : 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 형성
  4. CSSOM Tree 구축 : 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM Tree 형성
  5. Render Tree 구축 : 만든 DOM 트리와 CSSOM 트리를 결합
  6. Rayout : 각 요소를 어디에 배치할 지 결정
  7. Paint : 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작하는 과정

• 리플로우와 리페인트에 대해 설명하세요. (Seciton4 Unit1 Chapter2. 리플로우와 리페인트)

  어떤 *웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우

  페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.

  *웹 인터랙션이 뭐죠? 라는 꼬리 질문이 들어올 수 있습니다.

  웹 인터랙션이란?

  인터랙션은 정적인 화면이 아니라 움직임이 있는 있는 화면 및 액션 입니다.

  예를 들어 화면에 있는 사물들을 터치하거나 기울이면 화면이 바뀌거나 안에 있는 사물들이 즉각 반응을 합니다. 그리고 언어도 선택할 수 있어서 다른 나라의 언어도 함께 배울 수 있고 단어는 물론 음성까지도 들으면서 텍스트를 읽을 수 있습니다. 화면에 강아지를 터치하면 멍멍대며, 강아지의 소리를 들을 수 있거나, 글에서 볼 수 있는 내용들이 그림으로 변형되어 화면에 펼쳐지며 이 화면에 있는 사물들이나 배경들을 터치해서 즉각 반응을 느낄 수 있는 것 등 다양한 예시가 있습니다.

  즉 웹 상에서 움직임이 있거나 유저와 상호 작용을 할 수 있는 화면 및 액션을 웹 인터랙션이라고 합니다.

• 반응형 웹은 무엇이고 장단점에 대해 설명하세요. (Seciton4 Unit1 Chapter3. 반응형 웹 개념학습)

  반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미합니다.

  반응형 웹의 장점으로는 검색엔진(SEO) 최적화 유리, 효율적인 유지 보수가 있으며,

  반응형 웹의 단점으로는 사이트의 속도 저하, 웹브라우저 호환성 문제 등이 있습니다.

• 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요? (Seciton4 Unit1 Chapter1. 브라우저의 구조)

  콜 스택이란 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조라 정의할 수 있습니다. 만약 함수를 실행한다면, *해당 함수는 콜 스택의 가장 상단에 위치합니다. 함수의 실행이 끝난다면 해당하는 함수는 콜 스택의 가장 상단에 위치하고 있기 때문에 바로 제거할 수 있게 됩니다.

  *왜 가장 상단에 위치할 수 있죠? 라는 꼬리 질문이 들어올 수 있습니다.

  스택이라는 자료구조가 후입선출이라는 구조를 가지고 있기 때문에 가능한 일입니다.

번들링과 웹팩

• 번들링은 왜 필요한가요? (Section4 Unit2 Chapter1. 번들링 개념학습)

  번들링을 해주지 않는다면 다양한 상황이 일어나 어려움에 처할 수 있습니다. 예를 들어,

  • 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
  • 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
  • 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기기 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
  • 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.

  등의 어려움이 생길 수 있기 때문에 번들링은 꼭 필요합니다.

React

• Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? (Section4 Unit3 Chapter1-1. Virtual DOM 개념학습)

  Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.

  virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.

  먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.

  Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.

  따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.

• Class Component와 Function Component의 차이점이 무엇인가요? (Section4 Unit3 Chapter2-1. Component와 Hook 개념학습)

  Class Componet는 Function Component가 생기기 이전에 존재하던 컴포넌트 형식입니다. Class Component는 Function Component와 달리 컴포넌트를 확장해서 써야만 했습니다.

  //이런 식으로 뒤에 extends Component를 확장한다고 명시해야만 class Component를 사용할 수 있습니다.
  class Counter extends Component {
  	...
  }
  
  

  그러나 Function Component는 순수 함수이기 때문에 이러한 확장 과정을 거치지 않고도 컴포넌트를 만들 수 있습니다.

  //순수 함수이기 때문에 확장 과정을 거치지 않고도 컴포넌트를 만들 수 있습니다.
  function Counter () {
  	...
  }
  
  

  또한 Class Component는 React 수명 주기 메서드(ex. componentDidMount)를 사용해 React Life Cycle을 세밀하게 조작할 수 있고, Function Component는 React 수명 주기 메서드는 사용할 수 없는 대신 React Hook을 사용하여 상태 값을 사용하거나 최적화할 수 있는 기능들을 보완했습니다.

  [Class Component와 Function Component를 비교해둔 게시물](https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/#:~:text=Functional Components-,Class Components,which returns a React element.)이 GeeksforGeeks에 존재합니다. 한 번 확인해보시고 자신만의 언어로 바꿔보세요!

• React Hook의 사용 규칙에 대해 설명하세요. (Section4 Unit3 Chapter2-1. Component와 Hook 개념학습)

  1. 리액트 함수의 최상위에서만 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.
  2. 오직 리액트 함수 내에서만 사용되어야 합니다. 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 됩니다.

  애초에 Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메소드이기 때문에 근본적으로 일반 JavaScript 함수 내에서는 정상적으로 돌아가지 않습니다. 따라서 이 규칙 또한 반드시 준수해야 하는 규칙입니다.

운영체제

• Node.js는 싱글 스레드인가요? (Section4 Unit4 Chapter2-3. 싱글 스레드와 멀티 스레드 : 세션 중 설명한 내용)

  싱글 스레드란 한번에 하나의 태스크를 실행할 수 있는 방식입니다. 대조적으로, 멀티 스레드란 한번에 다수의 태스크를 실행할 수 있는 방식입니다. 대표적으로 자바스크립트 엔진이 싱글스레드 방식으로 작동하는데, 대기 중인 태스크들은 현재 실행중인 함수가 종료되어야 작동합니다.

  Node.js 자체는 싱글스레드 방식이 아닙니다. 싱글 스레드 방식으로 동작하는 것은 Node.js나 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진입니다. 만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로만 동작한다면 자바스크립트는 비동기로 동작할 수 없을 것입니다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저나 Node.js는 멀티 스레드로 동작하는 것입니다. 자바스크립트를 실행하는 부분에서만 싱글스레드로 구성되어있고, 이 때의 작업 동시성은 이벤트 루프를 통해서 구현할 수 있습니다.

• JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요? (Section4 Unit4 Chapter2-3. 싱글 스레드와 멀티 스레드 : 세션 중 설명한 내용)

  이벤트 루프(Event Loop) 동작 방식에 대해 설명할 수 있으면 되는 문제입니다. JavaScript는 싱글 스레드 방식으로 돌아가지만 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되기 때문에 필요한 장치가 이벤트 루프이기 때문입니다.

  자바스크립트의 함수가 실행되는 방식을 보통 "Run to Completion" 이라고 말합니다. 이는 하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지는 다른 어떤 작업도 중간에 끼어들지 못한다는 의미입니다. 앞서 말했듯이 자바스크립트 엔진은 단일 호출 스택을 사용하며, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 어떠한 함수도 실행될 수 없습니다.

  자바스크립트에서는 함수 호출을 관리하는 call stack과 비동기 작업 처리를 위한 Web API가 함께 작업을 처리합니다. Web API는 특히 작업 완료에 시간이 오래 걸리는 작업을 처리하게 되는데, 이 결과값을 처리할 수 있는 callback 함수를 task queue에 쌓습니다.

  하나의 js파일이 실행되면, 코드가 차례로 실행됩니다. 코드가 실행되는 도중에 함수가 호출이 되는 순간 call stack에 해당 함수 실행을 위한 모든 정보가 실행 컨텍스트에 담깁니다. 이 함수 내에서 또 함수가 호출되면, call stack에 새로운 실행 컨텍스트가 생깁니다. 함수 실행이 마무리 될 때 마다 결과값을 반환하고 해당 실행 컨텍스트는 없어집니다. 마지막 실행 컨텍스트부터 하나씩 빠지기 때문에 Stack 구조라고 부를 수 있는 것입니다.

  이 과정 중에 호출되는 함수가 비동기로 작동되는 경우, 이 비동기 작업은 (브라우저는) Web API에서 처리됩니다. 이 작업의 결과를 처리하는 callback 함수는 이후에 call stack에서 따로 실행이 되어야 하는데, call stack에서 실행 컨텍스트가 아직 남아있는 경우 task queue에서 "대기"하게 됩니다.

  시간이 오래 걸리는 작업이 call stack에 머물러서 싱글스레드로 작동되는 event loop를 막지 않도록 도와줍니다. 그래서 연산이 많고 시간이 오래 걸리는 작업은 비동기로 처리하는 것이 효율적인 것입니다.

• Event Loop에 대해 설명할 수 있나요?

  JavaScript는 싱글 스레드 방식으로 돌아가지만 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되기 때문에 필요한 장치가 이벤트 루프입니다. 핵심만 말하자면, JavaScript event loop는 call stack이 비어있는 경우, task queue에서 대기하던 callback을 call stack으로 옮겨서 callback을 실행시켜주는 역할을 합니다.

  *해당 질문에 답을 하면 바로 이어서 어떻게 동작하는지 설명해달라고 할 수 있습니다. 위의 질문의 대답을 하면 됩니다.

• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요? (Section4 Unit4 Chapter4. 가비지 컬렉션과 캐시)

  가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것입니다. 이 기능을 가진 언어(혹은 엔진)는 자바, C#, 자바스크립트 등이 있습니다.

  *그러면 어떻게 가비지 컬렉션이 일어나나요? 라고 물어볼 수 있습니다.

  mark and sweep 알고리즘 방식에 의해 가비지 컬렉션이 일어난다고 설명하면 됩니다. 객체에 in-use flag를 두고, 사이클마다 메모리 관리자가 모든 객체를 추적해서 사용 중인지 아닌지를 표시(mark)합니다. 그 후 표시되지 않은 객체를 삭제(sweep)하는 단계를 통해 메모리를 해제하는 방식을 mark and sweep 알고리즘이라고 합니다.

자료구조