Mong dev blog

전체 글235

유의미한 성능 개선은 어디에서 시작할까? Hot Path 이해하기
0. 들어가며…성능을 개선하기 위해 코드를 살펴보다 보면, 코드 곳곳의 작은 비효율이 눈에 들어온다.불필요한 반복을 조기에 종료하거나, 중복 계산을 제거하거나, 서로 독립적인 비동기 작업을 병렬로 처리하는 등의 개선 방법을 떠올릴 수 있다.하지만 코드 수준에서 개선할 수 있다고 해서, 유의미한 성능 개선이라고 볼 수 있을까?코드 수준의 최적화도 필요하지만, 코드의 형태만으로 개선 가치를 판단해서는 안 된다.지난달부터 ESLint의 내부 구조를 살펴보던 중, 이와 비슷한 고민을 한 적이 있다.계기가 된 것은 ESLint 규칙에서 map()과 filter()를 연속으로 사용해 두 개의 중간 배열을 생성하는 로직이었다.당시에는 해당 코드만 보고, 두 메서드를 하나의 every()로 합치면 불필요한 중간 배열과..
2026. 8. 11.
내 서비스의 호환성을 지키는 방법? Browserslist, Babel, Polyfill, target 도구 사용하기
1. 브라우저 호환성이 중요한 이유프론트엔드 코드는 사용자의 브라우저에서 실행된다.그리고 모든 사용자의 브라우저 종류와 버전, 업데이트 상태는 각기 다르다.그렇다보니 개발자의 의도와 다르게,사용자 브라우저 환경에 따라 서비스가 작동하지 않을 수 있다.예를 들어 다음 코드를 살펴보자:const lastUserName = users.at(-1)?.name ?? "Unknown";최신 브라우저에서는 자연스러운 코드지만, 지원 범위를 넓혀 보면 두 가지 문제가 있다.?.와 ??는 브라우저가 문법 자체를 이해하지 못할 수 있다.Array.prototype.at()은 문법적으로 해석되더라도 브라우저에 해당 메서드가 없을 수 있다.전자는 코드가 실행되기 전에 문제를 일으키고, 후자는 실행 중에 오류를 일으킨다.어느 ..
2026. 7. 18.
dependencies, devDependencies, peerDependencies는 번들 결과를 결정하지 않는다
0. 들어가며…package.json에는 프로젝트 이름, 버전, 실행 스크립트, 빌드 설정 등 다양한 정보가 담겨 있다.그중 dependencies, devDependencies, peerDependencies는 프로젝트가 사용하는 의존성을 설명하는 항목이다.처음에는 이 항목들을 단순히 “설치된 라이브러리를 관리하는 곳” 정도로 이해하기 쉽다.하지만 실제로 패키지를 설치하거나, 애플리케이션이 아닌 라이브러리를 만들다 보면 이런 질문이 생긴다.이 패키지는 dependencies에 넣어야 할까?devDependencies에 넣어야 할까?peerDependencies에 넣어야 할까?특히 라이브러리를 만들 때는 단순히 “설치했으니까 dependencies에 넣는다”로 끝나지 않는다.이 패키지가 실행 시 필요한지..
2026. 6. 9.
[React] Google Translate가 바꾼 DOM, 왜 insertBefore에서 실패했을까?
0. 들어가며…브라우저의 Google Translate 기능을 켠 상태에서 Button을 클릭했더니, 예상하지 못한 React DOM 오류가 발생했다.문제가 된 Button은 클릭 시 로딩 상태를 보여주는 컴포넌트였다.기본 상태에서는 Upload File 텍스트를 보여주고,클릭하면 isPending 상태가 true로 바뀌면서 로딩 스피너와 Loading... 텍스트를 보여준다.{isPending && }{isPending ? "Loading..." : "Upload File"}일반적인 상황에서는 문제가 없었다.하지만 Chrome의 Google Translate 기능을 켠 상태에서 이 Button을 클릭하면, 화면 crash가 발생했다.NotFoundError: Failed to execute 'inser..
2026. 5. 31.
컴포넌트 프리뷰는 어떻게 실행될까? iframe으로 만들어본 프리뷰 런타임
0. 들어가며디자인 시스템이나 공통 UI를 작업하다 보면 자연스럽게 컴포넌트 문서를 만들게 된다.처음에는 컴포넌트 이름, 사용 예시, props 목록 정도만 정리해도 충분해 보인다. CTA하지만 실제로 컴포넌트를 사용하는 입장에서 궁금한 것은 단순히 “어떤 props가 있는가”가 아니다.오히려 더 자주 확인하고 싶은 것은 그 값을 바꿨을 때 실제 화면에서 어떻게 동작하는가이다.variant를 바꾸면 실제로 어떻게 보이는지disabled 상태에서는 어떤 인터랙션이 막히는지children이 길어졌을 때 레이아웃이 어떻게 변하는지모바일 너비에서는 어떻게 보이는지클릭했을 때 이벤트가 제대로 발생하는지즉, 컴포넌트 문서는 단순히 읽는 정보에 머물면 부족하다.컴포넌트는 결국 화면에서 동작하는 UI이기에, 문서 역..
2026. 5. 5.
SVG 아이콘 시스템 설계: Runtime에서 Build Time으로 전환하기
0. 들어가며처음에 아이콘 시스템을 설계할 때 “화면에 아이콘이 잘 나타나면 되지 않을까?”라고 생각할 수 있다.하지만 실제 서비스에서 아이콘은 생각보다 더 많은 요구사항을 만족해야 한다.색상, 크기, 상태를 자유롭게 제어할 수 있어야 한다.다크 모드나 테마에 따라 스타일이 바꿀 수 있어야 한다.hover, active, disabled 상태를 반영할 수 있어야 한다.번들 크기는 최대한 작게 유지할 수 있어야 한다.문제는 이 요구사항들이 서로 잘 충돌한다는 점이다.스타일 제어를 잘 하려면 SVG를 코드처럼 다뤄야 하고, 반대로 번들 크기를 줄이려면 정적인 리소스처럼 다루는 게 유리하다. 즉, 아이콘 시스템을 설계할 때의 핵심 질문은 단순히 ‘아이콘을 어떻게 렌더링할 것인가?’가 아니다.실제로 이 질문에 ..
2026. 3. 31.
[Webpack] 웹팩 런타임의 정체 — 브라우저에 모듈 시스템을 심는다고?
0. 들어가며…지난 시간에는 웹팩이 여러 파일을 어떻게 청크(Chunk) 단위로 분리하는지 살펴봤다.청크 분리는 빌드 타임(Build Time) 에 일어나며, 크게 세 단계로 요약할 수 있다.단계설명1. ModuleGraph 생성import / require 관계를 분석하여 의존성 그래프를 만든다.2. ChunkGraph 생성어떤 모듈을 어떤 청크로 묶을지 결정한다.3. 최종 산출물 생성설정(splitChunks, runtimeChunk)에 따라 여러 JS 파일이 생성된다.결과는 이런 형태다.dist/ ├─ main.js ├─ runtime.js (설정에 따라 분리) └─ dynamic.[hash].js여기까지는 빌드 타임 이야기였다. 🤔 그런데 여기서 의문 하나!이렇게 나눠진 청크는 브라우저에서 ..
2026. 2. 27.
[Webpack] 번들링의 원리: 수천 개의 모듈은 어떻게 묶을까?
0. 들어가며: 왜 파일을 그냥 올리면 안 될까?프로젝트를 시작하면 우리는 자연스럽게 webpack이나 vite 같은 빌드 도구를 설정한다.너무 당연하게 쓰다 보니, 막상 누군가 근본적인 질문을 던지면 대답이 애매해질 때가 있다.“왜 파일을 그냥 올리면 안 되고, webpack을 써서 ‘번들링’을 거쳐야 하나요?”이번 시간에는 webpack의 수 많은 기능 중에서도 ‘번들링(Bundling)’을 코드와 함께 살펴보겠다.이 글을 읽고나서 webpack의 번들링이 “왜 필요하고” → “내부에서 어떻게 작동하며” → “번들링 결과물의 형태를 이해”할 수 있을 것이다.💡 핵심 요약1. webpack은 브라우저가 모르는 모듈 시스템(import/require)을 이해시켜준다.2. webpack은 의존성 그래프를..
2026. 2. 1.
이미지 리스트 성능 문제는 DOM에서 끝나지 않는다
0. 들어가며…vue, react를 이용해 dom을 렌더링하는 게 자연스러워진 요즘.각 프레임워크에서 리스트를 표현할 때는 Vue에서는 v-for, React에서는 map을 사용해 여러 DOM 요소를 렌더링한다.이 방식은 단순하다. 그래서 데이터 배열만 있으면 누구나 손쉽게 리스트 UI를 만들 수 있다.하지만 이 단순한 방식이 언제나 좋은 선택은 아니다.DOM을 계속 늘려도 괜찮을까?만약 다음 조건이라면 큰 문제는 없다.데이터 개수가 100개 미만이고노출되는 리스트 DOM이 많지 않으며한 화면에서 무거운 연산을 하지 않는 경우이런 상황에서는 단순 렌더링 방식이 성능 리스크로 이어질 가능성은 크지 않다.하지만 리스트 DOM이 100개를 넘어 1,000개, 혹은 그 이상까지 늘어날 수 있는 구조라면?이 시점..
2026. 1. 13.

티스토리툴바