바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.
#React#TypeScript
2800
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
MSW를 활용하는 Front-End 통합테스트
MSW로 API 요청을 가로채는 React·Jest 기반 통합 테스트 구성을 소개했습니다. 정상·조건부·엣지·네트워크 오류 응답을 동적으로 검증할 수 있습니다.
#React#TypeScript
000
MSW를 활용하는 Front-End 통합테스트
MSW를 활용하는 Front-End 통합테스트
MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.
#MSW#통합테스트
3400
찜으로 찜해보는 react-query
Redux 기반 서버 상태 처리의 반복 작업과 컨테이너 간 종속성을 React Query로 개선했습니다. 찜 페이지 사례로 useQuery 캐싱과 useMutation 기반 CRUD 흐름을 설명합니다.
#React#React Query
3300
Redux, Again
복잡한 React 상태를 Local State, Context + Hook, Redux로 나누어 관리한 경험을 공유했습니다.\nRedux의 보일러플레이트보다 상태 추적과 디버깅이 주는 장기 생산성을 재평가했습니다.
#React#Redux
2600
합성 컴포넌트로 재사용성 극대화하기
Dialog의 prop 증가와 고정된 요소 배치 문제를 합성 컴포넌트로 개선했습니다. 서브 컴포넌트를 조합해 복잡한 Dialog 요구사항에 유연하게 대응했습니다.
#React#TypeScript
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
합성 컴포넌트로 재사용성 극대화하기
합성 컴포넌트로 재사용성 극대화하기
확장되는 Dialog 요구사항에서 prop 증가와 고정된 배치의 한계를 분석했습니다. React 합성 컴포넌트로 유연한 조합과 재사용성을 확보하는 방법을 소개합니다.
#React#Atomic Design
3700
폼 데이터를 우아하게 관리하는 방법
fp-ts의 Either와 조합 가능한 검증 규칙으로 React 폼 검증을 구성했습니다. 커스텀 훅으로 값·오류 상태와 제출 전 검증 코드를 간결하게 관리했습니다.
#React#TypeScript
2300
타다팀의 새로운 기술블로그를 소개합니다.
타다 기술 블로그를 콘텐츠 중심 구조로 개편하고 Jekyll에서 Gatsby로 이전했습니다. Markdown·RSS·댓글·배포 환경을 재구성해 운영성과 브랜드 일관성을 높였습니다.
#Gatsby#React
4000
깔끔한 폼 개발과 정시퇴근을 위하여 react-hook-form
React Hook의 사용 규칙과 react-hook-form 기반 폼 관리 방식을 소개했습니다. 검증, 제출, 동적 필드 관리를 간결하게 구성한 사례를 설명했습니다.
#React#react-hook-form
1300
FE Lazy Loading 적용기
상품 이미지가 많은 페이지의 과도한 초기 로딩 문제를 Intersection Observer 기반 Lazy Loading으로 개선했습니다.\n최초 이미지 리소스를 평균 9.6MB로 줄이고 첫 페이지 로딩 시간을 평균 5.5초로 단축했습니다.
#React#JavaScript
2800
Jotai는 조-타이 라고 읽습니다.
Jotai를 Redux·Context API·Recoil과 비교하며 도입 배경과 선택 기준을 정리했습니다.\natom, 파생 atom, Provider, 주요 유틸과 참조 안정성 주의점을 소개합니다.
#React#Jotai
2300
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
React Query의 Suspense 옵션과 Error Boundary로 로딩·오류 UI를 선언적으로 분리했습니다.\n경계 구성으로 복잡한 비동기 화면의 유지보수와 UX 설계를 개선하는 방식을 소개합니다.
#React#React Query
2600
올리브영 테크블로그 Gatsby 전환&개발기
Jekyll 기술 블로그를 Gatsby 기반으로 전환한 배경과 설계·배포 과정을 정리했습니다. React 구조와 Plugin, Netlify로 개발·운영 편의성과 SEO를 강화했습니다.
#Gatsby#React
12100