Frontend 2

게임 기능에 디자인 패턴 적용하기

들어가며저희 회사에서는 React Native를 사용하여 교육용 앱 서비스를 개발하고 있습니다. 이 서비스에서 저는 카드 게임이 들어가는 기능을 맡아 개발하게 되었습니다.하지만 개발을 시작한 지 얼마 지나지 않아 다양한 인터랙션과 애니메이션, 게임의 상태 관리, 카드의 위치와 상태 관리 등 복잡하게 뒤엉킨 요구사항에 부딪히게 되었습니다.이러한 복잡한 요구사항에 디자인 패턴을 적용하여 풀어나간 이야기를 써보고자 합니다. 요구사항핵심 요구사항은 카드 슬롯 교체 기능이었습니다. 2개의 보드 슬롯 중 한 곳에 이미 카드가 있을 때, 다른 카드를 올리면 기존 카드가 자동으로 빈 슬롯으로 이동해야 했습니다.이를 구현하기 위해 카드 배치 상태 플래그, 드래그 시의 Snap 로직, 위치 변경 애니메이션 트리거 등 us..

Frontend 2025.09.28

테블리 프로젝트 폴더 구조 설계

Intro사이드 프로젝트를 개발하면서 특히 신경썼던 부분들을 정리해본다.기술스택프로젝트에서 사용한 기술 스택은 다음과 같다.코어: React, Next.js, TypeScript스타일링: shadcn/ui, tailwind상태관리: jotaiAPI 통신: React-Query, axiosPackage Manager: pnpm로깅: Sentry폴더 구조 설계Next.js에서 폴더 구조 설계 방법에 정답은 없다. 하지만 이전의 개발 경험들을 미루어봤을 때 많은 양의 파일들 사이에서 수정해야 하는 코드를 찾는 일은 언제나 괴로웠기에.. 그리고 다른 사람과 의사소통을 할 때에도 필요한 코드를 찾는데 시간이 오래 걸리는 것은 소통의 불편함을 가져왔다.이런 부분을 최대한 방지하고자 폴더구조를 설계할 때 코드의 맥락..

Frontend 2025.01.05