Mong dev blog

개발 기술197

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

[JS] Array 빌트인 함수는 정말 성능이 나쁠까? (forEach, map 등)

0. 들어가며...코드 리뷰를 진행하던 중 반복문이 forEach로 작성된 예시를 보았고,과거에 읽었던 글에서 오버헤드로 인해 forEach의 성능이 일반적인 for 루프보다 느리다는 내용이 떠올랐다.const fruits = ['apple', 'orange', 'banana'];fruits.forEach((fruit) => ...));그래서 PR에 코멘트를 달기 전에 배열의 크기가 100, 500, 10,000일 때 forEach의 성능을 직접 측정해보았다.그 결과, 배열 크기가 100과 500일 때 forEach의 성능은 크게 나쁘지 않았다. 그러나 배열 크기가 커질수록 forEach의 성능 저하가 뚜렷하게 나타났다.이 결과를 보았을 때 한 가지 의문이 생겼다. 왜 forEach는 오버헤드가 발생하는..

테스트 코드를 관리하는 법 2: 커버리지 감소 검사하기

0. 들어가며…지난 시간에는 테스트 코드를 관리하는 방법 중 하나로, “pre-push 단계에서 테스트 실패를 체크하는 방법”을 알아보았다. 이 방법의 경우, 코드 수정시 발생하는 오류를 테스트 검증으로 막을 수 있었다.하지만 서비스는 끊임없이 변화하고 개선된다. 이 상황에서 추가 기능의 테스트 코드가 작성되지 않는다면, 리뷰 단계에서 놓치기 쉽다. 그렇다면, 기존 소스 코드에 기능을 추가할 때 테스트 코드 를 어떻게 관리할 수 있을까?그 해답은 develop(베이스 브랜치)을 기준으로 수정한 파일에 한해 커버리지를 비교하는 방법이다.이 방법을 사용하면 기능을 추가한 뒤 해당 파일의 커버리지가 감소한 경우 PR 코멘트로 알려주고, 병합을 막을 수 있다.이번 글에서는 “테스트 코드를 관리하는 법” 시리즈의..

[JS] setTimeout: 0ms delay에도 지연이 발생하는 이유

0. 들어가며PrimeReact 라이브러리를 살펴보다가, 에 캘린더를 배치하면 캘린더에서 날짜가 변경되지 않는 문제를 발견했다.그래서 해결을 위해 발생 지점을 찾아보니, 을 구성하는 컴포넌트의 코드가 원인이었다.발생 지점도 찾았겠다, 이제 디버깅만 하면 문제는 거의 다 해결된 것과 다름 없었다.그런데 디버깅을 해보니 문제를 일으키는 코드 근처에 눈에 띄는 코드를 발견했다.바로 setTimeout의 delay를 0으로 설정한 코드였다.처음에는 코드를 잘 못 작성한 건가라는 생각이 들어, 버그의 원인이 setTimeout 부분인 줄 알았다.하지만 버그의 원인은 다른 코드에 있었고, “0ms 동안 지연 후에 로직을 실행한다고? 도대체 이 코드의 의도는 뭐지?” 라는 의문이 들었다.그래서 정보를 찾아보니, 0..

테스트 코드를 관리하는 법 1, Pre-Push 단계에서 테스트 자동화하기

1. 들어가며올해 테스트 코드를 도입하면서 유틸뿐만 아니라 화면 단위의 파일까지도 테스트를 작성하기 시작했다. 처음에는 테스트 작성에 많은 시간이 소요되었지만, 기준이 잡히고 나니 점차 작성 속도가 빨라지는 것을 느꼈다.그러나 테스트 코드를 작성한 지 1~2달이 지났을 때, 전반적인 테스트 코드를 구동시킨 결과 몇 가지 문제점이 드러났다:리팩토링 및 버그 수정으로 인해 이미 삭제된 함수나 변수를 검증하려다 발생하는 오류.새로운 기능이 추가되었지만 테스트 코드 상 오류가 없어 검증되지 못한 케이스의 증가. 물론, 테스트 코드를 잘 작성하고 목표한 테스트 커버리지에 도달하는 건 중요하다. 하지만, 장기적인 관점에서 “테스트 코드의 관리”도 중요하다는 걸 깨달았다.그렇다고 매번 테스트 코드를 수동으로 확인한다..

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

티스토리툴바