시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
BackstopJS와 Storybook으로 공통 컴포넌트의 시각적 회귀 테스트를 구축했습니다. Docker와 PR 프리뷰 리포트로 환경 차이와 UI 변경 검토를 관리했습니다.
#BackstopJS#Storybook
100
프론트엔드 기술 블로그 최신 글
필터 0
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
3500
TV APP 디자인할 때 고려해야하는 요소들
스마트TV 앱은 리모컨 조작과 포커스 상태를 전제로 모바일과 다른 기준으로 설계해야 합니다. 색상, 글자 크기, 성능 제약까지 고려해 TV 환경에서 직접 검증하는 과정이 중요합니다.
#UI/UX#모바일
14800
나만의 Jest Matchers 만들기
Jest Custom Matcher로 여러 CSS class 포함 여부를 한 번에 검증하는 방법을 설명했습니다. 설정 파일 등록, 타입 검증, TypeScript 타입 확장 과정을 함께 다뤘습니다.
#Jest#TypeScript
000
나만의 Jest Matchers 만들기
나만의 Jest Matchers 만들기
Jest Custom Matcher를 만들어 반복적인 class 검증 테스트를 줄이는 방법을 소개했습니다. setup 파일 등록과 TypeScript 타입 선언까지 함께 다뤘습니다.
#Jest#test
1400
2022 DevRel Awards: 보물찾기 이벤트개발 후기
2022 DevRel Awards 사전 이벤트로 QR 보물찾기 서비스를 기획하고 개발한 후기입니다. 어뷰징 방지와 한정된 개발 환경에서의 구현 고민을 정리했습니다.
#Spring Boot#JPA
2900
Higher-Order Components는 여전히 유용하다
반복되는 URL 파라미터 검증과 조건부 렌더링을 HOC로 분리한 사례를 소개했습니다. 유효한 값을 props로 주입해 컴포넌트 내부 조건문과 문맥 분산을 줄였습니다.
#React#HOC
100
E2E 테스트 도입 경험기
기획서 기반 시나리오와 실제 API로 E2E 테스트를 도입하고 pre-push 검증에 연결했습니다. Sorry-Cypress 병렬화로 실행 시간을 줄이며 버그와 API 사이드이펙트를 조기 발견했습니다.
#Cypress#E2E 테스트
000
E2E 테스트 도입 경험기
E2E 테스트 도입 경험기
E2E 테스트 도입의 장점과 운영상의 걸림돌을 함께 정리한 경험기였습니다. 기획서 기반 시나리오와 병렬 실행으로 관리성과 속도를 개선한 사례를 공유했습니다.
#E2E 테스트#Cypress
6300
홈 화면에 웹 바로가기를 추가하기(A2HS)
A2HS의 조건과 매니페스트·서비스 워커를 이용한 최소 설정 방식을 설명했습니다. React 커스텀 설치 UI와 iOS Safari의 지원 제약도 함께 다뤘습니다.
#A2HS#PWA
200
홈 화면에 웹 바로가기를 추가하기(A2HS)
홈 화면에 웹 바로가기를 추가하기(A2HS)
웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.
#PWA#Web App Manifest
3400
Streamlit으로 정비소 탐색 지도 만들기
Streamlit으로 정비소 탐색 지도를 만든 사례를 다뤘습니다. 프로토타입용이라는 인식에 대한 질문도 함께 제시했습니다.
#Streamlit#지도
2300
iOS 환경에서 비디오 최적화 및 성능 개선 사례
iOS 환경에서 비디오 최적화 및 성능 개선 사례
iOS 15 이후 비디오 전환 시 발생한 깜박임과 사이즈 튐 문제를 분석하고 해결한 사례입니다. 썸네일, 로딩 상태, object-fit, 버전별 분기를 조정해 자연스러운 전환을 구현했습니다.
#iOS#object-fit
3500
우리는 한다 리팩토링을 - UIKit+RxSwift 에서 SwiftUI+Combine 로의 여정
우리는 한다 리팩토링을 - UIKit+RxSwift 에서 SwiftUI+Combine 로의 여정
UIKit + RxSwift 기반 디자이너앱을 SwiftUI + Combine으로 리팩토링하는 과정을 소개합니다. 기존 구조를 유지하기보다 전면 수정에 가까운 전환 작업을 진행하고 있습니다.
#iOS#SwiftUI
2000