기술 면접 준비 4

김은서·2022년 10월 19일

기술 면접 준비

목록 보기

4/4

JavaScript

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

https://velog.io/@jangwonyoon/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%A4-%EC%97%B0%EA%B4%80%EC%9D%B4-%EC%9E%88%EC%9D%84%EA%B9%8C%EC%9A%94

브라우저 렌더링

브라우저 렌더링 방식에 대해 설명하세요.

브라우저 렌더링 동작 과정

렌더링의 기본적인 동작 과정은 다음과 같다.

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

Parsing

브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style

Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다.

Layout

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint

Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

리플로우와 리페인트에 대해 설명하세요.

리플로우(Reflow), 리페인트(Repaint)
사용자가 웹 페이지에 처음 접속을 하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 됩니다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다. 이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 됩니다. 이러한 과정을 리플로우(Reflow)라고 합니다.

리플로우는
단지 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고,

실제 이 결과를 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 합니다.
이 가정을 리페인트(Repaint)라고 합니다.

기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우(Reflow)-리페인트(Repaint)가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행하게 됩니다. (리플로우가 일어나면 반드시 리페인트가 일어납니다)

다음은 리플로우(Reflow)가 일어나는 대표적인 속성들입니다.

position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow

다음은 리페인트(Repaint)만 일어나는 대표적인 속성들입니다.

background, color, text-decoration, border-style, border-radius

적화할 수 있다면 최대한 줄이는 게 현명한 선택

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

반응형 웹은 무엇이고 장단점에 대해 설명하세요.

반응형 웹이란?

다양한 디바이스의 환경에 맞춘 웹 페이지로서,

모든 기기에서 최적화된 웹사이트를 제공할 수 있습니다.
그렇기 때문에 PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됩니다.

반응형 웹의 장점으로는

화면 크기나 해상도에 상관 없이 웹사이트를 잘 보여준다.
어느 기기, 어떤 접속 환경에서도 URL(사이트 주소)가 같다.

3. 유지 보수가 간편하다.
모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 같은 내용의 작업을 반복해야 했기 때문에 손이 많이 가고 복잡합니다. 하지만
반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS파일에서 작업하기 때문에 유지보수가 쉽습니다.

4. 최신 웹 표준을 따른다.

트래픽의 관리도 용이하다.

단점

브라우저와 호환성에 문제가 있을 수 있다.

2. 디자인의 자유도가 떨어지고 100% 맞춤 디자인이 어렵다.

3. 성능 문제가 있을 수 있다. (로딩 속도, 이미지 리사이징)

콘텐츠가 많고 유동적인 경우 작업량이 많아 질 수 있다.

자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

자바스크립트 엔진이 구동되면서 실행 중인 코드를 추적하는 공간이 콜스택이다.

정리하자면 콜스택이란 함수가 호출되면 쌓이고 실행이 끝나면 스택에서 제거된다.

콜스택은 재귀함수를 사용할 때의 경우 그 깊이가 정해져있고 대략 1만 정도까지 허용한다고 생각하자

번들링과 웹팩

번들링은 왜 필요한가요?

번들링은 이런 여러 사례와 같이 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위

프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"

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

여기!!!

번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다.

(모듈(module)이란 분리된 파일입니다. 즉, 분리된 녀석들을 하나로 합쳐주는 구나 )

번들링이 필요해? 라는 의문에는 이렇게 대답할 수 있습니다.

하나. 여러 개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다.
둘. 모듈 간의 변수 충돌 등의 위험성이 존재합니다.

그렇기 때문에 번들링을 하게되면

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

React

Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

Virtual DOM은 실제 DOM의 사본 같은 개념으로,

js가 html을 조작하기 편하도록 만들어진 객체를 허상으로 만든 것이라고 할 수 있을 것 같습니다.

장점으로는

더 빠른 렌더링이 가능해집니다.

React는 실제 DOM 객체에 접근하여 조작하는 대신에
이 가상의 DOM 객체에 접근해서 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다.

변화 이전의 가상의 DOM과 이후의 가상의 DOM의 차이를 비교하고
가상의 DOM은 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산해서
최소한의 작업만 수행해도 렌더링을 할 수 있게 됩니다.

그렇게 되면 브라우저의 파워를 덜 쓴다는 의미로 업데이트 비용을 줄일 수 있습니다.

Class Component와 Function Component의 차이점이 무엇인가요?

1: 선언방식

<클래스형 컴포넌트>

class 키워드 필요
Component로 상속을 받아야한다.
render() 메소드가 반드시 필요하다.
state, lifeCycle 관련 기능사용이 가능하다.
함수형보다 메모리 자원을 더 사용한다.
임의 메소드를 정의할 수 있다.

<함수형 컴포넌트>

state, lifeCycle 관련 기능사용 불가능하다. [Hook을 통해 해결]
클래스형보다 메모지 자원을 덜 사용한다.
컴포넌트 선언이 편하다.

2 : state (컴포넌트 내부에서 바뀔 수 있는 값)

<클래스형 컴포넌트>

constructor 안에서 this.state 초기 값 설정 가능
counstructor 없이도 바로 state 초기값을 설정 가능
this.setState() 를 통해 state값을 변경
클래스형의 state는 객체형식

<함수형 컴포넌트>

useState 함수로 state를 사용한다.
useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수이다.

3 : props

<클래스형 컴포넌트>

this.props로 통해 값을 불러올 수 있다

<함수형 컴포넌트>

props를 불러올 필요 없이 바로 호출 할 수 있다.

4 : 이벤트 핸들링

<클래스형 컴포넌트>

함수 선언시 화살표 함수로 바로 선언 가능하다.
요소에 적용할때 this.를 붙여줘야한다.

<함수형 컴포넌트>

const + 함수 형태로 선언해야 한다.
요소에 적용할때 this가 필요없다.

5 : Life Cycle

Life Cycle 이란?

React에서 컴포넌트는 여러 종류의 "생명주기 메소드" 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정 합니다.
클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook를 사용하여 생명주기에 원하는 동작을 합니다

React Hook의 사용 규칙에 대해 설명하세요.

1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다.
1. 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킵니다.
1. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 합니다.
  (즉 return 하는 값은 조건부여서는 안 됩니다.)

추가로, 일반 함수 내부에서는 React 내장 Hook을 불러 사용할 수 없지만 Custom Hook 에서는 가능하다는 규칙이 있습니다.

운영체제

https://velog.io/@kaitlin_k/node.js%EB%8A%94-single-thread%EC%9D%BC%EA%B9%8C#%EA%B7%B8%EB%9E%98%EC%84%9C-eventloop%EB%A5%BC-%EC%82%B4%ED%8E%B4%EB%B3%B4%EB%A9%B4

Node.js는 싱글 스레드인가요?

JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?

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

가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것입니다.

자바, C#, 자바스크립트 등

C 언어 같은 저수준 언어에서는 메모리 관리를 위해 개발자가 스스로 메모리를 할당하고 해제해야 합니다.

하지만 JavaScript는 C언어와는 반대로 고수준 언어로서,
객체가 생성되었을 때 자동으로 메모리를 할당하고 필요하지 않다면 자동으로 해제하는 가비지 컬렉션이 내장되어 있습니다.

(저수준 언어는 보다 기계 친화적인 언어, 반대로 고수준 언어는 인간 친화적인 언어로, 인간이 이해하기 쉽고)

자료구조

Stack과 Queue의 차이점은 무엇인가요?

스택은 후입선출(LIFO), 큐는 선입선출(FIFO)라고 말한다.

후입선출은 가장 늦게 넣은 데이터가 가장 빨리 나가는 것.

선입선출은 가장 빨리 넣은 데이터가 가장 빨리 나간다는 뜻이다.

스택에서는 원소의 삽입, 삭제가 스택의 한 끝에서 이루어졌다.

하지만 큐에서는 원소의 삽입, 삭제가 다른 끝에서 이루어진다.

그 이외에도
웹 브라우저 방문 기록 (뒤로가기)
실행 취소 (undo)
수식의 괄호 검사
후위표기법 계산
등에서 쓰일 수 있다.

큐의 예시
1. 우선순위가 같은 작업 예약 (프린터 출력)
2. 대기열(커피 주문 대기열)

1. 스택

스택은 객체들의 집합소로써, 데이터를 기록하는 구조라고 보면 된다.

아까 말한 LIFO와 함께 이 그림과 아래 예시를 본다면 이해하기 쉬울 것이다.

스택에서 삽입 연산은 Push, 삭제 연산은 Pop이라고 부른다.

가장 처음 First를 Push
그 다음으로 Middle,
그리고 Last 순으로 Push했다.

하지만 Pop한 순서는 Last -> Middle -> First다.

이것이 후입 선출(가장 늦게 들어간 데이터가 가장 빨리 나온다)이다.

만약 비어있는 스택에서 원소를 추출하려고 하면, stack underflow라는게 있고,

스택이 넘치는데서 스택을 추가하려고 하면, stack overflow라고 한다.

이제 스택을 어디서 사용하는지 알아보겠다.

당연한 이야기지만 스택은 알고리즘에 많이 활용된다.
작은 예로 당신이 역순 문자열을 만든다고 할때, 스택의 LIFO 성질을 이용한다면 간단하게 만들 수 있을 것이다.
가. 문자열을 처음부터 순서대로 스택에 삽입한다
나. 그 후 스택에 있는 원소들을 공백 스택이 될 때 까지 삭제한다.
다. 삭제하며 반환된 문자를 나열하면 원래 문자열의 역순이 된다.

그 이외에도
웹 브라우저 방문 기록 (뒤로가기)
실행 취소 (undo)
수식의 괄호 검사
후위표기법 계산
등에서 쓰일 수 있다.

2. 큐

큐는 집합에서 가장 오랜 시간 존재했던 원소를 삭제한다.

쉽게 설명하면 선입 선출 (FIFO)이다

큐에서의 삽입은 Enqueue, 삭제는 Dequeue라고 한다

스택과 햇갈리지 않도록 하자.

스택에서는 원소의 삽입, 삭제가 스택의 한 끝에서 이루어졌다.

하지만 큐에서는 원소의 삽입, 삭제가 다른 끝에서 이루어진다.

가. 양방향 큐 (deque) - 덱

덱은 큐를 양 방향으로, 즉 삽입 삭제가 양쪽 방향에서 이루어진 것이다.

(큐와 스택을 합친 것으로 선입선출/후입선출의 복합적인 성격을 띈다.)

큐의 예시
1. 우선순위가 같은 작업 예약 (프린터 출력)
2. 대기열(커피 주문 대기열)

Tree와 Graph의 차이점은 무엇인가요?

이진 탐색 방법에 대해 설명할 수 있나요?

김은서

이전 포스트

기술 면접 준비 4