Mong dev blog

개발 기술218

유의미한 성능 개선은 어디에서 시작할까? 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.
이미지 리스트 성능 문제는 DOM에서 끝나지 않는다
0. 들어가며…vue, react를 이용해 dom을 렌더링하는 게 자연스러워진 요즘.각 프레임워크에서 리스트를 표현할 때는 Vue에서는 v-for, React에서는 map을 사용해 여러 DOM 요소를 렌더링한다.이 방식은 단순하다. 그래서 데이터 배열만 있으면 누구나 손쉽게 리스트 UI를 만들 수 있다.하지만 이 단순한 방식이 언제나 좋은 선택은 아니다.DOM을 계속 늘려도 괜찮을까?만약 다음 조건이라면 큰 문제는 없다.데이터 개수가 100개 미만이고노출되는 리스트 DOM이 많지 않으며한 화면에서 무거운 연산을 하지 않는 경우이런 상황에서는 단순 렌더링 방식이 성능 리스크로 이어질 가능성은 크지 않다.하지만 리스트 DOM이 100개를 넘어 1,000개, 혹은 그 이상까지 늘어날 수 있는 구조라면?이 시점..
2026. 1. 13.
sourcemap? 운영에서는 그냥 끄는 옵션 아니에요?
0. 들어가며…이거 무슨 에러지?개발을 하다 보면, 다음과 같은 에러를 마주치게 된다.app-abc123.js:1:120Uncaught Error: Something went wrong에러는 분명히 발생했고 콘솔에도 찍혔다. 그런데 이상하다…?에러 메시지를 가만히 들여다보고 있으면 몇 가지 답답함이 밀려온다.어떤 파일에서 발생한 에러인지 감이 안 오고어떤 코드 줄에서 터졌는지도 모르겠고심지어 이게 내가 작성한 코드인지조차 확신이 안 든다에러는 났는데 정작 어디를 봐야 할지 모르는 상태. 이쯤 되면 자연스레 이런 생각이 든다.*"아… 이거 sourcemap 없어서 그런가?"*sourcemap, 들어는 봤는데 설명은 애매한 그 단어sourcemap. 대부분의 개발자가 한 번쯤은 들어봤을 단어다.하지만 막상 ..
2025. 12. 13.
브라우저 렌더링 최적화를 위한 Virtual Scroll - 구현 코드 살펴보기
0. 들어가며1편에서는 Virtual Scroll이 어떤 원리로 렌더링 비용을 줄이는지,그리고 실제 Chrome Performance Trace에서 Layout·Paint·GPU Memory가 얼마나 절감되는지를 살펴보았다.Virtual Scroll은 얼핏 보면 “DOM을 줄이고, translateY로 위치만 바꾸는” 단순한 구조처럼 보인다.하지만 실제로 구현해보면 다음과 같은 고민들이 바로 등장한다.1. 스크롤이 발생할 때 어떤 index부터 렌더링해야 할까?2. 화면에 필요한 DOM pool 크기는 어떻게 계산할까?3. Pool DOM은 어떤 방식으로 위치만 이동시켜 재사용할까?4. 이미지 로딩처럼 아이템 높이가 바뀌면 offset을 어떻게 갱신해야 할까?5. scroll 이벤트가 아주 자주 발생하는..
2025. 11. 16.

티스토리툴바