기술면접학습

JavaScript

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

브라우저 렌더링

• 브라우저 렌더링 방식에 대해 설명하세요.
• 리플로우와 리페인트에 대해 설명하세요.
• 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
• 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

• HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
  두 Tree를 결합하여 Rendering Tree를 만든다.
  Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
  계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
  레이어를 합성하여 실제 화면에 나타낸다.

• 플로우와 페인트단계를 다시 실행하는것을 의미한다.
  화면에 요소가 추가 되거나 삭제, 혹은 아예 다른 요소들을 불러와야 하는 상황이 생기면 당연히 화면에 있던 요소들의 크기가 바뀌게 되면서 렌더링 과정의 레이아웃을 반복해 수행하는 것. 리플로우 하는 과정은 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 해 실제로 CPU를 많이 차지하고, 리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지하여 프레임 드랍 이 생기므로 최적화를 통해 리플로우, 리페인트를 줄이는 편이 좋다.

• 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 장점으로는 효율적인 유지보수, 검색엔진(SEO) 최적화 유리가 있고, 단점으로는 사이트의 속도 저하, 웹브라우저 호환성 문제가 있다. 웹페이지 내용을 수정해야 할 때도 하나의 페이지에서만 적용해도 동일하게 반영되고, 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다. 또한 URL이 동일하므로 접속의 관리가 효율적이다. 하지만, PC와 함께 사용하기 때문에 모바일을 전용으로 하는 사이트에 비해 무겁고, 읽어야 할 소스가 많아 사이트의 속도가 느려진다. 이미지 리사이징등의 문제도 있을 수 있다, 또한 웹 브라우저가 스펙 및 사양이 제각각이기 때문에, 호환성 문제가 생길 수 있다.

• 호출 스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조로서, 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스택이 있다. 단일 호출 스택이 있다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻이다.

번들링과 웹팩

• 번들링은 왜 필요한가요?

• 번들링이 필요한 이유는, 변수명 중복으로 인한 변수간 충돌등의 방지와, 같은 타입의 파일을 묶어서 요청/응답을 받기 때문에 네트웍 코스트가 줄고, 코드 난독화, 압축, 최적화 효과를 내며, 웹팩 구성요소인 로더가 ES6형식을 지원하지 않는 브라우저에서 ES5로 변환하여 사용 가능하게 한다.

React

• Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
• Class Component와 Function Component의 차이점이 무엇인가요?
• React Hook의 사용 규칙에 대해 설명하세요.

• 가상의 DOM 객체로, 실제 DOM의 사본같은 개념으로 리액트가 실제 DOM 객체에 접근하여 조작하는 대신, 이 버츄얼 DOM에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. 동일한 속성을 가지고 있지만 훨씬 가벼운 사본으로 속도가 훨씬 빠르다.
• 클래스형 :
  state, lifeCycle 관련 기능사용 가능하다.
  메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
  임의 메서드를 정의할 수 있다.
  함수형 :
  state, lifeCycle 관련 기능사용 불가능
  메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
  컴포넌트 선언이 편하다.
• 최상위에서만 Hook을 호출해야 하며 React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해주며 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

운영체제

• Node.js는 싱글 스레드인가요?
• JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
• Event Loop에 대해 설명할 수 있나요?
• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

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

자료구조

• Stack과 Queue의 차이점은 무엇인가요?
• Tree와 Graph의 차이점은 무엇인가요?
• 이진 탐색 방법에 대해 설명할 수 있나요?

• stack는 데이터를 순서대로 쌓는 자료구조이고, Queue는 데이터를 대기행렬로 만드는 자료구조이다. stack은 후입선출의 구조, 데이터의 출입은 한개씩만, 저장되는 데이터는 유한하며 정적, 스택의 크기가 제한되어있다는 특징이 있고,
  queue는 선입선출의 구조, 데이터의 출입은 한개씩, 입출력 방향이 두 개라는 특징이 있다.
• 그래프는 여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조, 트리는 그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태로, 트리 구조는 루트(Root) 라는 하나의 꼭짓점 데이터를 시작으로 여러 개의 데이터를 간선(edge)으로 연결합니다. 각 데이터를 노드(Node)라고 하며, 두 개의 노드가 상하 계층으로 연결되면 부모/자식 관계를 가집니다.