본문 바로가기

spa3

[Web] Web2의 진화 (SPA -> Jamstack -> RSC) 1. 이전 이야기 ~ (SPA)이전 글에서는 웹이 다음과 같은 흐름으로 발전했다고 정리했다.Web1 → Web2 초기 (SSR) → Web2 후기 (SPA) React가 등장하면서 많은 서비스가 SPA(Single Page Application) 구조로 이동했다.SPA의 기본 구조는 단순하다.Browser↓HTML (거의 빈 문서)↓JavaScript bundle 다운로드↓React 실행↓UI 생성예를 들어 이런 HTML이 내려온다.그리고 브라우저는 다음과 같은 JS 번들을 다운로드한다.ReactDOM.createRoot(document.getElementById("root")).render();React가 실행되면 브라우저 안에서 Virtual DOM을 만들고 실제 UI를 생성한다. SPA의 장점SPA.. 2026. 3. 13.
[Web] 웹은 어떻게 발전했을까? (Web1 → Web2 초기 -> 후기) 1. 계기회사에서 “Web3를 지향한다”는 이야기를 듣게 되면서 자연스럽게 Web3가 무엇인지 궁금해졌다. 처음에는 단순히 블록체인과 관련된 기술 정도로 생각했지만, 조금 더 찾아보니 Web3를 이해하려면 그 이전의 웹이 어떻게 발전해 왔는지를 먼저 알아야 한다는 생각이 들었다. Web3라는 개념은 어느 날 갑자기 등장한 것이 아니라, Web1과 Web2라는 흐름 위에서 등장했기 때문이다.그래서 이번 시리즈에서는 Web3 자체를 설명하기보다는 먼저 웹이 어떤 방식으로 발전해왔는지를 아키텍처 관점에서 정리해보려고 한다. 웹의 역사 흐름을 이해하면 왜 특정 기술이 등장했는지, 그리고 현재 우리가 사용하는 프레임워크들이 어떤 문제를 해결하기 위해 만들어졌는지도 훨씬 자연스럽게 이해할 수 있다.웹의 발전을 크게.. 2026. 3. 9.
[Web] SPA 배포 시 base 경로 설정, 왜 서버만으로는 부족할까? 1. 계기최근 프로젝트에서 배포 경로 문제로 논의가 있었다. 하나의 도메인에 여러 서비스를 진입 경로로 구분해서 올려야 하는 상황이었는데, "서버에서 경로를 설정하면 프론트에서는 추가 설정이 필요 없지 않나요?"라는 질문에서 시작되었다.당연하다고 생각했던 내용이 막상 "왜?"라는 질문 앞에서는 명확하게 설명하기 어려웠었다.2. 개발환경Vue.js 버전: 2.6.14Vue.js CLI 버전: 5.0.8TypeScript : 미사용3. 문제 상황도메인 하나로 여러 서비스를 운영해야 하는 상황:example.com/service-a → A 서비스example.com/service-b → B 서비스이때 진입 경로(/service-a, /service-b)가 배포 환경에 따라 동적으로 변경될 수 있어야 했다. 다.. 2025. 11. 30.