전체 글105 [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] HTTP/1.1 VS HTTP/2 (feat. HTTP/3) 1. 계기그동안 나는 HTTP를 단순히 HTTP와 HTTPS 정도로만 구분해서 이해하고 있었다.그러다 회사 비전과 관련해 WEB3를 접하게 되었고, 자연스럽게 HTTP의 “버전”에 대해 궁금해졌다. 단순히 보안 여부가 아니라, 프로토콜 자체가 어떻게 달라졌는지 알고 싶었다.그래서 직접 웹에서 프로토콜을 확인해 보았다. 일반 사이트에서도 HTTP/1.1과 HTTP/2가 혼재되어 있는데, 다른 점을 잘 모르겠어서 차이점에 대해 더 찾아보게 되었다. 우선, 실제 웹에서 프로토콜(및 다른 요청들에 대한 정보들)을 보는 방법이다. F12를 눌러 개발자 도구를 열고 Network 탭을 들어간다.목록에 보고 싶은 컬럼이 없을 경우, 빨간색 네모 친 헤더 부분을 우클릭 해서 원하는 컬럼을 선택해 주면 된다.이번 글에서.. 2026. 2. 28. [Vue.js] subtree 기반 모노레포 (feat. 통합 포털 만들기) 1. 계기회사에는 이미 여러 개의 사이트가 운영 중이었다. 각각의 사이트는 만들어진 시기도 다르고, 담당자도 달랐고, 목적도 조금씩 달랐다. 문제는 이 사이트들을 하나의 통합 포털처럼 보여줘야 하는 상황이 왔다는 점이었다.처음엔 간단하게 “메인 페이지 하나 만들고, 거기서 각 사이트로 들어가게 하면 되지 않나?”라고 생각했다. 하지만 요구사항을 하나씩 뜯어보니 생각보다 간단하지 않았다.사용자 권한에 따라 보이는 메뉴가 달라야 했고, 메뉴 구조는 서버에서 내려줘야 했고, 기존 사이트들은 최대한 손대지 말아야 했고, 무엇보다 이미 운영 중인 서비스들이었다.이쯤 되니 단순히 링크 몇 개 붙이는 문제가 아니라는 걸 깨달았다. 그래서 자연스럽게 “이걸 구조적으로 묶을 수 있는 방법이 없을까?”라는 고민을 하게 됐.. 2025. 12. 31. [Vue.js] Vue의 가상 DOM과 외부 라이브러리 (feat. 계속 다시 그려지는 차트...) 1. 계기KendoUI라는 라이브러리의 차트를 사용하다가 한 이슈가 발생했다. 같은 페이지에 있는 input에 값을 입력할 때마다 차트가 계속 새로 생성되는 문제였다. 단순해 보이는 문제였지만, Vue의 가상 DOM과 외부 라이브러리의 상호작용을 이해하는 좋은 기회가 되었다. 2. 문제 상황 이런 구조에서 input에 텍스트를 입력할 때마다, 차트의 SVG 요소가 완전히 삭제되고 새로운 SVG가 처음부터 다시 생성되어, 차트가 깜빡이는 현상이 발생했다. 3. 발생 원인1) Vue의 가상 DOM 동작 방식Vue2는 React와 마찬가지로 가상 DOM을 사용하여 효율적으로 화면을 렌더링 한다. 가상 DOM은 실제 DOM을 추상화한 것으로, 업데이트가 발.. 2025. 11. 30. [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. 이전 1 2 3 4 ··· 18 다음
