Mong dev blog

전체 글233

dependencies, devDependencies, peerDependencies는 번들 결과를 결정하지 않는다

0. 들어가며…package.json에는 프로젝트 이름, 버전, 실행 스크립트, 빌드 설정 등 다양한 정보가 담겨 있다.그중 dependencies, devDependencies, peerDependencies는 프로젝트가 사용하는 의존성을 설명하는 항목이다.처음에는 이 항목들을 단순히 “설치된 라이브러리를 관리하는 곳” 정도로 이해하기 쉽다.하지만 실제로 패키지를 설치하거나, 애플리케이션이 아닌 라이브러리를 만들다 보면 이런 질문이 생긴다.이 패키지는 dependencies에 넣어야 할까?devDependencies에 넣어야 할까?peerDependencies에 넣어야 할까?특히 라이브러리를 만들 때는 단순히 “설치했으니까 dependencies에 넣는다”로 끝나지 않는다.이 패키지가 실행 시 필요한지..

[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..

컴포넌트 프리뷰는 어떻게 실행될까? iframe으로 만들어본 프리뷰 런타임

0. 들어가며디자인 시스템이나 공통 UI를 작업하다 보면 자연스럽게 컴포넌트 문서를 만들게 된다.처음에는 컴포넌트 이름, 사용 예시, props 목록 정도만 정리해도 충분해 보인다. CTA하지만 실제로 컴포넌트를 사용하는 입장에서 궁금한 것은 단순히 “어떤 props가 있는가”가 아니다.오히려 더 자주 확인하고 싶은 것은 그 값을 바꿨을 때 실제 화면에서 어떻게 동작하는가이다.variant를 바꾸면 실제로 어떻게 보이는지disabled 상태에서는 어떤 인터랙션이 막히는지children이 길어졌을 때 레이아웃이 어떻게 변하는지모바일 너비에서는 어떻게 보이는지클릭했을 때 이벤트가 제대로 발생하는지즉, 컴포넌트 문서는 단순히 읽는 정보에 머물면 부족하다.컴포넌트는 결국 화면에서 동작하는 UI이기에, 문서 역..

SVG 아이콘 시스템 설계: Runtime에서 Build Time으로 전환하기

0. 들어가며처음에 아이콘 시스템을 설계할 때 “화면에 아이콘이 잘 나타나면 되지 않을까?”라고 생각할 수 있다.하지만 실제 서비스에서 아이콘은 생각보다 더 많은 요구사항을 만족해야 한다.색상, 크기, 상태를 자유롭게 제어할 수 있어야 한다.다크 모드나 테마에 따라 스타일이 바꿀 수 있어야 한다.hover, active, disabled 상태를 반영할 수 있어야 한다.번들 크기는 최대한 작게 유지할 수 있어야 한다.문제는 이 요구사항들이 서로 잘 충돌한다는 점이다.스타일 제어를 잘 하려면 SVG를 코드처럼 다뤄야 하고, 반대로 번들 크기를 줄이려면 정적인 리소스처럼 다루는 게 유리하다. 즉, 아이콘 시스템을 설계할 때의 핵심 질문은 단순히 ‘아이콘을 어떻게 렌더링할 것인가?’가 아니다.실제로 이 질문에 ..

[Webpack] 웹팩 런타임의 정체 — 브라우저에 모듈 시스템을 심는다고?

0. 들어가며…지난 시간에는 웹팩이 여러 파일을 어떻게 청크(Chunk) 단위로 분리하는지 살펴봤다.청크 분리는 빌드 타임(Build Time) 에 일어나며, 크게 세 단계로 요약할 수 있다.단계설명1. ModuleGraph 생성import / require 관계를 분석하여 의존성 그래프를 만든다.2. ChunkGraph 생성어떤 모듈을 어떤 청크로 묶을지 결정한다.3. 최종 산출물 생성설정(splitChunks, runtimeChunk)에 따라 여러 JS 파일이 생성된다.결과는 이런 형태다.dist/ ├─ main.js ├─ runtime.js (설정에 따라 분리) └─ dynamic.[hash].js여기까지는 빌드 타임 이야기였다. 🤔 그런데 여기서 의문 하나!이렇게 나눠진 청크는 브라우저에서 ..

[Webpack] 번들링의 원리: 수천 개의 모듈은 어떻게 묶을까?

0. 들어가며: 왜 파일을 그냥 올리면 안 될까?프로젝트를 시작하면 우리는 자연스럽게 webpack이나 vite 같은 빌드 도구를 설정한다.너무 당연하게 쓰다 보니, 막상 누군가 근본적인 질문을 던지면 대답이 애매해질 때가 있다.“왜 파일을 그냥 올리면 안 되고, webpack을 써서 ‘번들링’을 거쳐야 하나요?”이번 시간에는 webpack의 수 많은 기능 중에서도 ‘번들링(Bundling)’을 코드와 함께 살펴보겠다.이 글을 읽고나서 webpack의 번들링이 “왜 필요하고” → “내부에서 어떻게 작동하며” → “번들링 결과물의 형태를 이해”할 수 있을 것이다.💡 핵심 요약1. webpack은 브라우저가 모르는 모듈 시스템(import/require)을 이해시켜준다.2. webpack은 의존성 그래프를..

이미지 리스트 성능 문제는 DOM에서 끝나지 않는다

0. 들어가며…vue, react를 이용해 dom을 렌더링하는 게 자연스러워진 요즘.각 프레임워크에서 리스트를 표현할 때는 Vue에서는 v-for, React에서는 map을 사용해 여러 DOM 요소를 렌더링한다.이 방식은 단순하다. 그래서 데이터 배열만 있으면 누구나 손쉽게 리스트 UI를 만들 수 있다.하지만 이 단순한 방식이 언제나 좋은 선택은 아니다.DOM을 계속 늘려도 괜찮을까?만약 다음 조건이라면 큰 문제는 없다.데이터 개수가 100개 미만이고노출되는 리스트 DOM이 많지 않으며한 화면에서 무거운 연산을 하지 않는 경우이런 상황에서는 단순 렌더링 방식이 성능 리스크로 이어질 가능성은 크지 않다.하지만 리스트 DOM이 100개를 넘어 1,000개, 혹은 그 이상까지 늘어날 수 있는 구조라면?이 시점..

sourcemap? 운영에서는 그냥 끄는 옵션 아니에요?

0. 들어가며…이거 무슨 에러지?개발을 하다 보면, 다음과 같은 에러를 마주치게 된다.app-abc123.js:1:120Uncaught Error: Something went wrong에러는 분명히 발생했고 콘솔에도 찍혔다. 그런데 이상하다…?에러 메시지를 가만히 들여다보고 있으면 몇 가지 답답함이 밀려온다.어떤 파일에서 발생한 에러인지 감이 안 오고어떤 코드 줄에서 터졌는지도 모르겠고심지어 이게 내가 작성한 코드인지조차 확신이 안 든다에러는 났는데 정작 어디를 봐야 할지 모르는 상태. 이쯤 되면 자연스레 이런 생각이 든다.*"아… 이거 sourcemap 없어서 그런가?"*sourcemap, 들어는 봤는데 설명은 애매한 그 단어sourcemap. 대부분의 개발자가 한 번쯤은 들어봤을 단어다.하지만 막상 ..

브라우저 렌더링 최적화를 위한 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 이벤트가 아주 자주 발생하는..

이전 1 2 3 4 ··· 26 다음

티스토리툴바