9월10일(목)
- 프론트앤드 기술 발전
*기술 관련 마인드 맵
프론트앤드 기술 관련 용어 정리
- 웹 표준 및 기초 브라우저 기술 (Web Standards & Foundations)
HTML
정식 명칭: HyperText Markup Language (하이퍼텍스트 마크업 언어)
개념 및 비유: 웹 페이지의 뼈대와 구조를 잡는 언어입니다. 건축에서 철골 구조와 콘크리트 벽체를 세우는 것에 비유할 수 있습니다.
기술적 설명: 텍스트, 이미지, 링크 등의 요소를 브라우저가 인식할 수 있도록 다양한 등의 태그(Tag) 형태로 감싸 문서의 논리적 의미(시맨틱 구조)를 정의합니다.
CSS
정식 명칭: Cascading Style Sheets (종속형 스타일 시트)
개념 및 비유: HTML로 세운 뼈대 위에 색상, 배치, 글꼴 등 시각적 디자인을 입히는 전담 언어입니다. 건축의 외벽 페인트칠과 인테리어에 해당합니다.
기술적 설명: 초기에는 HTML 태그 내부에 직접 디자인 코드를 작성하여 유지보수가 어려웠으나, CSS를 분리함으로써 '구조와 표현의 분리(Separation of Concerns)'를 달성했습니다. 부모 요소의 스타일이 자식에게 계단식으로 상속되는 캐스케이딩(Cascading) 규칙과 우선순위(Specificity)를 기반으로 화면을 스타일링합니다.
JavaScript (JS)
정식 명칭: JavaScript (자바스크립트)
개념 및 비유: 정적인 웹 문서에 움직임과 생명력을 불어넣는 프로그래밍 언어입니다. 건축물에 설치되는 전등 스위치나 엘리베이터 같은 전기·기계 작동 장치입니다.
기술적 설명: 브라우저 런타임 환경에서 동작하며, 사용자의 마우스 클릭, 키보드 입력, 스크롤 등의 이벤트를 감지하고 DOM을 동적으로 조작하여 화면을 실시간으로 제어합니다.
DOM
정식 명칭: Document Object Model (문서 객체 모델)
개념 및 비유: 브라우저가 HTML 코드를 읽고 이해하기 위해 메모리 안에 만들어 둔 '웹 페이지의 족보(트리 구조 지도)'입니다.
기술적 설명: HTML 문서의 모든 요소(태그, 텍스트, 속성)를 자바스크립트가 접근하고 수정할 수 있도록 트리 형태의 객체(Node)로 모델링한 브라우저 내부 API입니다. 자바스크립트는 이 DOM 트리의 노드를 탐색하고 속성을 변경함으로써 화면을 실시간으로 바꿉니다.
크로스 브라우징 (Cross-Browsing)
정식 명칭: Cross-Browsing (이종 브라우저 간 호환성 확보)
개념 및 비유: 크롬, 사파리, 엣지, 파이어폭스 등 서로 다른 브라우저에서도 웹사이트가 깨지지 않고 동일하게 작동하도록 보장하는 작업입니다.
기술적 설명: 과거 브라우저 제조사(Netscape, Microsoft 등)들이 자체 규격을 경쟁적으로 탑재하면서 동일한 자바스크립트/CSS 코드가 브라우저마다 다르게 실행되는 파편화가 심각했습니다. 이를 통일하기 위해 W3C 표준 규격을 준수하고 벤더별 버그를 우회하는 코드를 작성하는 공학적 대응을 의미합니다.
jQuery
정식 명칭: jQuery (제이쿼리 라이브러리)
개념 및 비유: 복잡하고 제각각이던 브라우저 조작 방식을 하나로 통일해 준 '만능 리모컨'입니다.
기술적 설명: 2006년 등장하여 브라우저별로 상이하던 DOM 조작 문법을 $('선택자')라는 단순한 형태로 추상화했습니다. 크로스 브라우징 이슈를 라이브러리 내부에서 일괄 처리해 줌으로써 프론트엔드 개발 생산성을 획기적으로 끌어올렸습니다.
API
정식 명칭: Application Programming Interface (응용 프로그램 프로그래밍 인터페이스)
개념 및 비유: 서로 다른 소프트웨어 프로그램이 정해진 규칙에 따라 대화하고 데이터를 주고받을 수 있도록 만든 '소통 창구(주문 카운터)'입니다.
기술적 설명: 프론트엔드에서는 주로 클라이언트(브라우저)가 백엔드 서버의 데이터베이스로부터 데이터를 안전하게 요청(Request)하고 응답(Response)받기 위해 사용하는 통신 규격을 의미합니다.
Ajax
정식 명칭: Asynchronous JavaScript and XML (비동기 자바스크립트와 XML)
개념 및 비유: 페이지 전체를 새로고침(깜빡임)하지 않고도, 브라우저가 백그라운드에서 몰래 서버와 데이터를 주고받아 화면의 일부만 바꾸는 기술입니다.
기술적 설명: 과거에는 게시판 댓글 하나를 달아도 화면 전체가 백색으로 번쩍이며 새로고침되었습니다. Ajax는 자바스크립트의 통신 기능을 통해 백엔드와 필요한 데이터만 비동기(Asynchronous)로 교환한 후, 해당 영역의 DOM만 동적으로 갱신하여 연속적인 사용자 경험을 가능하게 했습니다.
XHR
정식 명칭: XMLHttpRequest (XML HTTP 요청 객체)
개념 및 비유: 브라우저 내부에서 Ajax 비동기 데이터 통신을 실제로 수행하는 '우체부 객체'입니다.
기술적 설명: 자바스크립트가 웹 서버로 HTTP 요청을 전송하고 응답을 수신하기 위해 브라우저가 기본 제공하는 네이티브 인터페이스입니다. 현재는 문법이 더 직관적인 fetch API로 상당 부분 대체되었습니다.
- UI 아키텍처 및 상태 관리 (UI Architecture & State Management)
컴포넌트 (Component)
정식 명칭: Component (소프트웨어 컴포넌트 / UI 구성 단위)
개념 및 비유: 거대한 웹 화면을 구성하는 독립적인 '레고 블록'입니다.
기술적 설명: 버튼, 내비게이션 바, 카드 리스트처럼 화면의 특정 영역에 필요한 HTML 구조, CSS 디자인, 자바스크립트 로직을 하나로 묶어 캡슐화한 단위입니다. 이를 조립하여 대형 페이지를 완성하며, 다른 화면에서도 동일한 코드를 재사용할 수 있습니다.
명령형 프로그래밍 vs 선언적 프로그래밍
정식 명칭: Imperative Programming vs Declarative Programming
개념 및 비유:
명령형(jQuery): "문으로 걸어가서 손잡이를 45도 돌리고 밀어서 열어라"처럼 모든 세부 단계를 일일이 지시하는 방식입니다.
선언적(React): "문이 열려 있는 상태가 되어야 한다"처럼 원하는 최종 결과물(목표 상태)만 명시하는 방식입니다.
기술적 설명: 명령형은 데이터가 바뀔 때마다 개발자가 DOM 요소를 직접 찾아가서 텍스트를 수정해야 하므로 코드가 길어지고 상태 불일치 버그가 잦았습니다. 선언적 방식에서는 UI=f(state) 공식에 따라 상태(State)만 정의하면, 프레임워크가 상태에 맞게 화면을 자동으로 계산하여 그려줍니다.
가상 DOM
정식 명칭: Virtual DOM / VDOM (가상 문서 객체 모델)
개념 및 비유: 브라우저의 실제 화면을 건드리기 전에 컴퓨터 메모리 속에서 먼저 시뮬레이션해 보는 '가상 청사진'입니다.
기술적 설명: 브라우저의 실제 DOM을 조작하는 것은 무거운 연산입니다. React는 실제 DOM과 똑같은 구조를 가벼운 자바스크립트 객체 형태로 메모리에 보관합니다. 데이터 변경이 일어나면 가상 DOM을 먼저 수정한 뒤, 이전 버전과 바뀐 부분만 찾아내 실제 DOM에 한 번에 반영합니다.
리플로우(Reflow) & 리페인트(Repaint)
정식 명칭: Reflow (Layout, 레이아웃 재계산) & Repaint (화면 재그리기)
개념 및 비유:
리플로우: 건물의 벽을 허물고 방의 크기와 가구 위치를 다시 배치하는 대규모 공사입니다.
리페인트: 가구 위치는 그대로 둔 채 벽지 색상이나 페인트만 덧칠하는 마무리 작업입니다.
기술적 설명: 자바스크립트로 DOM의 크기나 위치(width, margin 등)를 변경하면 브라우저 엔진은 전체 요소의 기하학적 위치를 다시 계산하는 리플로우를 거치며, 그 후 픽셀을 채우는 리페인트를 실행합니다. 이는 브라우저 연산 자원을 대량 소모하는 성능 병목의 주원인입니다.
재조정 및 디핑 알고리즘
정식 명칭: Reconciliation (재조정) / Diffing Algorithm (차이 비교 알고리즘)
개념 및 비유: 틀린 그림 찾기처럼, 이전 청사진과 새로운 청사진을 고속으로 대조하여 실제로 바뀐 부분만 골라내는 과정입니다.
기술적 설명: 상태가 변경되었을 때 React가 이전 가상 DOM 트리와 새로 생성된 가상 DOM 트리를 의 시간 복잡도로 빠르게 비교 분석하는 내부 알고리즘입니다. 이 과정을 통해 변경이 확인된 최소한의 노드만 실제 DOM에 전달됩니다.
배치 업데이트 (Batching)
정식 명칭: State Batching (일괄 상태 처리)
개념 및 비유: 마트에 갈 때마다 물건을 하나씩 사 오는 것이 아니라, 장바구니에 목록을 모아 두었다가 한 번에 결제하고 배송받는 시스템입니다.
기술적 설명: 상태 변경 함수가 짧은 시간 동안 연속으로 여러 번 호출될 때, 브라우저가 화면을 매번 다시 그리지 않고 상태 변경 요청들을 하나로 묶어 단 한 번의 렌더링 주기로 일괄 반영하는 최적화 기법입니다.
상태 (State)
정식 명칭: State (컴포넌트 내부 상태)
개념 및 비유: 사용자의 동작에 따라 변할 수 있는 '컴포넌트의 기억 데이터(메모리)'입니다.
기술적 설명: 화면에 표시되는 값 중 사용자의 입력, 네트워크 요청 결과, 모달 창의 열림/닫힘 여부 등 시간에 따라 변하는 데이터를 의미합니다. 상태가 변경되면 해당 컴포넌트는 새로운 데이터를 기반으로 스스로 재렌더링을 수행합니다.
프롭 드릴링 (Prop Drilling)
정식 명칭: Prop Drilling (속성 내리꽂기 현상)
개념 및 비유: 꼭대기 층에 사는 할아버지가 1층에 사는 손자에게 선물을 주기 위해 2층, 3층, 4층에 사는 가족들이 관심도 없는 선물을 손에서 손으로 계속 전달해야 하는 상황입니다.
기술적 설명: 리액트 컴포넌트 트리에서 최상위 부모가 가진 상태를 깊은 곳에 위치한 자식 컴포넌트에게 전달하기 위해, 중간에 위치한 모든 무관한 컴포넌트들이 불필요하게 props를 거쳐 전달해야만 하는 코드 결합도 및 유지보수성 저하 문제입니다.
Flux 아키텍처
정식 명칭: Flux Architecture (단방향 데이터 흐름 아키텍처)
개념 및 비유: 회전문 대신 '일방통행 도로'를 깔아 데이터의 이동 경로를 엄격하게 통제하는 교통 시스템입니다.
기술적 설명: 데이터가 양방향으로 흐르면 어디서 상태가 바뀌었는지 추적하기가 불가능해집니다. Facebook은 Action(행동) → Dispatcher(교통정리자) → Store(데이터 보관소) → View(화면)로 데이터가 오직 한 방향으로만 흐르도록 강제하여 상태 변화를 투명하게 예측할 수 있게 만들었습니다.
Redux
정식 명칭: Redux (중앙 집중식 상태 관리 라이브러리)
개념 및 비유: 마을 주민 각자가 돈을 관리하지 않고, 마을 '중앙 은행(Store)'에 모든 돈을 맡긴 뒤 정해진 '출금 신청서(Action)'를 제출해야만 은행원(Reducer)이 돈을 내어주는 시스템입니다.
기술적 설명: 애플리케이션의 모든 전역 상태를 단일 스토어(Single Source of Truth)에서 보관합니다. 상태는 직접 수정할 수 없으며(Read-only), 반드시 순수 함수인 '리듀서(Reducer)'를 거쳐 기존 상태를 복사한 새로운 불변 객체로만 변경할 수 있어 버그를 사전에 방지하고 상태 이력을 손쉽게 추적합니다.
불변성 (Immutability)
정식 명칭: Immutability (불변성 유지)
개념 및 비유: 원본 문서를 지우개로 지우고 고치는 것이 아니라, 문서를 복사한 뒤 복사본에 수정사항을 적어 새로운 버전으로 보관하는 방식입니다.
기술적 설명: 메모리에 저장된 데이터의 값을 직접 변경하지 않고, 변경이 필요할 때마다 새로운 참조값(Reference)을 가진 새 객체를 생성하는 원칙입니다. 이를 통해 이전 상태와 현재 상태의 메모리 주소만 비교해도 데이터 변경 여부를 즉각 판단할 수 있어 성능 최적화에 기여합니다.
Zustand
정식 명칭: Zustand (주스탠드, 독일어로 '상태'를 의미)
개념 및 비유: 복잡한 규정 서류가 가득한 대형 은행(Redux) 대신, 간소화된 창구에서 빠르고 편리하게 상태를 맡기고 찾는 '미니멀리즘 금고'입니다.
기술적 설명: Redux의 복잡한 보일러플레이트(액션 타입, 디스패처, 리듀서 등) 코드를 제거하고, 리액트 훅(Hooks) 문법을 바탕으로 간결하게 전역 상태를 생성하고 구독할 수 있도록 설계된 현대적 경량 상태 관리 라이브러리입니다.
- 개발 환경, 모듈 및 빌드 툴체인 (Environment, Modules & Toolchains)
Node.js
정식 명칭: Node.js (노드제이에스 런타임 환경)
개념 및 비유: 브라우저라는 어항 속에서만 살던 자바스크립트를 육지(내 컴퓨터 운영체제, 서버)로 꺼내어 뛰어놀 수 있게 만든 엔진입니다.
기술적 설명: 구글의 V8 엔진을 기반으로 구축된 자바스크립트 실행 환경(Runtime)입니다. Node.js의 탄생으로 인해 자바스크립트는 브라우저 내부 화면 제어를 넘어, 개발 도구 제작, 빌드 자동화, 백엔드 웹 서버 구축까지 전천후로 활용되는 언어로 도약했습니다.
V8 엔진
정식 명칭: Google V8 JavaScript Engine (구글 V8 자바스크립트 엔진)
개념 및 비유: 사람이 작성한 자바스크립트 코드를 컴퓨터 하드웨어(CPU)가 즉시 이해할 수 있는 0과 1의 기계어로 번역해 주는 '초고속 통역 엔진'입니다.
기술적 설명: 구글 크롬 브라우저와 Node.js에 탑재된 오픈소스 엔진입니다. JIT(Just-In-Time) 컴파일 방식을 채택하여 코드를 실행 직전에 초고속으로 기계어로 컴파일함으로써 자바스크립트의 실행 성능을 비약적으로 끌어올렸습니다.
npm
정식 명칭: Node Package Manager (노드 패키지 매니저)
개념 및 비유: 전 세계 개발자들이 만들어 둔 유용한 코드 부품들을 검색하고 다운로드할 수 있는 '자바스크립트 전용 앱스토어'입니다.
기술적 설명: 자바스크립트 라이브러리와 도구들을 중앙 저장소에 등록하고, 프로젝트의 명령어(npm install) 하나로 필요한 외부 패키지를 자동으로 내려받아 설치 및 관리해 주는 소프트웨어 관리 시스템입니다.
package.json
정식 명칭: Package Configuration File (package.json 패키지 명세서)
개념 및 비유: 레고 블록 키트에 들어 있는 '전체 부품 목록 설명서'입니다.
기술적 설명: 프로젝트가 작동하기 위해 설치해야 하는 외부 라이브러리의 이름과 정확한 버전, 실행 명령어(스크립트) 등을 JSON 형식으로 정리해 둔 프로젝트 핵심 설정 문서입니다. 이 파일만 공유하면 다른 개발자의 컴퓨터에서도 완벽히 동일한 실행 환경을 복원할 수 있습니다.
ECMAScript / ES6
정식 명칭: European Computer Manufacturers Association Script (유럽 컴퓨터 제조 협회 스크립트 표준 규격)
개념 및 비유: 자바스크립트라는 언어가 따라야 하는 '공식 세계 표준 문법 사전'입니다.
기술적 설명: 넷스케이프와 MS의 독자 규격 난립을 막기 위해 ECMA 국제기구가 제정한 표준 규격입니다. 특히 2015년에 발표된 6번째 버전인 ES6(ES2015)는 모듈 시스템(import/export), 화살표 함수, 클래스(class), Promise 등 현대 프로그래밍에 필수적인 고급 문법을 대거 도입하며 생태계의 패러다임을 완전히 바꾸었습니다.
JSX
정식 명칭: JavaScript XML (자바스크립트 확장 문법)
개념 및 비유: 자바스크립트 코드 파일 안에서 HTML 태그를 자연스럽게 섞어 쓸 수 있도록 만든 특수 문법입니다.
기술적 설명: 브라우저는 JSX를 직접 해석할 수 없습니다. 빌드 과정에서 바벨(Babel)과 같은 트랜스파일러를 통해 순수한 자바스크립트 객체 생성 함수(React.createElement)로 자동 치환됩니다.
AST
정식 명칭: Abstract Syntax Tree (추상 구문 트리)
개념 및 비유: 컴퓨터가 코드를 문법적으로 분석하기 위해, 문장을 주어-동사-목적어로 해체하여 그린 '문법 구조 분석 나무 다이어그램'입니다.
기술적 설명: 프로그래밍 언어의 소스 코드를 컴파일러나 트랜스파일러가 분석하고 변환하기 쉽도록 노드 간의 위계와 의미를 트리 구조로 추상화한 데이터 구조입니다. 바벨은 코드를 AST로 변환한 뒤 구형 문법으로 재작성합니다.
Babel
정식 명칭: Babel (바벨 트랜스파일러)
개념 및 비유: 최신 유행어(최신 문법 ES6+)로 쓰인 글을 나이 드신 분(구형 브라우저)도 알아들을 수 있게 옛날 표준어(ES5)로 번역해 주는 '자동 통역기'입니다.
기술적 설명: 소스 코드 대 소스 코드 컴파일러(Source-to-Source Compiler) 또는 트랜스파일러(Transpiler)입니다. 최신 표준 문법이나 실험적 문법, JSX 코드를 파싱하여 구형 브라우저 런타임에서도 결함 없이 실행되는 안전한 하위 호환 표준 코드로 변환해 줍니다.
Webpack
정식 명칭: Webpack (웹팩 정적 모듈 번들러)
개념 및 비유: 프로젝트 안에 수백 개로 잘게 쪼개진 코드 파일들과 이미지 에셋들을 차곡차곡 정리하여 택배 상자 몇 개에 압축 포장해 주는 '포장 이사업체'입니다.
기술적 설명: 웹 애플리케이션의 진입점(Entry Point)부터 시작하여 모듈 간의 연결 관계(의존성 그래프)를 분석한 뒤, 수많은 자바스크립트, CSS, 이미지 파일들을 몇 개의 최적화된 번들(Bundle) 파일로 묶어 배포해 주는 정적 번들러 도구입니다.
트리 쉐이킹 (Tree Shaking)
정식 명칭: Tree Shaking (불필요한 코드 제거 최적화)
개념 및 비유: 나무를 세게 흔들어 마른 낙엽이나 죽은 나뭇가지를 바닥으로 떨어뜨리는 작업입니다.
기술적 설명: 빌드 번들링 과정에서 소스 코드의 의존 관계를 정적 분석하여, 실제로 한 번도 호출되거나 사용되지 않은 함수나 라이브러리 코드를 최종 번들 파일에서 자동으로 제외(Dead Code Elimination)하여 파일 용량을 대폭 줄이는 기술입니다.
ESM
정식 명칭: ECMAScript Modules (자바스크립트 공식 표준 모듈 시스템)
개념 및 비유: 각 코드 파일들이 규격화된 입구(export)와 출구(import)를 갖추고 서로 필요한 부품만을 공식적으로 빌려 쓸 수 있게 만든 국제 규격입니다.
기술적 설명: 과거에는 파일 간 코드를 공유하기 위해 전역 변수를 쓰거나 비공식 모듈 규격을 썼으나, 모던 브라우저가 직접 지원하는 표준 규격으로 정립되었습니다. 번들러 없이도 브라우저가 직접 필요한 파일 단위로 네트워크 요청을 보내 불러올 수 있습니다.
Vite
정식 명칭: Vite (비트, 프랑스어로 '빠르다'는 의미)
개념 및 비유: 거대한 화물차를 다 채울 때까지 출발하지 않던 옛날 배송 방식(Webpack) 대신, 주문이 들어오는 즉시 오토바이 퀵서비스로 쏜살같이 배달하는 '초고속 현대식 개발 도구'입니다.
기술적 설명: 브라우저의 네이티브 ESM을 활용하는 차세대 빌드 도구입니다. 개발 환경에서 전체 코드를 미리 번들링하지 않고, 수정된 파일만 온디맨드(On-demand)로 즉각 변환하여 제공함으로써 서버 구동 및 코드 반영 속도를 수 밀리초 수준으로 단축했습니다.
esbuild
정식 명칭: esbuild (Go 언어 기반 초고속 자바스크립트 빌더)
개념 및 비유: 사람이 손으로 깎던 연필을 레이저 기계로 0.1초 만에 깎아버리는 '초고속 기계식 연필깎이'입니다.
기술적 설명: 기존 자바스크립트 기반 빌드 도구들과 달리 저수준 시스템 언어인 Go(골랭)로 작성되어 멀티스레드와 병렬 처리를 극대화한 번들러/트랜스파일러입니다. 기존 Webpack이나 Babel 대비 10배~100배 이상의 압도적인 컴파일 속도를 자랑하며 Vite의 내부 핵심 엔진으로 사용됩니다.
HMR
정식 명칭: Hot Module Replacement (핫 모듈 교체)
개념 및 비유: 달리는 기차(브라우저)를 완전히 멈추거나 승객을 내리게 하지 않고, 고장 난 바퀴(수정된 코드)만 주행 중에 마법처럼 즉각 교체하는 기술입니다.
기술적 설명: 개발자가 코드를 수정한 후 저장했을 때, 브라우저 화면 전체를 새로고침하지 않고 변경된 모듈만 런타임 메모리 상에서 실시간으로 갈아 끼우는 기능입니다. 페이지가 새로고침되지 않으므로 폼에 입력 중이던 텍스트나 로그인 상태가 그대로 유지되어 개발 효율성이 극대화됩니다.
- 웹 렌더링 전략 및 아키텍처 (Rendering Strategies & Architecture)
MPA
정식 명칭: Multi-Page Application (다중 페이지 애플리케이션)
개념 및 비유: 책장을 넘길 때마다 이전 페이지를 덮고 완전히 새로운 종이 책장을 넘겨받아 읽는 전통적인 방식입니다.
기술적 설명: 사용자가 링크를 클릭하거나 화면을 이동할 때마다 브라우저가 원격 웹 서버에 매번 새로운 HTML 파일을 요청하여 받아오는 전통적인 아키텍처입니다. 화면이 전환될 때마다 화면 전체가 하얗게 깜빡이는 화면 새로고침 현상이 수반됩니다.
SPA
정식 명칭: Single Page Application (단일 페이지 애플리케이션)
개념 및 비유: 종이 책을 통째로 갈아 끼우는 대신, 단 하나의 판(Single Page)을 두고 그 안의 내용물 블록만 착착 바꿔 끼우는 방식입니다.
기술적 설명: 서버로부터 최초 접속 시 단 하나의 빈 껍데기 HTML 파일과 자바스크립트 번들을 통째로 내려받은 후, 이후의 화면 이동 및 데이터 갱신은 브라우저 내부에서 자바스크립트가 직접 DOM을 갈아 끼우며 처리하는 애플리케이션 구조입니다. 페이지 새로고침 없이 스마트폰 앱처럼 극도로 부드러운 전환 효과를 제공합니다.
CSR
정식 명칭: Client-Side Rendering (클라이언트 사이드 렌더링)
개념 및 비유: 완성된 요리를 식당에서 배달받는 것이 아니라, 요리 재료와 레시피 북(자바스크립트)을 집으로 배송받아 사용자의 주방(브라우저)에서 직접 요리해 먹는 방식입니다.
기술적 설명: 서버는 내용이 없는 빈 HTML 문서(
)와 자바스크립트 번들만 전달하고, 사용자의 브라우저(클라이언트)가 자바스크립트를 해석·실행하여 화면 전체를 직접 조립하고 그리는 렌더링 방식입니다. 자바스크립트가 전부 로드되어 실행되기 전까지 화면에 하얀 빈 화면(Blank Screen)이 길게 유지되고 검색 엔진 봇이 본문을 수집하지 못하는 치명적인 약점이 있습니다.SSR
정식 명칭: Server-Side Rendering (서버 사이드 렌더링)
개념 및 비유: 주방장(서버)이 식당 주방에서 요리를 완전히 완성한 후 즉시 먹을 수 있는 상태로 손님 식탁(브라우저)에 내놓는 방식입니다.
기술적 설명: 사용자의 접속 요청이 있을 때마다 웹 서버가 데이터베이스에서 최신 데이터를 가져와 완성된 형태의 HTML 문서를 실시간으로 렌더링하여 클라이언트에 전송하는 방식입니다. 사용자가 첫 화면(텍스트, 이미지)을 마주하는 속도가 매우 빠르고, 검색 엔진 크롤러에게 완벽한 본문 콘텐츠를 제공하여 SEO 문제를 원천 해결합니다.
SSG
정식 명칭: Static Site Generation (정적 사이트 생성)
개념 및 비유: 손님이 주문할 때 요리하는 것이 아니라, 미리 대량으로 통조림 식품을 만들어 창고에 쌓아 두고 주문이 들어오는 즉시 꺼내어 주는 방식입니다.
기술적 설명: 개발자가 코드를 빌드(배포)하는 시점에 모든 페이지의 HTML 파일을 미리 완성하여 정적 파일로 저장해 두는 기법입니다. 서버가 실시간 연산을 수행할 필요가 전혀 없으므로 전 세계 CDN을 통해 밀리초 단위의 극초고속 응답을 보장하지만, 데이터가 실시간으로 변하는 서비스에는 적합하지 않습니다.
ISR
정식 명칭: Incremental Static Regeneration (증분 정적 재생성)
개념 및 비유: 기본적으로는 초고속 통조림(SSG)을 판매하되, 유통기한이 지난 상품에 대해서는 손님이 모르는 사이에 공장 뒷문에서 조용히 새 통조림으로 교체해 두는 시스템입니다.
기술적 설명: 전체 사이트를 다시 빌드하지 않고도 사전에 설정한 유효 시간(revalidate)이 지나면, 백그라운드 서버에서 특정 페이지만 비동기적으로 새로 렌더링하여 정적 캐시를 최신 상태로 갈아 끼우는 하이브리드 기법입니다. 수백만 개의 상품 목록을 가진 이커머스에서 빌드 시간 지연 없이 초고속 캐싱과 데이터 신선도를 동시에 달성할 수 있습니다.
CDN
정식 명칭: Content Delivery Network (콘텐츠 전송 네트워크)
개념 및 비유: 본사가 미국에 있는 쇼핑몰이 한국, 유럽, 일본 등 전 세계 동네마다 물류 창고(지사)를 두고 가장 가까운 창고에서 물건을 총알 배송해 주는 글로벌 물류망입니다.
기술적 설명: 지리적으로 분산된 전 세계 엣지(Edge) 서버들의 네트워크망입니다. 웹 애플리케이션의 HTML, JS, CSS, 이미지 파일 등을 사용자와 가장 물리적 거리가 가까운 엣지 서버에 캐싱해 두어, 네트워크 왕복 지연 시간을 최소화하고 원본 서버의 트래픽 부하를 방지합니다.
Next.js
정식 명칭: Next.js (넥스트제이에스 풀스택 리액트 프레임워크)
개념 및 비유: 기초 엔진과 부품(React)만 제공하던 상태에서 에어컨, 내비게이션, 안전장치, 자동변속기를 완벽히 조립하여 공장에서 출고해 주는 '완성차 플랫폼'입니다.
기술적 설명: Vercel 사가 개발한 프레임워크로, 순수 React의 CSR 한계를 극복하기 위해 SSR, SSG, ISR, RSC 등 다양한 렌더링 전략을 단일 프로젝트 내에서 자유롭게 융합할 수 있도록 인프라와 라우팅을 통합 제공하는 사실상의 엔터프라이즈 표준 프레임워크입니다.
하이드레이션 (Hydration)
정식 명칭: Hydration (하이드레이션, 수분 공급)
개념 및 비유: 서버에서 바짝 말려서 보낸 '건조 미역(마른 뼈대 HTML)'에 클라이언트가 물(자바스크립트 이벤트 리스너)을 부어 부드럽고 쫄깃하게 움직이는 미역으로 되살리는 과정입니다.
기술적 설명: SSR이나 SSG로 서버가 렌더링한 정적 HTML 문서는 화면에 보이기만 할 뿐 클릭이나 입력 이벤트에 반응하지 못합니다. 브라우저가 자바스크립트 번들을 다운로드한 후, 리액트가 메모리 상에 가상 DOM을 재구성하여 실제 서버 렌더링 마크업 노드에 이벤트 리스너와 상태를 결합(수분 공급)하여 상호작용 가능한 화면으로 전환하는 기술 메커니즘입니다.
하이드레이션 불일치 (Hydration Mismatch)
정식 명칭: Hydration Mismatch Error (하이드레이션 불일치 오류)
개념 및 비유: 퍼즐 조각을 맞추려는데, 서버가 만들어 보낸 판의 홈 모양과 브라우저가 쥐고 있는 퍼즐 조각의 모양이 맞지 않아 조립이 튕겨 나가는 현상입니다.
기술적 설명: 서버 환경에서 렌더링하여 생성한 초기 HTML 구조와 브라우저 클라이언트가 런타임에서 처음 생성한 가상 DOM 트리의 텍스트나 태그 구조가 서로 다를 때(예: 서버 시간과 클라이언트 로컬 시간의 불일치, localStorage 참조 차이 등) 리액트 엔진이 경고를 출력하며 화면을 강제로 깜빡이며 재렌더링하는 오류입니다.
상호작용 공백 / 불쾌한 골짜기 (Uncanny Valley of Web)
정식 명칭: The Uncanny Valley of Web Interactivity (상호작용 공백 구간)
개념 및 비유: 화면에는 버튼이 선명하게 보이는데, 아무리 손가락으로 연타를 해도 시스템이 먹통이 되어 전혀 반응하지 않는 당혹스러운 침묵의 시간입니다.
기술적 설명: SSR 덕분에 화면의 시각적 로딩(FCP)은 매우 빨라졌으나, 용량이 큰 자바스크립트 번들을 모두 다운로드하고 하이드레이션을 마칠 때까지 브라우저의 메인 스레드가 멈춰 있어 사용자의 클릭이나 탭 이벤트가 처리되지 못하는 인터랙션 지연 현상입니다.
RSC
정식 명칭: React Server Components (리액트 서버 컴포넌트)
개념 및 비유: 집(브라우저)에서 복잡하게 조립할 필요 없이, 공장(서버)에서 부품을 완전히 용접하여 조립식 완성품 형태로만 배송해 주는 새로운 부품 규격입니다.
기술적 설명: React 18부터 도입된 패러다임으로, 클라이언트로 코드를 전송하지 않고 오직 서버 환경에서만 단 한 번 실행되는 컴포넌트입니다. 데이터베이스나 백엔드 내부 자원에 직접 접근할 수 있으며, 이 컴포넌트의 자바스크립트 코드는 브라우저 번들에 전혀 포함되지 않습니다.
제로 번들 사이즈 컴포넌트 (Zero-Bundle-Size Components)
정식 명칭: Zero-Bundle-Size Components (번들 용량 0의 컴포넌트)
개념 및 비유: 컴포넌트 자체의 무게(코드 용량)가 0g이라 브라우저가 다운로드할 가방의 무게를 전혀 늘리지 않는 마법의 컴포넌트입니다.
기술적 설명: 리액트 서버 컴포넌트(RSC)로 작성된 컴포넌트는 오직 서버에서만 실행되고 그 결과물만 직렬화된 데이터 스트림으로 브라우저에 넘어가기 때문에, 해당 컴포넌트를 구현하기 위해 사용된 자바스크립트 라이브러리 코드(예: 날짜 변환 라이브러리, 마크다운 파서 등)가 클라이언트 자바스크립트 최종 번들 파일에서 100% 제외되는 현상을 의미합니다.
선별적 하이드레이션 (Selective Hydration) / 아일랜드 아키텍처
정식 명칭: Selective Hydration (선별적 하이드레이션) / Islands Architecture (아일랜드 아키텍처)
개념 및 비유: 넓고 고요한 정적 바다 한가운데에, 사람이 상호작용하며 뛰어놀 수 있는 '작고 활동적인 활화산 섬(Island)' 몇 개만 띄워 놓는 방식입니다.
기술적 설명: 전체 페이지를 한꺼번에 하이드레이션하는 비효율을 없애고, 화면 대부분의 정적 영역(헤더, 본문 텍스트 등)은 하이드레이션하지 않은 채 둔 채, 오직 상호작용이 필요한 인터랙티브 버튼이나 검색창 영역만 선별하여 독립적으로 하이드레이션을 수행하는 현대적 최적화 메커니즘입니다.
'use client' 지시어
정식 명칭: 'use client' Directive ('use client' 선언 지시어)
개념 및 비유: "이 블록은 브라우저에서 사용자와 대화해야 하는 블록이니 브라우저용 자바스크립트 부품을 챙겨 보내라"고 컴파일러에게 붙여주는 '네임택(스티커)'입니다.
기술적 설명: Next.js App Router 등 최신 리액트 아키텍처에서 기본값인 '서버 컴포넌트'의 경계를 넘어, useState, useEffect, onClick과 같은 브라우저 런타임 이벤트 및 상태를 사용해야 하는 컴포넌트의 파일 최상단에 선언하여 클라이언트 컴포넌트임을 명시하는 경계(Boundary) 선언문입니다.
- 웹 성능 공학 및 사용자 경험 지표 (Performance Engineering & UX Metrics)
Core Web Vitals
정식 명칭: Core Web Vitals (코어 웹 바이탈 / 웹 핵심 사용자 경험 지표)
개념 및 비유: 구글이 공인한 웹사이트의 '종합 건강검진 성적표'입니다.
기술적 설명: 구글이 사용자가 웹사이트를 이용할 때 느끼는 품질을 객관적으로 측정하기 위해 표준화한 핵심 성능 지표군입니다. 로딩 속도(LCP), 인터랙션 반응성(INP), 시각적 안정성(CLS)의 3대 지표로 구성되며, 구글 검색 엔진의 실제 검색 순위(SEO) 알고리즘에 직접적인 랭킹 신호로 반영됩니다.
LCP
정식 명칭: Largest Contentful Paint (최대 콘텐츠 렌더링 시간)
개념 및 비유: 사용자가 사이트에 들어왔을 때 "아, 이제 화면의 진짜 핵심 내용이 다 떴구나!" 하고 체감하는 순간까지 걸린 시간입니다.
기술적 설명: 브라우저 뷰포트(화면) 내에서 가장 부피가 크고 중요한 시각적 요소(대형 대표 이미지, 동영상 썸네일, H1 제목 텍스트 등)가 화면에 완전히 그려지기까지 걸리는 시간입니다. 우수한 사용자 경험을 위해 2.5초 이하를 달성하는 것이 표준 엔지니어링 권장 기준입니다.
INP
정식 명칭: Interaction to Next Paint (다음 페인트까지의 상호작용 지연)
개념 및 비유: 사용자가 웹서핑을 하는 내내 버튼을 누르거나 탭했을 때 화면이 다음 동작으로 부드럽게 반응하기까지 걸리는 '전반적인 손맛(반응 빠르기)'입니다.
기술적 설명: 2024년 3월 기존의 단편적 지표인 FID를 공식 대체한 최신 코어 웹 바이탈 지표입니다. 사용자가 페이지를 닫을 때까지 발생한 모든 클릭, 탭, 키보드 입력에 대해 브라우저가 화면의 다음 프레임을 그리기까지 걸린 레이턴시 중 최악의 값을 측정합니다. 우수한 기준은 200밀리초(ms) 이하입니다.
CLS
정식 명칭: Cumulative Layout Shift (누적 레이아웃 이동)
개념 및 비유: 결제 버튼을 누르려던 찰나 상단 배너가 뒤늦게 툭 튀어나오면서 화면이 덜컹거려 다른 버튼을 잘못 누르게 만드는 '화면의 멀미 유발 지표'입니다.
기술적 설명: 웹 페이지가 로드되는 생애주기 동안 요소의 의도치 않은 물리적 위치 이동과 크기 변화를 수치화한 시각적 안정성 점수입니다. 이미지 태그에 가로/세로 비율을 미리 지정하지 않았을 때 주로 발생하며, 안정적인 기준은 0.1 이하입니다.
FID
정식 명칭: First Input Delay (최초 입력 지연)
개념 및 비유: 사이트에 처음 들어와서 무언가를 맨 처음 눌렀을 때 시스템이 멍때리는 '첫인상 지연 시간'입니다.
기술적 설명: 사용자가 페이지와 처음 상호작용(링크 클릭, 버튼 탭 등)한 순간부터 브라우저가 해당 이벤트를 처리하기 시작하는 순간까지 걸린 시간을 측정하던 구형 지표입니다. 페이지 생애주기 전체의 반응성을 대변하지 못해 현재는 INP로 완전히 대체되었습니다.
FCP
정식 명칭: First Contentful Paint (최초 콘텐츠 렌더링 시간)
개념 및 비유: 하얗던 빈 화면에서 글자나 이미지 하나라도 눈에 처음 들어오는 '첫 응답의 찰나'입니다.
기술적 설명: 브라우저 탐색 후 DOM의 텍스트, 이미지, SVG 그래픽 요소 등 어떤 콘텐츠라도 화면에 최초로 단 하나라도 픽셀로 렌더링되는 시점을 기록한 지표입니다. 사용자가 사이트가 살아 움직이기 시작했다고 인지하는 기초 기준점입니다.
TTFB
정식 명칭: Time to First Byte (첫 바이트 수신 시간)
개념 및 비유: 식당 문을 열고 들어가서 주문을 넣은 뒤, 웨이터가 처음으로 물 한 잔을 가져다주는 데 걸린 시간입니다.
기술적 설명: 브라우저가 웹 서버에 HTTP 요청을 보낸 시점부터 서버로부터 데이터의 첫 번째 바이트(1 Byte)가 클라이언트에 도착하기까지 걸린 순수 네트워크 및 서버 처리 시간입니다. 서버의 연산 속도와 네트워크 레이턴시 상태를 대변합니다.
TTI
정식 명칭: Time to Interactive (상호작용 가능 시간)
개념 및 비유: 눈으로만 보던 화면이 드디어 사용자의 조작에 막힘없이 온전히 반응하기 시작하는 완벽한 가동 시점입니다.
기술적 설명: 페이지가 의미 있는 콘텐츠를 표시한 후, 브라우저가 백그라운드 스크립트 실행과 하이드레이션을 완전히 완료하여 사용자의 클릭이나 입력에 50ms 이내로 즉각 응답할 수 있는 상태가 되기까지 걸린 전체 소요 시간입니다.
SEO
정식 명칭: Search Engine Optimization (검색 엔진 최적화)
개념 및 비유: 구글이나 네이버 검색 로봇의 눈에 잘 띄도록 내 웹사이트에 명확한 안내 표지판과 읽기 좋은 책갈피를 붙여주는 작업입니다.
기술적 설명: 검색 엔진의 웹 크롤러가 웹사이트의 마크업을 수집하여 검색 결과 페이지 상단에 노출시킬 수 있도록, 표준 시맨틱 HTML 태그, 메타 태그, 구조화된 데이터 및 서버 렌더링(SSR/SSG)을 최적화하는 검색 가시성 공학입니다.
롱 태스크 (Long Task)
정식 명칭: Long Task (메인 스레드 장기 점유 작업)
개념 및 비유: 한 명뿐인 은행 창구 직원을 한 손님이 30분 동안 혼자 붙잡아 두어 뒤에 선 다른 모든 손님들의 업무가 줄줄이 마비되는 상황입니다.
기술적 설명: 브라우저의 단일 메인 스레드를 50밀리초(ms) 이상 연속으로 독점하여 점유하는 무거운 자바스크립트 연산입니다. 롱 태스크가 실행되는 동안 브라우저는 사용자의 클릭이나 타이핑 이벤트를 처리할 수 없어 심각한 프레임 드롭과 INP 성능 저하를 초래합니다.
메인 스레드 (Main Thread)
정식 명칭: Browser Main Thread (브라우저 단일 메인 실행 스레드)
개념 및 비유: 주방에서 요리 주문 접수, 재료 썰기, 불 조절, 서빙까지 혼자 다 도맡아 하는 '단 한 명의 책임 셰프'입니다.
기술적 설명: 브라우저 런타임에서 HTML 파싱, CSS 스타일 연산, 레이아웃 계산, 화면 페인팅, 그리고 자바스크립트 실행을 도맡아 순차 처리하는 단 하나의 메인 실행 스레드입니다. 자바스크립트가 무거운 연산을 처리하고 있으면 다른 렌더링 작업이 모두 블로킹(중단)됩니다.
Web Worker
정식 명칭: Web Worker API (웹 워커 백그라운드 스레드)
개념 및 비유: 바쁜 책임 셰프(메인 스레드) 대신 뒤편 창고에서 감자 100박스를 혼자 묵묵히 깎아 주는 '주방 보조 직원'입니다.
기술적 설명: 메인 스레드의 부하를 덜어주기 위해 메인 스레드와 완전히 분리된 백그라운드 스레드에서 무거운 연산 작업을 병렬로 실행할 수 있도록 지원하는 브라우저 내장 API입니다. 대용량 데이터 필터링이나 암호화 연산을 위임하여 메인 스레드의 UI 렌더링 멈춤을 원천 차단합니다.
FOUT
정식 명칭: Flash of Unstyled Text (스타일 적용 전 텍스트 깜빡임)
개념 및 비유: 웹 폰트가 다운로드되는 동안 컴퓨터 기본 폰트(굴림체 등)로 먼저 글자가 떴다가, 폰트 파일이 도착하자마자 예쁜 폰트로 글자 모양과 크기가 덜컹하며 바뀌는 현상입니다.
기술적 설명: 외부 웹 폰트 파일 다운로드 지연으로 인해 기본 시스템 폰트가 먼저 렌더링된 후 웹 폰트로 교체되는 과정에서 발생하는 레이아웃 흔들림 현상입니다. 폰트마다 차지하는 글자 폭이 다르기 때문에 CLS 지표를 악화시키는 주요 원인입니다.
CrUX
정식 명칭: Chrome User Experience Report (크롬 사용자 경험 보고서)
개념 및 비유: 전 세계 수억 명의 실제 크롬 브라우저 사용자들이 사이트를 직접 쓰면서 구글에 익명으로 제출한 '실전 체감 점수 빅데이터 장부'입니다.
기술적 설명: 개발자의 고사양 컴퓨터에서 측정하는 가상 실험실 데이터(Lab Data)가 아니라, 실제 네트워크 환경과 다양한 모바일 기기를 사용하는 실사용자들의 필드 데이터(Field Data / RUM)를 수집하여 공개하는 공인 데이터베이스입니다. 구글은 검색 순위 산정 시 바로 이 CrUX의 상위 75번째 백분위수(p75) 데이터를 심사 기준으로 삼습니다.
ERD의 3대 핵심 구성요소
프론트엔드 = 트랜드 기술
react, nest.js nest.js vite typescript npm tailwind
1. 엔티티 (Entity / 개체)
- 개념: 데이터베이스에 저장하고 관리할 독립적인 객체나 개념을 의미합니다. (예: '회원', '상품', '주문 내역')
- RDBMS 매핑: 실제 데이터베이스에서는 테이블(Table)로 생성됩니다.
- 도형 표기법: 사각형(□)으로 그리고 그 안에 엔티티의 이름을 적습니다.
2. 속성 (Attribute)
- 개념: 엔티티가 가지고 있는 구체적인 정보나 특성입니다. (예: '회원' 엔티티의 속성 = 아이디, 이름, 연락처, 가입일)
- RDBMS 매핑: 테이블 내의 컬럼(Column / 열)으로 매핑됩니다.
- 도형 표기법: 타원(○)으로 그리며 선을 통해 엔티티와 연결합니다. 데이터를 고유하게 식별하는 기본키(Primary Key) 속성은 이름 밑에 밑줄을 그어 표시합니다.
3. 관계 (Relationship)
- 개념: 두 개 이상의 엔티티가 서로 어떻게 상호작용하고 연관되어 있는지를 정의합니다. (예: 회원이 상품을 '주문한다')
- RDBMS 매핑: 테이블 간의 외래키(Foreign Key)를 통해 물리적으로 연결되며, 추후
JOIN쿼리를 통해 데이터를 엮어냅니다. - 도형 표기법: 마름모(◇)로 그리고, 관계를 맺는 엔티티들을 선으로 연결합니다.
데이터베이스 설계의 핵심: 관계의 차수 (Cardinality)
두 엔티티 간의 관계가 수량적으로 어떻게 매칭되는지를 나타내는 선의 표기법(까마귀 발 표기법 등이 주로 쓰임)입니다.
- 1:1 (일대일 관계): 양쪽 엔티티가 서로 오직 1개의 데이터와 짝을 이룹니다. (예: '사원' ↔ '개인 법인카드')
- 1:N (일대다 관계): 실무에서 가장 흔하게 쓰이는 구조입니다. 한쪽 엔티티의 데이터 1개가 다른 쪽 엔티티의 데이터 여러 개와 연결됩니다. (예: '부서' 1개 ↔ 소속 '직원' N명, '고객' 1명 ↔ '주문 내역' N개)
- N:M (다대다 관계): 양쪽 엔티티의 데이터가 서로 무수히 많이 연결되는 상태입니다. (예: '학생' N명 ↔ '수강과목' M개)
- 주의: RDBMS는 다대다 관계를 직접 저장할 수 없습니다. 따라서 설계 시 중간에 두 엔티티를 엮어주는 '매핑(교차) 테이블'을 새로 생성하여 두 개의 1:N 관계로 풀어내야 합니다.
