10월 5주차 기술면접 대비 질의응답

10.23

1. 크리티컬 렌더링 패스 (Critical Rendering Path)

크리티컬 렌더링 패스는 브라우저가 HTML, CSS, JavaScript 파일을 받아서 화면에 페이지를 그리는 과정입니다. 

 

1. HTML 파싱 및 DOM 생성: 브라우저는 HTML 파일을 받아서 DOM(Document Object Model)을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것입니다.

2. CSS 파싱 및 CSSOM 생성: CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성합니다. CSSOM은 CSS 스타일 정보를 트리 형태로 표현한 것입니다.

3. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 실제로 화면에 그려질 요소들만 포함합니다.

4. 레이아웃 계산: 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다. 이 과정을 레이아웃이라고 합니다.

5. 페인팅: 계산된 레이아웃 정보를 바탕으로 픽셀을 화면에 그립니다. 이 과정을 페인팅이라고 합니다.

 

2. 레이아웃 연산의 무거움

레이아웃 연산은 브라우저 렌더링 과정에서 가장 무거운 작업 중 하나입니다. 

이는 요소의 위치와 크기를 계산하는 데 많은 컴퓨팅 파워가 필요하기 때문입니다. 

특히, 다음과 같은 경우 레이아웃 연산이 무거워질 수 있습니다:

 

- 요소의 크기나 위치가 변경될 때: 예를 들어, width나 height 속성이 변경되면 레이아웃 연산이 발생합니다.
- DOM 구조가 변경될 때: 요소가 추가되거나 제거될 때도 레이아웃 연산이 필요합니다.

 

반면, 리페인트는 요소의 스타일(예: 색상)이 변경될 때 발생하며, 레이아웃 연산보다는 상대적으로 가볍습니다.

 

하지만 복잡한 애니메이션은 리페인트도 성능이슈가 생길 수 있다고 합니다.

 

3. HTML 파싱 중 JavaScript 처리

HTML을 파싱하는 동안 '<script>' 태그를 만나면 브라우저는 DOM 생성을 멈추고 JavaScript를 실행합니다.

이는 JavaScript가 DOM을 조작할 수 있기 때문입니다.

이로 인해 페이지 로딩이 지연될 수 있습니다.
이를 해결하기 위한 방법은:
- 스크립트를 페이지 하단에 배치: HTML 문서의 끝에 <script> 태그를 배치하여 DOM이 완전히 생성된 후에 JavaScript를 실행하도록 합니다.
- async 또는 defer 속성 사용: <script> 태그에 async 또는 defer 속성을 추가하여 스크립트 로딩과 실행을 비동기적으로 처리할 수 있습니다.
  - async: 스크립트가 비동기적으로 로드되며, 로드가 완료되면 즉시 실행됩니다. 다른 스크립트와의 실행 순서는 보장되지 않습니다.
  - defer: 스크립트가 비동기적으로 로드되며, DOM 파싱이 완료된 후에 순서대로 실행됩니다.

이러한 최적화 기법을 통해 페이지 로딩 시간을 단축하고 사용자 경험을 개선할 수 있습니다.

 

10.24

 

1. 코드 분할 이란?

React같은 SPA웹앱을 개발하고 나면 webpack같은 번들러로 코드를 번들하고, html 파일에서 번들된 자바스크립트 파일을 불러와서 웹앱을 브라우저에서 실행합니다.

그런데 번들 파일이 다 불러와져야 웹앱이 실행되다 보니, 웹앱의 크기가 커지면 커질 수록 성능에 악영향을 끼치게 됩니다. 특히 서드 파티 라이브러리같은 경우 그 크기가 굉장히 큰 경우가 많기 때문에 번들 파일의 크기도 금방금방 커져버립니다.

 

그런 때에 고려할 사안이 바로 코드 분할인데, 이는 번들 파일의 코드를 분할하여, 모든 코드를 한 번에 불러오지 않고 사용자가 필요로 할 때에 필요한 코드만 불러오는 개념입니다.

 

React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것입니다.

 

React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있습니다. 

이를 사용하면 초기 렌더링 지연시간을 어느정도 줄일 수 있게 됩니다.

import Component from './Component';

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

 

이 React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 합니다.

Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 됩니다. 

Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능입니다.

Supense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 React 엘리먼트를 받아들입니다. 
Suspense 컴포넌트 하나로 여러 개의 lazy 컴포넌트를 보여줄 수도 있습니다.

import { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
		<AnotherComponent />
      </Suspense>
    </div>
  );
}

 

2. Virtual DOM 이란?

1. 정의: 버츄얼 돔은 실제 DOM의 가벼운 사본입니다. 리액트는 컴포넌트의 상태가 변경될 때마다 새로운 버츄얼 돔을 생성합니다.
2. 역할: 버츄얼 돔은 메모리 내에서 작동하며, 실제 DOM에 직접 접근하지 않고도 UI의 변경 사항을 추적할 수 있습니다. 이는 실제 DOM 조작보다 훨씬 빠릅니다.
3. 장점: 버츄얼 돔을 사용하면 전체 UI를 다시 렌더링하지 않고도 변경된 부분만 업데이트할 수 있습니다. 이는 성능을 크게 향상시킵니다.

 

컴포넌트의 상태가 변경될때 , 새로 생성된 버츄얼 돔을 비교하기 위하여 디핑 알고리즘(Diffing Algorithm)을 사용합니다.

작동 방식:
- 리액트는 새로운 버츄얼 돔을 생성한 후, 이전 버츄얼 돔과 비교합니다.
- 변경된 부분만 실제 DOM에 반영합니다.
- 이 과정은 효율적으로 설계되어 있어, 최소한의 DOM 조작으로 최대한의 성능을 이끌어냅니다.
디핑 알고리즘 덕분에 리액트는 불필요한 DOM 업데이트를 피할 수 있으며, 이는 애플리케이션의 반응성을 높이고 성능을 최적화합니다.

 

3. React 에서 key를 사용하는 이유는?

 

key는 각 컴포넌트나 엘리먼트를 고유하게 식별하는 데 사용됩니다. 리스트의 각 항목에 고유한 key를 부여하면, 리액트는 항목의 순서나 내용이 변경되었을 때 이를 정확하게 추적할 수 있습니다.

 

key를 사용하면 리액트는 이전과 새로운 리스트를 비교할 때, 각 항목의 key를 기준으로 변경 사항을 감지합니다.
이는 디핑 알고리즘과 관련이 있습니다.

 

 

10.25

 

1. 클라이언트 사이드 렌더링 과 서버사이드 렌더링의 차이

 CSR :  브라우저에서 JavaScript를 사용하여 페이지를 렌더링하는 방식입니다. 초기 로딩 시 최소한의 HTML과 JavaScript 파일을 서버로부터 받아오고, 이후에 필요한 데이터와 컴포넌트를 클라이언트에서 동적으로 로드하여 페이지를 구성합니다.

장점 : 빠른 사용자 인터렉션 / 서버 부하 감소 / SPA구현에 적합 - 부드러운 사용자 경험

단점 : 초기 로딩 시간이 김 / SEO 문제 / 브라우저의 성능에 의존

 

SSR : 서버에서 전체 HTML 페이지를 생성하여 클라이언트에 전송하는 방식입니다. 사용자가 페이지를 요청하면 서버에서 필요한 데이터를 가져와 완성된 HTML을 만들어 응답으로 보냅니다.

장점 : 빠른 초기 로딩 / 향상된 SEO 

단점 :인터렉티브 기능 구현 어려움 / 페이지 전환시 다시 로드해야함

 

꼬리질문 1 : SSR에서 하이드레이션 이란? => 하이드레이션(Hydration)은 서버에서 렌더링된 정적 HTML을 클라이언트 측에서 인터랙티브하게 만드는 과정을 말합니다. 간단히 말해, 서버가 생성한 HTML에 클라이언트 측 JavaScript가 연결되어 동적인 기능을 활성화하는 과정입니다.

 

꼬리질문 2 : 스태틱 사이트 제네레이션(Static Site Generation, SSG)과 인크리멘탈 사이트 리제네레이션(Incremental Static Regeneration, ISR)의 개념 

 

1. SSG : 빌드 시점에 모든 페이지를 미리 렌더링하여 정적 HTML파일로 생성하는 방식 

장점 : 빠른 로딩 , 높은 확장성 , 보안성 향상 

단점 : 콘텐츠 업데이트시 매번 빌드 해야함 , 빌드시간 증가

 

2. ISR :  SSG의 한계를 보완하기 위해 도입된 기능으로, 빌드 이후에도 특정 조건에 따라 정적 페이지를 재생성할 수 있게 합니다. 이를 통해 콘텐츠 업데이트가 빈번한 사이트에서도 효율적으로 정적 페이지를 관리할 수 있습니다.

장점: 설정 시간 혹은 특정 조건마다 페이지 재생성해서 콘텐츠 반영, 유연한 빌드 시간 단축

단점 : 일관성 문제 - 페이지 재생성동안 콘텐츠 불일치 발생 가능

 

2. 소켓이란? 웹소켓이란?

소켓 Socket : 네트워크에서 통신을 수행하기 위한 종단점 , 데이터를 주고받는 양쪽 노드를 연결하는 인터페이스 역할을 함

TCP , UDP 같은 프로토콜을 사용하여 데이터를 전송한다.

 

- TCP 소켓:
- 연결 지향적: 데이터를 주고받기 전에 연결을 설정해야 합니다.
- 신뢰성 보장: 데이터의 순서 보장, 오류 검출 및 수정 기능 제공.
- 예제 사용 시나리오: HTTP, FTP, SSH 등 안정적인 데이터 전송이 필요한 애플리케이션.

- UDP 소켓:
- 비연결 지향적: 연결을 설정하지 않고 데이터를 전송합니다.
- 속도 우선: 빠른 데이터 전송이 가능하지만 신뢰성은 보장되지 않습니다.
- 예제 사용 시나리오: 실시간 애플리케이션(예: 온라인 게임, 스트리밍), DNS 조회 등.

 

웹소켓 Web Socket : 웹 어플리케이션에서 클라-서버 간에 실시간 / 양방향 통신을 가능하게 하는 프로토콜

웹소켓은 HTTP를 통해 초기 연결을 설정한 후, 이후 데이터 전송에는 웹소켓 프로토콜로 업그레이드합니다. 이렇게 함으로써 지속적인 싱글 TCP 연결을 유지하며, 클라이언트와 서버 간에 자유롭게 데이터를 주고받을 수 있습니다.

1. 핸드셰이크(Handshake) - 두 장치가 상호작용을 하기전에 일련의 교환과정을 통해 연결을 설정하고 통신 방식을 합의:
- 클라이언트는 HTTP 요청을 통해 웹소켓 연결을 요청합니다.
- 서버는 이를 수락하고, 연결을 웹소켓으로 업그레이드합니다.

2.데이터 전송:
- 연결이 설정되면, 클라이언트와 서버는 자유롭게 메시지를 주고받을 수 있습니다.
- 메시지는 텍스트 또는 바이너리 형식으로 주고받을 수 있습니다.

3. 연결 종료:
- 양쪽 중 하나가 연결 종료를 요청하면, 연결이 종료됩니다.

 

 

3. 번들러 , 트랜스파일러, 패키지 매니저의 개념은?

 

번들러 : 여러개의 파일 (주로 JS)을 하나의 파일로 묶어주는 도구 , 웹앱을 개발할때 코드가 여러 모듈로 나뉘어져 있을 수 있는데, 이를 하나의 파일로 번들링하여 네트워크 요청 수를 줄이고, 로딩속도를 개선할 수 있다.

코드를 압축해서 파일 크기를 줄이고 성능을 최적화 해준다.

(트리쉐이킹- 코드의 의존성 그래프를 분석하여 실제로 사용되지 않는 코드를 "가지치기" 하듯이 제거합니다.
트리 쉐이킹은 ES6 모듈 시스템(ESM)의 정적 구조를 활용하여, 코드가 어떻게 사용되는지를 분석하고, 불필요한 부분을 제거함으로써 성능을 최적화합니다.)

예) 웹팩, 파르셀 , 롤업

 

트랜스파일러 : 언어가 최신버전이어도 구형 환경에서 실행 가능하도록 변환해주는 도구, 주로 ES6코드를 구형 브라우저에서도 실행할 수 있도록 ES5코드로 변환하는데 사용된다.

예) 바벨 

 

패키지매니저 : 프로젝트에서 사용하는 외부 라이브러리와 패키지를 관리하는 도구로, 설치, 업데이트, 삭제등을 쉽게 수행하고 의존성관리를 자동화 하여 줍니다.

예) npm , yarn , pnpm(패키지를 전역 저장소에 저장하고 사용하여 디스크 사용량을 줄이고 설치 속도 높임)