React 이벤트와 브라우저 이벤트
React 이벤트와 브라우저 이벤트
React 합성 이벤트와 브라우저 DOM 이벤트의 전파 차이로 Swiper 내부 버튼 클릭이 의도와 다르게 동작하는 사례를 다뤘습니다. 해결책으로 이벤트 부착 위치를 조정해 상위 래퍼에 클릭을 맡기는 방식을 제안했습니다.
#React#event
1500
프론트엔드 기술 블로그 최신 글
필터 0
자바스크립트 지도 엔진에 웹 워커를 적용해봤습니다 - 14편 - 웹 워커, 어디까지 써봤니?
자바스크립트 지도 엔진에 웹 워커를 적용해봤습니다 - 14편 - 웹 워커, 어디까지 써봤니?
TMAP JS를 브라우저 기반 지도 엔진으로 소개하고, WebGL 풀 벡터 방식과 사용자 데이터 추가 지원을 설명했습니다. 또한 성능 개선을 위해 웹 워커를 적용한 개발 맥락을 다뤘습니다.
#JavaScript#Web Worker
3200
새로운 컬리몰 NX를 소개합니다.
고도몰 기반 컬리몰을 Next.js 기반 NX로 전환하며 상품·주문·회원 서비스를 재구축했습니다. SSR, Lint, 빌드 캐시, PR 성능 테스트로 성능과 코드 품질을 개선했습니다.
#Next.js#React
100
새로운 컬리몰 NX를 소개합니다.
컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.
#Next.js#React
4100
shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법
전역 Bulma 스타일과 신규 React 앱의 충돌을 shadow DOM으로 격리했습니다. Emotion 스타일과 Portal 타겟도 shadow root 내부로 옮겨 정상 렌더링을 확보했습니다.
#React#shadow DOM
000
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
React와 TypeScript로 캔버스 기반 바나나 먹기 게임을 구현했습니다. 이미지 로딩, 키보드 이동, 낙하·충돌 판정, 애니메이션 정리 과정을 설명합니다.
#React#TypeScript
200
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.
#React#TypeScript
2800
보쌈 먹으며 프론트엔드와 친해지기
점심시간 공동 영상회로 프론트엔드 지식과 동료 간 공감대를 넓혔습니다. 자율 참여와 스몰 토크를 바탕으로 학습 문화를 꾸준히 이어갔습니다.
#FEConf#module federation
100
MSW를 활용하는 Front-End 통합테스트
MSW로 API 요청을 가로채는 React·Jest 기반 통합 테스트 구성을 소개했습니다. 정상·조건부·엣지·네트워크 오류 응답을 동적으로 검증할 수 있습니다.
#React#TypeScript
100
MSW를 활용하는 Front-End 통합테스트
MSW를 활용하는 Front-End 통합테스트
MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.
#MSW#통합테스트
3500
집합의 관점에서 타입스크립트 바라보기
구조적 타이핑을 기반으로 타입스크립트의 인터섹션과 유니온 타입을 집합 관점에서 해석했습니다. `keyof` 결과가 일반적인 집합 직관과 달라지는 이유를 예시로 설명합니다.
#TypeScript#유니온타입
000
바삭한 신입들의 동시성 이야기 - Swift편
Swift 5.5의 async/await 도입 배경과 동작 원리를 정리했습니다. completion handler의 한계를 줄이고, 코루틴과 continuation으로 안전한 비동기 처리를 설명했습니다.
#Swift#iOS
3100
찜으로 찜해보는 react-query
Redux 기반 서버 상태 처리의 반복 작업과 컨테이너 간 종속성을 React Query로 개선했습니다. 찜 페이지 사례로 useQuery 캐싱과 useMutation 기반 CRUD 흐름을 설명합니다.
#React#React Query
3300
Redux, Again
복잡한 React 상태를 Local State, Context + Hook, Redux로 나누어 관리한 경험을 공유했습니다. Redux의 보일러플레이트보다 상태 추적과 디버깅이 주는 장기 생산성을 재평가했습니다.
#React#Redux
2700