웹 엔지니어가 알아야 할 기초지식 - Frontend 편

개요

Frontend, Backend, Infra 등 각 영역과 분야에 관계없이 웹 엔지니어가 알아야할 기초지식을 정리한다.

주요 키워드

Frontend

UX, Atomic Design, React, Vue, Angular, HTML, CSS, JS, TS, etc.

Design

UI/UX, Figma, Adobe XD, etc.

Backend

SSL, API, Auth, JWT, Node, Python, Java, etc.

Micro Service, BFF, etc.

Database

GraphQL, NoSQL, PostgreSQL, MariaDB, Redis, etc.

Infra

CI/CD, Git, Docker, K8s(Kubenetes), etc.

Scalability, Load Balancing, CDN, Observability, etc.

Serverless, AWS, GCP, Amplify, Firebase, etc.

Network

TCP/IP HTTP 3.0 (& HTTP 2.0), etc.

Test & Debugging

TDD, Unit Test, Stress Test, etc.

Frontend

JavaScript 에서는 싱글 스레드이며, 비동기적인 작업을 이벤트 루프로 수행한다. 브라우저에서 이벤트 루프가 발행하는 메커니즘을 설명하라.

브라우저는 JavaScript 런타임(엔진)이라 볼 수 있으며, 이는 코드의 실행, 이벤트 수집과 처리, 큐에 대기 중인 하위 작업을 처리한다.

이 엔진은 하나의 호출 스택을 사용하며, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 함수를 실행할 수 없다. 그래서 비동기 처리를 위해 태스크 큐와 이벤트 루프를 이용한다.

태스크 큐는 함수들이 대기하는 큐, FIFO 형태의 배열이며, 이벤트 루프는 호출 스택이 비워질 때마다 큐에서 함수를 꺼내와서 실행하는 역할을 한다.

TypeScript 가 해결하고자 하는 것은?

런타임 이전(스크립트 실행 전)에, 미리 오류를 확인가능하게 한다.

브라우저의 렌더링 구조를 간단하게 설명하라.

렌더링을 간략하게 설명하면, 다음과 같다.

리소스 획득 URL 및 IP 요청과 TCP/TLS 연결, HTTP 요청 및 응답 수신한다.
리소스 해석 HTML/CSS/JS 및 이미지 등 의 리소스를 해석하고 로드한다. (HTML 은 DOM 트리로, CSS 는 CSSOM 트리로 변환)

Scripting JavaScript 의 해석, 코드를 실행한다.

Styling - 렌더 트리 구축 및 레이아웃 생성 DOM 트리 내 모든 노드에 스타일 (해석된 CSS) 을 입힌다.

Painting 계산된 (픽셀화된) 정보를 합성하여, 최종적인 렌더링 결과를 표시한다.

RE-Rendering 필요한 경우, 위 과정을 반복실행한다.

CRP (Critical Rendering Path) 란 무엇인가?

브라우저가 페이지의 초기 출력을 위해 실행해야 하는 순서이며, 다음 6단계를 말한다.

DOM 트리 구축

CSSOM 트리 구축

JavaScript 실행

렌더 트리 구축

레이아웃 생성

페인팅

RAIL Model 이란?

웹 사이트의 퍼포먼스를 측정하기 위한 지표를 나타내는 모델이다. 사용자 중심으로 사용자 경험을 주요 작업 (ex. 탭, 스크롤, 등) 으로 분류하고 각각에 대한 성능 목표를 정의하는데 도움을 준다.

Response (응답)

Animation (애니메이션)

Idle (유휴 상태)

Load (로드)

0~16ms	사용자는 움직임을 추적하는 데 매우 능숙하며 애니메이션이 매끄럽지 않으면 싫어한다. 사용자는 초당 60개의 새 프레임이 렌더링되는 한 애니메이션을 부드럽게 인식한다. 이 경우 브라우저가 새 프레임을 화면에 그리는 데 걸리는 시간을 포함하여 프레임당 16ms이며, 앱에서 프레임을 생성하는 데에는 약 10ms가 걸린다.
0~100ms	이 시간 내에 사용자 동작에 응답하면 창과 사용자는 결과가 즉각적이라고 느낀다. 더 길어지면, 동작과 응답 사이의 연결이 끊어진다.
100~1000ms	이 창에서 대상이 자연스럽고 지속적인 작업 진행의 일부로 느껴진다. 대부분의 웹 사용자에게 페이지 로드 또는 보기 변경은 작업을 나타낸다.
1000ms 이상	1000밀리초(1초)를 초과하면 사용자는 수행 중인 작업에 대한 집중을 잃는다.
10000ms 이상	10000밀리초(10초)를 초과하면 사용자가 좌절하고 작업을 포기할 가능성이 높다. 사용자는 나중에 돌아올 수도 있고 그렇지 않을 수도 있다.

Core Web Vital 이란?

UX 를 측정하기 위한 지표이며, 구글이 향상된 사용자 환경을 제공하기 위해 도입한 개념이다.

LCP (Largest Contentful Paint) 페이지의 로딩속도를 나타낸다. 페이지내에서 가장 큰 콘텐츠가 표시될 때까지의 시간을 평가하는 것으로, 로딩 시작부터 2.5초 이내에 로딩이 완료되어야 좋다.

FID (First Input Delay) 사이트의 반응 속도를 나타낸다. 사용자가 사이트에 방문한 이후 첫 번째 입력으로 부터 응답받는 시간을 평가하는 것으로, 이상적인 지연시간은 100ms 미만이다.

CLS (Cumulative Layout Shift) 페이지를 로드하는 동안 발생되는 레이아웃 편차를 측정하는 것이다. 갑자기 레이아웃이 어긋나는 것은 사용자들이 불편함을 느끼게 된다.

SPA, CSR, SSR, SSG 의 차이점을 설명하라.

SPA (Single Page Application) 한 페이지에서 필요한 부분만 업데이트해서 보여주는 방식이다.

CSR (Client Side Rendering) 서버에서 HTML 을 받아온 뒤, JavaScript 를 이용하여 데이터를 계산하고 동적으로 렌더링하는 방식이다.

SSR (Server Side Rendering) 서버에서 계산된 데이터와, 스타일을 입힌 HTML 을 반환하고, 이를 브라우저에서 바로 렌더링하는 방식이다.

SSG (Server Site Generation) 앱을 빌드할 때, 렌더링할 때 필요한 HTML 을 미리 만드는 방식이다.

CORS 란 무엇인가? 그리고 왜 CORS 를 설정해야 하는가?

CORS (Cross Origin Resource Sharing) 란, Origin 간의 자원을 공유하기 위해 지켜야 하는 정책이다. 브라우저에서는 스크립트에 의해 요청되는 다른 Origin 간 HTTP 요청을 제한한다. 만약 다른 Origin 에 요청을 해야할 때는 올바른 CORS 헤더를 포함하고 있어야 한다.

이것은 개발자가 의도하지 않은 Origin 요청으로부터 공격을 방어하기 위한 수단이기도 하다.

💡

다른 Origin 이란, 서로 다른 도메인이라고 생각하면 된다.

웹 접근성이란 무엇인가? 접근성을 높이는 방법은 무엇인가?

💡

웹 접근성 (Web Accessibility)? 시각, 청각 기능 등의 장애가 있는 분들이나, 노화로 기능이 저하되고 있는 고령자등을 포함한 모든 사람이 웹(web) 에서 제공되고 있는 정보에 접근하고 이용할 수 있어야 하는 것

웹상의 접근성 표준은 일반적으로 W3C 의 WCAG (Web Content Accessibility Guidelines) 를 기초로 한다.

웹 사이트의 이미지에 캡션을 적용한다.

헤더 태그를 사용해 문서를 정리한다.

서식에 라벨을 적용하고 가독성을 유지한다.

요소에 대한 키보드 탐색의 일관성과 접근성을 확보한다.

확대/축소 뿐 아니라 수동 글꼴 크기 조정을 허용한다.

레이아웃을 위해 테이블을 사용하지 않는다.

웹 사이트의 다크 또는 코대비 모드를 적용한다.

색상과 디자인을 활용하여 페이지 요소를 강조한다.

서술적인 URL 을 사용한다.

WAVE 도구를 사용해 웹 사이트 접근성을 테스트 한다.

💡

WAVE 도구 란? CPD (Center for Persons with Desabilities) 에서 개발하고 유지, 관리 되고 있는 도구이며, 웹 사이트의 접근성에 대한 피드백을 제공한다.

WAVE Web Accessibility Evaluation Tools

WAVE ® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.

https://wave.webaim.org

div 요소에 onClick 을 붙이지 않는 것이 좋은 이유는 무엇인가?

탭 (Tab) 키로 포커스를 맞출 수 없다.

엔터 (Enter) 및 스페이스 (Space) 키로 액션을 실행할 수 없다.

스크린 리더가 제대로 동작하지 않는다.

Virtual DOM 이란 무엇인가?

React, Vue.js 등에서는 UI 를 브라우저에 표시하는데 필요한 DOM 을 얻기 위해, 메모리에 미리 처리하고 저장한 뒤에 실제 DOM 과 동기화 한다. 이때 메모리에 미리 저장한 것을 Virtual DOM 이라고 한다.

Virtual DOM 은 무엇을 해결하고자 하는가?

DOM 은 트리구조로 되어 있어 이해가 쉽다. 하지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한 DOM 업데이트를 하는 것은 콘텐츠 변경 뿐만아니라 CSS 를 다시 계산하는 등의 퍼포먼스 이슈가 있다. 즉, DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이 가장 큰 문제이다.

Virtual DOM 은 실제로 스크린에 렌더링 하는 것이아니다. 그래서 DOM 을 직접 수정하는 것보다 Virtual DOM 을 수정하여 마지막에 변경점만 갱신하는 것이 성능적인 측면에서 유리하다.

List 를 표시할 때, Key 를 지정해야 하는 이유는 무엇인가? 또한 index 를 key 속성으로 지정하면 안되는 이유를 설명하라.

key 를 붙이지 않으면 List 항목에 아이템이 추가되었을 때, 렌더링 할 때 모든 항목(아이템)을 갱신한다. 이는 성능에 좋지않다.

index 를 key 로 사용할 때에는, 순서가 존재하는 List 내의 항목과 실제 렌더링된 항목(아이템) 간의 내용이 일치하지 않을 수 있다. 이를 방지하기 위해서라도 index 를 key 속성으로 사용하지 않는 것이 좋다.

단방향 바인딩과 양방향 바인딩의 차이점은 무엇인가?

💡

바인딩이란? 두 데이터 혹은 정보의 소스를 일치시키는 기법으로 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것이다.

공통점 데이터가 변경되면, 변경된 데이터가 View (화면) 에 자동적으로 반영된다.

단방향 바인딩 (ex. React) 화면의 변경을 데이터에 반영시키기 위해서는 이벤트 핸들러가 필요하다.

양방향 바인딩 (ex. Vue) 화면의 변경에도, 메모리 상의 데이터에 자동적으로 반영된다. 핸들러가 필요없다.

프론트 프로젝트에서 오류를 추적할 수 있는 방법을 알고있는가?

React 의 경우, 내부 오류를 ErrorBoundary 로 확인할 수 있다. 또한 비동기 처리에서의 오류는 Suspense 의 기능을 이용해 확인할 수 있다.

또한 기타 서드파티 도구 중 Sentry 등의 오류 해석 도구를 이용할 수 있다.