Jest 활용 경험: 테스팅에 대한 고민과 통찰
Jest를 선택한 배경과 실제 활용 경험을 바탕으로 테스트 작성과 구조화 방법을 정리했습니다. 코드 품질 향상 효과와 함께 일부 성능 이슈도 함께 살펴보았습니다.
#Jest#test
2800
프론트엔드 기술 블로그 최신 글
필터 0
React Query 도입 후기
런칭 이후 리팩토링 과정에서 React Query를 도입한 경험을 소개했습니다. 데이터 로딩, 캐싱, 서버 상태 동기화 작업을 더 쉽게 다루는 관점이 핵심입니다.
#React#cache
2800
웹 개발자의 데이터 애플리케이션 flow 효율화하기
Dash를 도입해 데이터 조회, 가공, 렌더링을 역할별로 분리하고 연결하는 구조를 만들었습니다. 또한 Mixin과 압축을 활용해 유지보수성과 데이터 전송 효율을 개선했습니다.
#Dash#Python
1600
리액트 상태관리 트렌드의 변화
리액트 상태관리의 흐름을 MVC부터 Redux, Context API, React Query, Jotai까지 정리했습니다. 또한 서버 상태와 클라이언트 상태를 분리해 쓰는 현재의 실전 관점과 주의할 점도 짚었습니다.
#React#상태관리
2700
사파리, 모바일 환경에서의 트러블슈팅
Safari와 iOS에서 발생하는 스크롤, 레이어, 터치 이벤트 차이를 사례별로 분석했습니다. 브라우저 식별보다 실제 동작 조건을 기준으로 보정하는 방법을 제안합니다.
#Safari#iOS
200
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 QueryClient·QueryCache·Query·QueryObserver 내부 역할을 살펴봤습니다. useQuery가 useSyncExternalStore로 상태 변경을 구독하고 뷰를 갱신하는 흐름을 설명합니다.
#React Query#React
100
사파리, 모바일 환경에서의 트러블슈팅
사파리, 모바일 환경에서의 트러블슈팅
사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.
#Safari#mobile
4700
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
#React Query#useQuery
5200
Storybook의 MSW mock 구조 개선
Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.
#Storybook#MSW
2500
스토리북 함께 사용해보기
스토리북을 함께 사용해보며 활용 경험을 소개했습니다. 스토리북의 매력을 짧게 짚어보는 내용입니다.
#Storybook
1700
Google은 Lighthouse를 사용하지 않는다
Lighthouse와 실제 필드 데이터의 차이를 짚고, CrUX API로 구글의 실측 성능 데이터를 대시보드에 반영하는 방법을 소개했습니다. 성능 평가는 실험실 지표만 보지 말고 실제 사용자 데이터도 함께 확인해야 합니다.
#GCP#API
1800
앱 내 이벤트 로그 QA 시스템 자체 개발기
앱 내 이벤트 로그를 배포 환경과 관계없이 확인할 수 있도록 QA 시스템을 자체 개발한 사례입니다. 로그 검증 절차를 단순화하고 운영 편의를 높이기 위한 접근을 다뤘습니다.
#logging#QA
1900
사운드 리소스 전달 WebApp 만들기
사운드 리소스 전달용 WebApp Sonic을 단순한 설계 원칙으로 구현한 사례를 소개했습니다. Next.js, S3, git을 조합해 버전 관리와 동기화를 처리하고 복잡한 기능은 최소화했습니다.
#Next.js#AWS
2400
Code generator 개발기 (Part 2)
OpenAPI 명세에서 React Query hook, 타입, type guard, schema validator를 생성하는 구조를 소개했습니다. 옵션 기반 확장성과 실제 응답 검증을 위해 IoC, JSON Schema, Ajv를 활용했습니다.
#TypeScript#React
000