Mong dev blog

개발 기술/개발 이야기69

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

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

아이콘 컴포넌트 렌더링 방식, 정말 좋을까? (with. 빌드 시간, FID, TBT 등 비교)

1. 들어가며…프론트엔드에서 Vue나 React와 같은 Virtual DOM 프레임워크의 사용이 활발하다.그리고 이러한 프레임워크들은 페이지마다 반복 작성했던 코드를 재사용 컴포넌트로 분리할 수 있다.그래서, 아토믹 단위로 요소를 관리하기 쉬워졌다.재사용 가능한 요소인 헤더, 네비게이션, 아코디언, 그리고 비즈니스 로직에서 반복되는 UI 등을 컴포넌트로 분리할 수 있다.물론, SVG 아이콘도 별도의 컴포넌트로 관리할 수 있다. ❓ 그런데, 과연 SVG 아이콘 파일을 컴포넌트로 만들어야 할 필요가 있을까?소규모 프로젝트에서는 그 필요성을 느끼지 못할 수도 있다. 하지만 실제 서비스되는 대규모 프로젝트에서는 아이콘을 컴포넌트화할 필요가 있다.그 이유는 크게 두 가지인데…첫째, 색상만 다른 아이콘 파일이 여러..

[JS/CSS] corner smoothing을 구현하는 법(feat. 부드러운 둥근 모서리)

1. 들어가기 전에…우리는 iOS 디바이스에서 표현되는 요소가 부드럽다는 느낌을 받는다. 특히 둥근 모서리를 가진 요소는 더욱 부드럽게 보인다. 물론 iOS의 소프트웨어나 디스플레이가 우수한 이유도 있지만, 모서리를 부드럽게 표현하는 기능이 적용되어 있기 때문이다…!Swift의 경우, IOS 구현시 코너를 부드럽게 하는 옵션(.continuous)을 제공한다.그래서 RoundedRectangle에 style을 “.continuous”로 지정하면 부드러운 모서리가 적용된다.RoundedRectangle(cornerRadius: 100, style: .continuous).fill(-pink).frame(width: 200, height: 150)물론 Swift를 쓰지 않아도 Figma에서 부드러운 모서리를..

이미지, 배경이미지의 지연 로드 구현 방법(with. Vue)

1. 들어가기 전에…이미지 지연 로드(LazyLoad)는 웹 페이지가 로드될 때 모든 이미지를 다운로드하지 않고, 사용자가 이미지를 필요로 할 때(예: 스크롤하여 이미지가 보이는 영역에 도달했을 때) 이미지를 로드하는 기술이다.이 기술을 사용하면, 초기 페이지 로딩 시간을 줄이고 네트워크 트래픽을 최적화해 사용자 경험을 개선할 수 있다.이번 시간에는 “이미지, 배경이미지의 지연 로드 구현 방법” 시리즈의 두 번째로,Vue의 커스텀 디렉티브로 지연로드를 구현하는 방법을 알아보았다.시리즈 순서(1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)👉 (2-1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. Vue)(2-2) 이미지, 배경이미지의..

이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)

1. 들어가기에 앞서각 서비스에는 랜딩 페이지가 존재하며, 랜딩 페이지들은 대개 고화질의 이미지를 사용한다.사용자가 페이지에 처음 방문했을 때, 페이지의 처음부터 끝까지 스크롤할 수 있지만, 일부는 첫 화면만 보고 다른 탭으로 이동하기도 한다. 그래서 랜딩 페이지의 모든 고화질 이미지를 한꺼번에 로드한다면, 리소스 낭비가 발생한다.그럼, 어떻게 해야 리소스 낭비를 줄일 수 있을까? 사용자가 접근하지 않은 이미지는 로드하지 않을 수 없을까? 바로 지연 로드 방식을 사용하면 된다! 지연 로드는 사용자가 이미지를 볼 때까지 이미지 로드를 미루는 기법이다. 이 기법을 사용하면 초기 로드 시간을 단축하고, 불필요한 리소스 사용을 줄일 수 있다.이번 시리즈에서는 “(1) JavaScript의 Intersection..

[React] 아이콘 컴포넌트를 선언하는 3가지 방법

1. 들어가며… 많은 서비스에서 아이콘을 사용하고 있다. 그래서 아이콘 관리는 선택이 아닌 필수가 되었다. 아이콘을 선언하는 방식은 여러가지가 있는데, png, jpg로 관리하거나 혹은 hover, active용 아이콘을 따로 관리하는 경우가 있다. 하지만 이 방식은 아이콘이 재사용되는 경우 확장성에 불리하다. 그렇다면 아이콘을 어떻게 선언해야, 확장성을 지키면서 여러가지 상황을 대응할 수 있을까? 이번 시간에는 여러 아이콘 라이브러리를 참고하여, 아이콘을 선언하는 3가지 방법에 대해 알아보았다. 단, 실제 코드를 그대로 보여주기 보다는 간략한 버전으로 보여줄 예정이며, 실제 라이브러리 코드는 링크로 제시할 예정이다. 2. 아이콘을 선언하는 3가지 방법 1) 각각의 컴포넌트를 선언하는 방법 (1) 라이브..

[vscode] 컬러 변수 뷰어 만들기(2) - colorvariabletracker

1. colorvariabletracker 이번 포스팅은 “[vscode] 컬러 변수 뷰어 만들기” 시리즈의 마지막인 “extension 구현하기”이다. 구현한 extension은 colorvariabletracker 로, 현재 확장을 릴리즈한 상태이다. (링크) 컬러 변수 뷰어(colorvariabletracker)는 특정 파일에 선언된 컬러 변수를 추적하는 확장이다. 컬러 변수 뷰어에서 구현한 기능은 6가지이다. 이번 시간에는 이 6가지를 구현한 방법은 간단하게 설명하고자 한다 🙂 기능 방식 추적하고 싶은 파일을 설정할 수 있다. .vscode/settings.json에 파일 경로 지정 선언된 컬러변수를 vscode 사이드바에서 표 형식으로 볼 수 있어야 한다. webview로 구현 검색창에서 컬러 ..

[vscode] 컬러 변수 뷰어 만들기(1) - webview API 사용법

0. 들어가기 전에… 팀에 컬러 시스템이 정착되기 전, 프로젝트에서 전역 컬러 변수를 바꾸거나 추가 및 제거하는 과정이 있었다. 그 당시에는 scss 파일에서 탐색하고 수정하는 게 번거롭다고 느끼지 않았다. 그러다 어느 날 문득, “컴포넌트는 Storybook으로 관리하는데 컬러 변수는 어떻게 관리하지?”라는 생각이 들었다. 컬러 변수도 Storybook 형태로 한 눈에 파악하고 관리할 수는 없을까? 이렇게 이어지다 보니, vscode 사이드바(하단 핑크영역)에서 컬러 변수를 확인하고 검색할 수 있는 extension이 있으면 좋겠다는 생각이 들었다. 그래서 전역 컬러 변수를 보여주고, 복사는 물론 검색까지 되는 extension을 만들어보기로 했다. 이번 포스팅은 시리즈로 작성했는데, 첫 번째는 “[v..

Vue 3.4 변경점 파헤치기

1. Vue 3.4 변경점 파헤치기 23년 12월 29일에 Vue 3.4 버전이 출시되고, 여러 기능이 추가되었다. 이번 시간에는 어떤 기능이 출시되고, 어떤 점이 변경되었는지 ChangeLog.md를 토대로 살펴보았다 🙂 (1) v-bind의 키와 값이 같다면 짧게 JS에서는 키와 값 변수가 같은 경우, 축약할 수 있다. (property shorthand) const age = 12; const person = { name: 'luxxxx', age: age // 축약 전 } const person = { name: 'luxxxx', age // 축약 후 } v3.4에서는 property shorthand 형태로, 값 바인딩(v-bind)을 축약할 수 있다. (공식문서) ..

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

티스토리툴바