Mong dev blog

개발 기술195

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달이 지났을 때, 전반적인 테스트 코드를 구동시킨 결과 몇 가지 문제점이 드러났다:리팩토링 및 버그 수정으로 인해 이미 삭제된 함수나 변수를 검증하려다 발생하는 오류.새로운 기능이 추가되었지만 테스트 코드 상 오류가 없어 검증되지 못한 케이스의 증가. 물론, 테스트 코드를 잘 작성하고 목표한 테스트 커버리지에 도달하는 건 중요하다. 하지만, 장기적인 관점에서 “테스트 코드의 관리”도 중요하다는 걸 깨달았다.그렇다고 매번 테스트 코드를 수동으로 확인한다..

[JS] 내장 프로토타입에 커스텀 함수를 등록하면 안되는 이유

1. 들어가며…여러 프로젝트 레포지토리를 살펴보다 보면, 드물게 보이는 코드 중 하나는 프로토타입을 이용해 전역 커스텀 함수를 선언하는 경우이다.예를 들어, 다음과 같이 Array.prototype에 사용자 정의 메서드를 추가하는 코드를 볼 수 있다:Array.prototype.myMethod = function() { console.log('This is my custom method');};이러한 방식으로 프로토타입에 커스텀 함수를 등록하는 데에는 몇 가지 장점이 있다.첫째, 편리성인데 프로토타입에 메서드를 추가하면 모든 배열 인스턴스에서 해당 메서드를 사용할 수 있어, 개별적으로 함수를 정의할 필요가 없다.둘째, 코드의 재사용성이 향상된다. 동일한 기능을 여러 곳에서 반복하지 않고, 프로토타입을 ..

[React] 반응형 데이터 연속 연산시 주의할 점(feat. Vue, React의 차이)

1. 들어가며…얼마 전 PrimeReact의 TreeTable 컴포넌트에서 발생한 버그를 수정할 일이 있었다.(버그 설명: filter 함수를 연속 호출시 마지막 filter만 적용됨) 해당 라이브러리의 은 데이터를 필터링할 수 있도록 filter() 메서드를 제공한다.이를 이용하면, ref를 사용해 테이블 데이터를 필터링할 수 있다.예를 들어 아래와 같은 코드가 있다고 가정해보자:// template 영역Apply Filters // script 영역const treeTableEl = useRef();// treeTableEl.current.filter()를 사용해 필터링 가능const applyDoubleFilter = () => { treeTableEl.current.filter(..

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

티스토리툴바