자바스크립트로 만든 유한 상태 기계 XState
XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.
#XState#FSM
35005분
필터 1
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
Next.js v9 기반 레거시 프로젝트를 v12로 마이그레이션하고, SWC와 import 최적화로 성능을 개선했습니다. 또한 Moment.js를 Day.js로 교체하며 번들 크기를 줄이고 리팩터링 안정성을 높였습니다.
#Next.js#React
21005분
React 이벤트와 브라우저 이벤트
React 합성 이벤트와 브라우저 DOM 이벤트의 전파 차이로 Swiper 내부 버튼 클릭이 의도와 다르게 동작하는 사례를 다뤘습니다. 해결책으로 이벤트 부착 위치를 조정해 상위 래퍼에 클릭을 맡기는 방식을 제안했습니다.
#React#event
10005분
새로운 컬리몰 NX를 소개합니다.
컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.
#Next.js#React
38005분
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.
#React#TypeScript
23005분
MSW를 활용하는 Front-End 통합테스트
MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.
#MSW#통합테스트
32005분