IT의 IT 블로그

안녕하세요. 오늘은 자바스크립트 모듈 시스템의 두 가지 방식에 대해 정리해보려고 합니다.자바스크립트의 모듈 시스템은 크게 두 가지로 구분됩니다.하나는 Node.js 환경에서 사용되어 온 CommonJS,다른 하나는 ECMAScript 표준으로 도입된 ES Module(ESM) 입니다.이 두 방식은 단순한 문법 차이에 그치지 않습니다.모듈을 로딩하는 시점, 코드를 분석하는 방식, 그리고 번들링 구조에까지 영향을 미칩니다.이번 글에서는왜 이 두 방식이 등장했는지구조적으로 무엇이 다른지그리고 왜 이 차이가 트리쉐이킹과 연결되는지를 순서대로 정리해보겠습니다.1. 왜 ‘모듈’이 필요했을까?1.1 스크립트 태그 시대의 문제점초기 자바스크립트는 HTML에 이 방식은 단순하지만, 규모가 커지면 치명적인 문제가 발생합..

안녕하세요.오늘은 자바스크립트에서 자주 등장하지만유독 헷갈리기 쉬운 개념인 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 를 정리해보려고 합니다.이 주제를 정리하게 된 이유는 단순합니다.그래서 이 글에서는“왜 문제가 생기고, 그래서 언제 무엇을 써야 하는지”이 관점에 집중해서 정리해보겠습니다.1. 이 문제의 출발점1.1 우리가 자주 겪는 상황자바스크립트를 사용하다 보면객체를 하나 만들어 두고,다른 변수에 그대로 할당해서 사용해 본 경험이 있을 겁니다. const a = { age: 20 };const b = a;b.age = 30;// a.age도 30으로 변함 “분명히 b만 수정했는데왜 a도 같이 바뀌지?” 버그처럼 느껴질 수도 있지만,사실 이 코드는 얕은 복사나 깊은 복사 이전..

이번 글에서는SPA·MPA라는 라우팅 전략과CSR·SSR·SSG·ISR이라는 렌더링 전략이어떤 기준으로 나뉘는 개념인지를 정리해보려 합니다.특히SPA = CSR, MPA = SSR처럼관습적으로 묶여 설명되면서 헷갈렸던 개념들을구조적으로 다시 분리해 이해하는 것이 목표입니다.들어가며 — 왜 이 개념들이 헷갈릴까?관련 글들을 보다 보면 흔히 다음과 같은 설명을 접합니다.SPA의 대표 사례 → React, Vue → 보통 CSRMPA의 대표 사례 → JSP, PHP → 보통 SSR직관적으로는 맞는 말처럼 보이지만,이 설명은 기준이 서로 다른 개념들을 한 줄로 묶어버린 것에 가깝습니다.실제로는,JSP로도 SPA처럼 동작하는 구조를 만들 수 있고React 역시 실행 환경에 따라 CSR, SSR 모두 가능합니다혼란..