architecture_spa8 프레임워크 없이 바닐라 JS로 SPA 만들기 – 라우팅, 렌더링, 상태관리 직접 구현해보기 들어가며 Vue, React, Svelte 등 SPA 프레임워크는 이미 많은 기능을 추상화해 제공하지만,그 근본 원리를 이해하기 위해서는 프레임워크 없이 직접 SPA(Single Page Application)를 구현해보는 것이 큰 도움이 됩니다.이 글에서는 바닐라 JavaScript만을 사용해:기본 라우팅 처리동적 렌더링 구조간단한 상태 관리 구조 을 직접 구성해보는 실전 예제를 소개합니다. 1. SPA란?페이지 전체를 새로고침하지 않고, JavaScript로 동적으로 콘텐츠를 교체하는 방식의 웹 앱특징브라우저가 최초에 HTML/CSS/JS를 모두 받고 이후에는 JS가 동작 주도URL 변화는 pushState/popState로 관리됨 2. HTML 기본 구조 Home About .. 2025. 4. 20. JavaScript 모듈 시스템 완전 이해하기 – CommonJS vs ESModules 들어가며JavaScript는 과거에는 별도의 모듈 시스템 없이 전역 스코프에서만 코드를 관리했지만,대형 프로젝트가 늘어나면서 코드 분리와 재사용을 위한 모듈 시스템이 필수가 되었습니다.대표적인 모듈 시스템으로는 CommonJS(Node.js 중심)와 ESModules(ESM)(브라우저 표준)이 있으며,각각의 동작 방식과 문법 차이를 정확히 이해해야 환경에 맞게 코드를 구성할 수 있습니다. 1. CommonJS란?Node.js에서 사용되는 대표적인 모듈 시스템 (동기 방식)문법// math.jsfunction add(x, y) { return x + y;}module.exports = { add };// app.jsconst math = require("./math");console.log(math.a.. 2025. 4. 20. 이전 1 2 다음
