Mong dev blog

전체 글215

[React] onBlur/onFocus가 버블링되는 이유와 PrimeReact 메뉴 버그 해결기

1. 들어가며React는 네이티브 이벤트가 아닌 자체적으로 SyntheticEvent(합성 이벤트) 시스템을 사용한다.이 시스템은 브라우저 간 이벤트 차이를 추상화해 일관된 동작을 제공하지만,그 특성상 네이티브 환경에서는 버블링되지 않는 blur 이벤트가 버블링되어 문제가 생길 수 있다.실제로 최근 PrimeReact UI 라이브러리에서 이와 관련된 문제(issue#7924)를 경험했다.문제가 발생했던 구조는 "메뉴 컴포넌트 내부에서 삭제(x) 버튼을 가진 Chip 컴포넌트가 있는 구조"이다. 의도한대로라면 (x) 버튼을 클릭했을 때, 해당 Chip 컴포넌트가 삭제되어야 한다.하지만 왜인지 삭제 버튼(x)을 여러 번 클릭해야만 삭제 이벤트가 발생하는 버그가 발생했다...! 이 문제의 원인을 추적해보니..

[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 하면 좋은 점..

[Vue3] slot 테스트 코드 작성시 알아야 할 4가지 포인트(with. vue/test-utils)

0. 들어가며Vue에서는 slot 기능을 사용해 컴포넌트에 콘텐츠를 주입할 수 있다.이 기능은 재사용성이 높은 컴포넌트를 만드는 데 매우 유용하며, 하나의 컴포넌트 내에서 여러 형태의 콘텐츠를 유연하게 표현할 수 있다.특히, 버튼, 카드, 모달 창 등 다양한 UI 컴포넌트에 slot을 적용하면, 외부에서 원하는 콘텐츠를 자유롭게 주입할 수 있어 확장성과 커스터마이징에 큰 도움이 된다.한 예로, slot을 사용한 컴포넌트의 예시를 살펴보자: Slot 사용 예시 기본 콘텐츠 이 컴포넌트는 부모에서 slot을 통해 전달한 콘텐츠를 렌더링한다.부모 컴포넌트에서는 아래와 같이 사용할 수 있다: 여기에 사용자가 원하는 콘텐츠를 주입합니..

[JS] Delete vs Backspace: 키 이벤트 처리 시 주의사항 (with. OTP 입력기)

1. 들어가며OTP 입력창은 인증번호를 입력할 때 가장 흔히 마주하는 UI다. 각 칸에 한 글자씩 입력되도록 설계되어 있어, 사용자는 키보드로 빠르게 인증을 완료할 수 있다.[ apple의 OTP 입력창 동작 예시 ]그러나 이 단순해 보이는 UI를 구현할 때 간과하기 쉬운 부분이 있다. 바로 Delete 키의 처리이다. 대게 입력을 지울 때 Backspace 키를 떠올리지만, Delete 키도 입력 삭제에 사용되므로, Delete 키가 작동하지 않으면 해당 키를 사용하는 사용자는 “버튼이 먹지 않는다”는 의문을 가질 수 있다.그럼, OTP 입력 UI에서 Delete 키를 어떻게 구현해야 할까? 단순히 input 이벤트만으로 처리하면 될까?input 이벤트만으로는 부족하다!OTP 입력창에서는 값이 변경되었..

CSS interpolate-size 기반 아코디언, JS보다 빠를까? 실측 성능 테스트

1. 들어가며아코디언 애니메이션을 구현할 때 JavaScript와 CSS 중 어떤 방식이 더 적합할까?2024년 말에 CSS에 interpolate-size라는 새로운 실험 속성이 추가되었다.이 속성은 height나 width 같은 레이아웃 속성의 애니메이션을 보다 자연스럽게 처리할 수 있도록 도와준다고 한다.그럼 JS 방식과 비교했을 때 성능적으로 어떤 장점이 있을까?JS 기반 아코디언은 scrollHeight를 계산해 max-height를 동적으로 변경하는 방식으로 동작한다.반면, interpolate-size를 사용하면 스크립트 연산 없이 애니메이션을 적용할 수 있다.이론적으로 CSS 방식이 더 성능이 좋아야 하지만, 실제 성능 테스트 데이터를 확보해 확인해보고 싶었다.그러나 수동 테스트만으로는 정..

[vue/test-utils] document 접근 에러 해결 방법(with. attachTo 등)

- 에러 발생 환경: vue3, vue/test-utils, jest- 에러 상황: 직접 DOM 접근 시 요소가 없다는 에러 발생 Vue 컴포넌트를 테스트할 때 DOM에 직접 접근하는 경우가 있다. Vue는 보통 ref로 DOM에 접근할 수 있으나, document.querySelector나 document.getElementById 도 사용이 가능하다.이런 경우 Jest와 vue/test-utils 환경에서는 컴포넌트가 jsdom의 가상 DOM에만 렌더링되므로 실제 document.body에 요소가 없어서 에러가 발생한다. 이번 시간에는 에러 발생 원인과 attachTo 옵션을 비롯한 추가 해결 방법을 간단히 살펴보고자 한다.1. DOM 접근 에러의 근본 원인(1) jsdom 환경과 Virtual D..

Vue 3 <script setup> 선언 순서를 자동 정렬하는 ESLint 룰 개발기

0. 들어가며…Vue 3의 은 컴포넌트 코드를 간결하게 만들어주고, 보일러플레이트 코드를 크게 줄여주었다. 하지만 개발자마다 선언 순서를 달리할 수 있어, 코드의 일관성이 떨어지고 가독성이 저하되는 문제가 발생했다. 특히 여러 선언이 섞여 있는 경우, 이 현상이 두드러졌다.또한 코드리뷰에서 이 순서와 선언을 그룹으로 모으는 코멘트가 있었다. 그렇다 보니 코드리뷰에서 기술적인 논의보다는 포매팅 체크가 다수일 때가 있었다.팀이 기술적인 코드 리뷰에 집중하도록 선언 순서를 정렬해주는 기능이 필요했다. 하지만 ESLint 룰 중에 의 내부 선언 순서를 조정해주는 룰을 찾기 어려웠다.예전에 ESLint 룰을 만들었던 경험을 살려, 내부에서 선언 순서를 자동 정렬해주는 룰을 만들게 되었다.이번 시간 이 커스텀 룰..

에셋 이미지의 동적 로드와 빌드 최적화

0. 들어가며…웹 애플리케이션을 개발하다 보면 아이콘, 폰트 등 다양한 에셋(assets)을 다루게 된다.에셋은 정적 파일로 관리할 수도 있지만, 때로는 동적으로 로드(import) 해야 하는 경우가 있다.예를 들어, 사용자의 행동에 따라 필요한 이미지를 지연 로딩하거나, 특정 조건에 맞춰 서로 다른 이미지를 선택적으로 로드할 때 동적 import 방식을 활용하곤 한다.하지만 동적 import를 사용하면 정적 import보다 빌드 크기가 커지는 문제가 발생한다.즉, 실제로 사용되지 않는 이미지까지 번들에 포함되어 최종 빌드 파일의 용량이 불필요하게 늘어나는 것이다.이번 시간에서는 왜 이런 현상이 발생하는지, 그리고 번들 크기를 최적화할 수 있는 방법에 대해 살펴보겠다.목차0. 들어가며1. 에셋 동적 로드..

Base64 인코딩과 Path 방식의 장단점 및 성능 비교(feat.에셋 로드 방식)

0. 들어가며…사이트를 보다 보면, 이미지가 파일 경로(URL)로 삽입되어 있는 경우와 Base64 형식으로 인코딩된 경우를 종종 볼 수 있다.path 방식으로 이미지가 로드된 경우base64 방식으로 이미지가 로드된 경우 개발시 실제로 이미지를 base64로 삽입하거나 서버에 저장된 이미지를 삽입하는 경우도 있다.하지만 프로젝트에 저장된 에셋이 빌드 설정에 따라 base64 혹은 파일 경로(path)방식으로 빌드되기도 한다.이처럼 에셋을 인라인으로 처리하는 설정은 Vite나 Webpack과 같은 빌드 도구가 제공하는 옵션에 의해 제어되는데,Webpack의 limit 옵션이나 Vite의 assetsInlineLimit 옵션이 그 대표적인 예이다.// vite.config.jsimport { defineC..

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

티스토리툴바