architecture_spa8 카테고리 소개글 & 목차 🧱 SPA(Single Page Application) 는 단순히 페이지를 하나로 구성하는 것이 아니라,📐 라우팅, 렌더링, 상태관리, 코드 분할 등 다양한 요소가 유기적으로 설계되어야 하는 구조 중심의 아키텍처입니다.이 카테고리에서는 다음과 같은 주제들을 다룹니다: 📘 1단계: SPA 구조 기초 & 기반 개념순번글 제목비고1모듈 시스템 (CommonJS vs ESModules) 완전 정리import/export 기반 이해2프레임워크 없이 바닐라 JS로 SPA 만들기라우터 + 렌더링 직접 구현3SPA 구조 설계(모듈화): 라우터/스토어 모듈 분리와 파일 구조 구성법기본 구조화 방식 정리4상태 관리 전략: 중앙화 vs 컴포넌트 로컬화store 구조 선택 기준 정리5컴포넌트 중심의 SPA 아키텍처 설계.. 2025. 4. 26. ESModules 심화2: Vite의 preload, prefetch 전략 / Webpack lazy chunk 오류 대응 / React & Vue 라우터 코드 스플리팅 연동 들어가며SPA의 코드 스플리팅은 성능 최적화의 핵심입니다.import()를 통해 chunk를 분리하더라도 로딩 시점 조절, 에러 대응, 라우터와 연동된 비동기 컴포넌트 처리까지 함께 고려해야 진짜 실전 구조가 완성됩니다.이번 글에서는 Vite와 Webpack 환경에서의 preload/prefetch 전략, lazy chunk 에러 핸들링, React/Vue 라우터에서 코드 스플리팅을 적용하는 실전 구조를 다룹니다. 1. Vite의 preload & prefetch 전략Vite는 Rollup 기반의 번들러로, 기본적으로 import()된 모듈은 chunk로 분리되며 필요 시 자동 preloading도 처리합니다.✅ 기본 동작Vite는 import() 시 modulepreload 링크를 자동 삽입 (ESM .. 2025. 4. 26. ESModules 심화1: 동적 import(), 번들러 처리 방식, tsconfig 설정 가이드 들어가며JavaScript의 모듈 시스템이 ESModules(ESM)으로 표준화되면서 import/export는 이제 일상이 되었습니다.특히 import()를 통한 동적 모듈 로딩, Vite/Webpack 같은 번들러의 ESM 처리 방식,TypeScript에서의 tsconfig.json 설정까지 함께 이해하면 현대적 프로젝트 구조를 설계하는 데 큰 도움이 됩니다.이 글에서는 다음 내용을 단계적으로 정리합니다:import()로 코드 분할 및 동적 로딩Vite/Webpack의 ESM 처리 방식 차이TypeScript에서 module 설정과 사용법React/Vue 컴포넌트 레벨 코드 스플리팅까지 실전 예시 포함 1. 동적 import(import())button.addEventListener("click", .. 2025. 4. 26. Web Vitals(LCP, CLS, FID)과 Lighthouse 성능 측정 실전 들어가며웹 페이지의 체감 속도는 단순한 로딩 시간뿐 아니라 시각적 안정성, 상호작용 지연 등 다양한 요소로 결정됩니다.Google은 이를 수치로 정의한 Core Web Vitals(LCP, FID, CLS)를 중심으로 검색 순위 평가에도 반영하고 있습니다.이 글에서는 Web Vitals의 각 지표를 설명하고, 실제로 Lighthouse를 활용한 측정 및 개선 방법을 안내합니다. 1. Core Web Vitals란?Google이 제안한 웹 사용자 경험 품질의 핵심 지표 세트지표설명목표 값LCP (Largest Contentful Paint)주요 콘텐츠가 렌더링 완료되기까지 걸린 시간2.5초 이하FID (First Input Delay)첫 사용자 입력에 대한 반응 시간100ms 이하CLS (Cumulativ.. 2025. 4. 26. SPA 구조 설계(모듈화): 라우터/스토어 모듈 분리와 파일 구조 구성법 들어가며프레임워크 없이 바닐라 JS로 SPA(Single Page Application)를 구현하거나, React/Vue 등 프레임워크 기반 SPA를 구성할 때도 구조 설계는 핵심입니다.특히 라우팅, 상태관리, 페이지 렌더링 로직을 모듈 단위로 분리하면 유지보수성과 확장성이 크게 향상됩니다.이 글에서는 바닐라 JS 기반 SPA를 예시로, 라우터/스토어 모듈 분리 및 폴더 구조 설계 방식을 소개합니다. 1. 전체 폴더 구조 예시src/├── index.html├── app.js ← 진입점 (init, router 실행)├── router/│ └── index.js ← 라우터 모듈├── store/│ └── index.js ← 전역 상태 관리├── pages.. 2025. 4. 26. 브라우저 렌더링 구조와 성능 최적화 – 웹페이지가 그려지는 과정을 이해하고 빠르게 만들기 들어가며웹페이지를 최적화하기 위해서는 브라우저가 HTML/CSS/JS를 어떻게 해석하고 화면에 출력하는지 정확히 이해해야 합니다.렌더링 파이프라인의 각 단계를 알면, 불필요한 렌더링/리플로우/리페인트를 방지해 웹 성능을 높일 수 있습니다.이 글에서는 브라우저 렌더링 과정과, 이를 기반으로 한 실전 성능 최적화 전략을 함께 정리합니다. 1. 브라우저 렌더링 파이프라인HTML 파싱 → DOM 트리 생성CSS 파싱 → CSSOM 생성DOM + CSSOM → 렌더 트리 생성Layout (Reflow) → Paint → Composite① 파싱 단계HTML → DOM(Document Object Model)CSS → CSSOM(CSS Object Model)② 렌더 트리 생성DOM과 CSSOM을 조합해 실제 화.. 2025. 4. 20. 이전 1 2 다음
