Mong dev blog

개발 기술/개발 이야기78

내 서비스의 호환성을 지키는 방법? Browserslist, Babel, Polyfill, target 도구 사용하기
1. 브라우저 호환성이 중요한 이유프론트엔드 코드는 사용자의 브라우저에서 실행된다.그리고 모든 사용자의 브라우저 종류와 버전, 업데이트 상태는 각기 다르다.그렇다보니 개발자의 의도와 다르게,사용자 브라우저 환경에 따라 서비스가 작동하지 않을 수 있다.예를 들어 다음 코드를 살펴보자:const lastUserName = users.at(-1)?.name ?? "Unknown";최신 브라우저에서는 자연스러운 코드지만, 지원 범위를 넓혀 보면 두 가지 문제가 있다.?.와 ??는 브라우저가 문법 자체를 이해하지 못할 수 있다.Array.prototype.at()은 문법적으로 해석되더라도 브라우저에 해당 메서드가 없을 수 있다.전자는 코드가 실행되기 전에 문제를 일으키고, 후자는 실행 중에 오류를 일으킨다.어느 ..
2026. 7. 18.
컴포넌트 프리뷰는 어떻게 실행될까? 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.
[TS × 클린 아키텍처] 2편 — 타입스크립트 한계와 Mapper: AST로 타입 검증하기
0. 들어가며…최근에 클린 아키텍처를 적용하면서, data → domain 변환을 담당하는 Mapper 클래스를 만들었다.이 과정에서 타입스크립트(TypeScript)를 적극적으로 활용해 타입 안정성을 확보했지만, 하나의 큰 벽에 부딪혔다.타입스크립트의 타입은 런타임에 존재하지 않는다는 것!즉, 코드 상에서는 안전해 보이지만, 실제 실행 환경(JS 런타임)에서는 그 모든 타입 정보가 사라진다.결국 API나 외부 모듈에서 잘못된 타입의 데이터가 들어오더라도 이를 검증할 방법이 없었다.1편에서는 검증을 위해, Zod 처럼 스키마 기반의 타입 검증기를 만들었으나 다음과 같은 3가지 문제가 있었다.문제설명성능매번 스키마를 해석하며 검증함 → 반복 비용 발생안전성타입 정의와 스키마가 불일치할 수 있음DX(개발 경..
2025. 10. 12.
[TS × 클린 아키텍처] 1편 — 타입스크립트 한계와 Mapper: 스키마로 런타임 검증하기
0. 들어가며이번에 회사에서 새 레포지토리를 구성하면서 가장 먼저 고민한 것은 도메인 계층과 UI 계층을 어떻게 분리할 것인가였다. 기존에는 UI 코드 안에 모든 비즈니스 로직이 섞여 있었고, API 응답 객체를 그대로 사용하는 방식이었다. 하지만 이 방법은 다음과 같은 두 가지 문제를 만들었다.문제 1. API 응답 객체를 그대로 사용 → MER_UUID, USR_NM 같은 축약 필드명이 코드 전반에 퍼져 가독성이 떨어졌고, 백엔드 필드명이 변경되면 프론트엔드 전체를 수정해야 했다.문제 2. UI와 비즈니스 로직이 뒤섞임 → Vue/React 컴포넌트 파일 안에 UI 코드와 비즈니스 플로우가 함께 들어있어, 코드 변경 시 UI까지 영향을 받는 경우가 많았고 책임 분리가 어려웠다.클린 아키텍처는 “의..
2025. 9. 28.
Tailwind 없이, PostCSS+PurgeCSS로 유틸리티 클래스 구축하기
0. 들어가며…올해 사이드 프로젝트를 진행하며 자연스럽게 TailwindCSS의 유틸리티 클래스 방식을 자주 접하게 되었다.Tailwind를 쓰면서 특히 마음에 들었던 점은, 마진(margin)이나 패딩(padding)처럼 반복되는 스타일을 단일 클래스 호출만으로 해결할 수 있다는 점이었다.덕분에 각 .tsx 파일 안에서 바로 스타일을 정의·수정할 수 있었고, 코드베이스가 한결 깔끔해졌으며 유지보수도 쉬워졌다.그래서 다른 프로젝트에도 TailwindCSS를 적용하면 어떨지 고민했으나, 해당 프로젝트와 전역 CSS와 비교해 보니, Tailwind가 제공하는 방대한 클래스 중 일부만 사용할 수 있었다.게다가 기존 전역 CSS를 전부 Tailwind 방식으로 바꾸려면 작업 규모 대비 리스크가 컸다. 그럼, 어..
2025. 5. 26.
[CSS] SPA에서 Global과 Split CSS, 두 장점을 모두 살리는 방법
1. 들어가며...(1) 전역 CSS은 언제 편할까?현재 회사에서 작업 중인 Vue 프로젝트는 main.js 에서 전역 CSS를 한꺼번에 import 하고 있다.import { createApp } from 'vue';import App from './App.vue';import router from './router';import './assets/base.css';import './assets/front.css';import './assets/layout.css';import './assets/reset.css';import './assets/setting-market.css';createApp(App).use(router).mount('#app'); 이렇게 CSS를 전역을 import 하면 좋은 점..
2025. 4. 27.
Vue 3 <script setup> 선언 순서를 자동 정렬하는 ESLint 룰 개발기
0. 들어가며…Vue 3의 은 컴포넌트 코드를 간결하게 만들어주고, 보일러플레이트 코드를 크게 줄여주었다. 하지만 개발자마다 선언 순서를 달리할 수 있어, 코드의 일관성이 떨어지고 가독성이 저하되는 문제가 발생했다. 특히 여러 선언이 섞여 있는 경우, 이 현상이 두드러졌다.또한 코드리뷰에서 이 순서와 선언을 그룹으로 모으는 코멘트가 있었다. 그렇다 보니 코드리뷰에서 기술적인 논의보다는 포매팅 체크가 다수일 때가 있었다.팀이 기술적인 코드 리뷰에 집중하도록 선언 순서를 정렬해주는 기능이 필요했다. 하지만 ESLint 룰 중에 의 내부 선언 순서를 조정해주는 룰을 찾기 어려웠다.예전에 ESLint 룰을 만들었던 경험을 살려, 내부에서 선언 순서를 자동 정렬해주는 룰을 만들게 되었다.이번 시간 이 커스텀 룰..
2025. 2. 28.
테스트 코드를 관리하는 법 2: 커버리지 감소 검사하기
0. 들어가며…지난 시간에는 테스트 코드를 관리하는 방법 중 하나로, “pre-push 단계에서 테스트 실패를 체크하는 방법”을 알아보았다. 이 방법의 경우, 코드 수정시 발생하는 오류를 테스트 검증으로 막을 수 있었다.하지만 서비스는 끊임없이 변화하고 개선된다. 이 상황에서 추가 기능의 테스트 코드가 작성되지 않는다면, 리뷰 단계에서 놓치기 쉽다. 그렇다면, 기존 소스 코드에 기능을 추가할 때 테스트 코드 를 어떻게 관리할 수 있을까?그 해답은 develop(베이스 브랜치)을 기준으로 수정한 파일에 한해 커버리지를 비교하는 방법이다.이 방법을 사용하면 기능을 추가한 뒤 해당 파일의 커버리지가 감소한 경우 PR 코멘트로 알려주고, 병합을 막을 수 있다.이번 글에서는 “테스트 코드를 관리하는 법” 시리즈의..
2025. 1. 24.

티스토리툴바