Frontend 40

[Frontend] Webpack vs Vite 번들링 원리부터 이해하기

Webpack vs Vite, 번들링 원리부터 이해하기들어가며"Vite가 Webpack보다 빠르다"는 문장은 이제 너무 흔해서 오히려 아무 정보도 주지 못한다. 왜 빠른지, 정확히 어느 단계에서 빠른지, 그리고 그 대가로 무엇을 포기했는지를 설명하지 않으면 이 문장은 마케팅 문구와 다를 게 없다.이 글은 "설정 방법"이나 "속도 비교표"를 다루지 않는다. 대신 두 도구가 내부적으로 모듈을 어떻게 다루는지, 그리고 그 설계 차이가 왜 필연적으로 지금의 성능 특성을 만드는지를 파고든다.1. 번들러가 푸는 문제: 모듈 그래프모든 번들러의 출발점은 동일하다. 브라우저는 원래 import라는 개념을 파일 단위로 즉시 이해하지 못했던 시절이 있었고(지금은 ESM을 네이티브 지원하지만), 수백~수천 개의 모듈을 하나..

Frontend 2026.07.07

[Frontend] React가 Virtual DOM을 사용하는 이유(성능 측정)

React가 Virtual DOM을 사용하는 이유와 실제 성능 이점 측정들어가며"React는 Virtual DOM을 사용하기 때문에 빠르다"는 말은 프론트엔드 개발자라면 한 번쯤 들어봤을 것이다. 하지만 이 명제는 정확하지 않다. Virtual DOM은 실제 DOM보다 본질적으로 빠르지 않으며, 오히려 순수한 연산량만 놓고 보면 오버헤드가 추가되는 구조다.그렇다면 React는 왜 Virtual DOM을 채택했을까? 이 글에서는 Virtual DOM의 동작 원리를 분석하고, 실제 DOM 조작과 React의 렌더링 방식을 벤치마크 코드로 직접 비교하여 "무엇이 진짜 이점인지"를 정리한다.1. 실제 DOM 조작이 비싼 이유브라우저가 DOM을 변경할 때 내부적으로 다음 파이프라인이 발생한다.DOM/CSSOM 변..

Frontend 2026.07.07

[Frontend] 3D 디지털 트윈 공간분석 기능 구현 (feat. MSA)

🌍 3D 디지털 트윈 공간분석 마이크로 프론트엔드Cesium · React · Webpack MPA · Qiankun 기반의 지리공간 분석 플랫폼 React TypeScript Cesium Webpack Ant Design Turf.js 프로젝트 코드명: [platform]-svc3d-front-dt-general역할: 3D 지도 위에서 동작하는 공간분석·시뮬레이션 마이크로 앱 모음배포 형태: UMD 번들 → 메인 3D 플랫폼(Qiankun)에 동적 로드📋 목차프로젝트 개요아키텍처 한눈에 보기빌드 시스템: Webpack MPA마이크로 프론트엔드: Qiankun 통합3D 렌더링 레이어: Cesium Analytics공통 모듈 설계분석 모듈 카탈로그공간 알고리즘 구현API · 환경변수 · 프록시상태 관리..

Frontend 2026.07.06

[Frontend] 3D 건물 모델링 기능 구현 (feat. MSA)

3D 건물 모델링 마이크로프론트엔드Cesium 기반 3D GIS 플랫폼 위에서 동작하는 건물 생성·층 분할·텍스처 매핑 마이크로 앱의 아키텍처와 구현을 깊이 있게 다룹니다.React 18Webpack 5 UMDQiankunCesium 1.115ReduxFME Server3D TilesNginx Gateway민감 정보 안내본 문서의 IP 주소, 내부 서비스명, 조직 식별자는 마스킹 처리 되어 있습니다. 실제 운영 환경 값은 공개하지 않습니다.목차프로젝트 개요모노레포 & 마이크로프론트엔드 아키텍처Webpack 멀티 엔트리 & UMD 번들링Qiankun 생명주기 통합핵심 기능: 3D 건물 모델링 파이프라인Cesium 렌더링 & 지형 샘플링백엔드 API & FME 변환 체인환경별 빌드 전략Nginx 리버스 프록..

Frontend 2026.07.06

[Frontend] 3D 지형 종/횡단면 분석 기능 구현 (feat. MSA)

🗺️ 3D 디지털트윈 플랫폼종·횡단면 분석 마이크로프론트엔드 — 심층 기술 분석 프로젝트***-svc3d-front-mf-crossanalysis역할Cesium 3D 지형 위 선형 공간 분석 · DOCX 보고서 생성스택React 18 · Cesium 1.115 · Qiankun · Turf.js · Recharts작성일2026-07-08 Cesium 3D GIS + 마이크로프론트엔드 + 공간연산 + 다중 백엔드 API를 결합한선형 공간 분석(종단면·횡단면) 도구의 아키텍처와 알고리즘을 깊이 있게 다룹니다.📑 목차프로젝트 개요기술 스택마이크로프론트엔드 아키텍처UI 워크플로우핵심 분석 알고리즘레이어 관리보고서 생성 파이프라인API · 인프라 연동Cesium BaseClass 라이브러리아키텍처 다이어그램개..

Frontend 2026.07.05

[Frontend] 3D 시뮬레이션 기능 구현 (feat. MSA)

🌐 3D 디지털트윈 시뮬레이션 분석 마이크로프론트엔드Cesium · React 18 · Qiankun · Webpack 5로 구현한 공간 시뮬레이션 분석 플랫폼 항목내용아키텍처Yarn Monorepo + MPA Micro-Frontend3D 엔진@cesiumgs/cesium-analytics v1.115UI 프레임워크React 18 + Ant Design 4 + Redux빌드 도구Webpack 5 (UMD 번들, Multi-Entry)배포Nginx Unprivileged Container (8087) ⚠️ 보안 안내본 문서는 공개 블로그용으로 작성되었습니다.내부 IP, 회사명, 서비스 식별자 등 민감 정보는 ***, [REDACTED]로 마스킹 처리되었습니다.📑 목차프로젝트 개요시스템 아키텍처모노레포..

Frontend 2026.07.05

[Frontend] JavaScript 정복하기

⚡ 자바스크립트 핵심 개념 완전 정리"자바스크립트는 10분 만에 배울 수 있지만, 제대로 이해하는 데는 10년이 걸린다."프론트엔드 기술 면접에서 가장 자주 등장하는 것이 바로 자바스크립트 핵심 동작 원리입니다. 이 글에서는 면접에서 반드시 나오는 개념들을 원리 중심으로 정리합니다.📌 목차클로저 (Closure)이벤트 루프 (Event Loop)프로토타입 (Prototype)this 바인딩호이스팅 (Hoisting)비동기 처리: Promise와 async/await1️⃣ 클로저 (Closure)클로저는 함수가 자신이 선언될 당시의 렉시컬 스코프(Lexical Scope)를 기억해, 함수 실행이 끝난 후에도 그 스코프에 접근할 수 있는 현상입니다.function makeCounter() { let co..

Frontend 2026.07.05

[Frontend] 디지털트윈 방역공조 모니터링 시스템(feat. R&D 과제)

TypeScript 로 구현한 디지털트윈 방역공조 모니터링 시스템프로젝트명: 디지털트윈 감염병 위험 알람시스템 (Preventative)기술 스택: TypeScript · React 18 · Umi Max 4 · Cesium · Ant Design · WebSocket작성일: 2026-07-04목차프로젝트 소개모노레포 아키텍처TypeScript 기반 프론트엔드 구조핵심 기능 구현API · WebSocket 연동Cesium 3D 지도 통합개발 환경 설정이슈 및 트러블슈팅회고 및 개선 방향1. 프로젝트 소개이 프로젝트는 3D 디지털트윈 지도 위에서 감염병·공기질·공조기(살균기)를 실시간 모니터링하고 원격 제어하는 웹 애플리케이션입니다.경남도청, 마산병원, 한마음병원, 예산군 노인요양원 등 여러 시설의 센서 ..

Frontend 2026.07.04

[Frontend] 3D 재난 모니터링 플랫폼(feat. R&D 과제)

TypeScript로 구현하는 3D 재난 모니터링 플랫폼국민 SoC(Smart of City) 서비스는 Cesium 기반 3D 지도 위에서 침수·산사태·화재 등 재난 상황을 시각화하고, SOP(표준운영절차) 대응을 지원하는 웹 플랫폼입니다. 이 글에서는 이 프로젝트에서 TypeScript를 어떻게 활용했는지, 아키텍처와 코드 패턴을 중심으로 정리합니다.목차프로젝트 개요모노레포 아키텍처TypeScript 설정 전략상태 관리: DVA Model + 타입 정의Cesium 3D 지도와 TypeScript공유 패키지: @packages/utilsFunction Calling AI Agent 패턴React 컴포넌트와 Props 타입마이크로 프론트엔드(Qiankun)와 Umi MaxRTSP 스트리밍 연동개발 환경 및..

Frontend 2026.07.04

[Frontend] Web Fundamentals 정리

🌍 웹 기초 지식 완전 정리"프레임워크는 몇 년마다 바뀌지만, 브라우저와 네트워크의 기본 원리는 변하지 않는다."프론트엔드 면접에서는 프레임워크 지식만큼이나 웹의 근본 동작 원리를 자주 묻습니다. 이 글에서는 URL 입력부터 화면 렌더링까지의 전체 과정을 정리합니다.📌 목차브라우저에 URL을 입력하면 일어나는 일렌더링 과정: Critical Rendering Path리플로우 vs 리페인트HTTP/HTTPS와 캐싱CORS브라우저 저장소 비교1️⃣ 브라우저에 URL을 입력하면 일어나는 일면접 단골 질문입니다. 전체 흐름을 단계별로 정리하면:1. URL 파싱2. DNS 조회 (도메인 → IP 주소)3. TCP 연결 (3-way Handshake)4. TLS 핸드셰이크 (HTTPS인 경우)5. HTTP 요청..

Frontend 2026.07.03