replit을 사용하여 하이브리드 앱 개발을 진행하고 있습니다.아직 매우 초반 단계에 머물고 있으며 간단하게 사용기를 작성해보려고 합니다.replit 이란?아시는 분들은 다 아시겠지만 replit은 최근 AI를 통해서 자연어로 코드를 생성하는데 특화된 서비스입니다. 최근 사용 후기들을 보면 복잡한 어플을 개발 및 유지보수 하기엔 부족하나 개발을 잘 모르시는 분들이 mvp 제작에 사용하는 것에는 매우 좋은 효용을 보여주고 있습니다.replit 사용기웹 프론트 개발자이지만 사이드프로젝트로 앱을 만들기로 결정하고 앱을 만드려고 하니 배워야 할 것이 많아 replit을 사용하기로 결정했습니다.템플릿을 선택할 수 있는데 여기서 expo를 선택하여 개발을 시작했습니다.Claude로 기능 명세 작성하기replit의 ..

비즈니스 로직이 복잡해질수록 API 호출·캐싱 관리도 한층 까다로워집니다. React(Next.js) 프로젝트에서 TanStack Query를 사용하며 얻은 세 가지 핵심 패턴을 공유합니다.1. Query Key 분리 관리 (productKeys)문제: 여러 컴포넌트에서 같은 리소스에 접근할 때 키 이름이 하드코딩되어 중복·오타 발생해결: 공통 키 집합을 한 곳에 모아두고 재사용export const productKeys = { all: ['product'] as const, lists: () => [...productKeys.all, 'lists'] as const, list: (businessId: number | null) => [...productKeys.lists(), businessId]..

요약컴포넌트를 제작할 때 매번 figma를 보면서 받아쓰기가 반복됨사내 디자인 시스템은 규칙이 명확, figma codegen을 사용하여 플로그인 개발복붙으로 컴포넌트 개발을 완료할 수 있음 플러그인 도입 배경간단한 예시를 통해 회사의 상황과 피그마 도입 배경에 대해서 설명하겠습니다.일단 회사에서는 디자인시스템을 적극적으로 도입하고 있었고 디자이너분들도 figma에서 디자인 시스템을 사용하여 디자인을 하는 상황이었습니다.기존에는 피그마의 dev 모드에서 본 코드를 직업 코드를 복불하는 작업으로 진행을 하였으나 디자인시스템으로 인해 규칙이 생기게 되었습니다.1. 디자인 시스템위 이미지는 피그마에서 디자인시스템을 적용하기 전(왼쪽), 후(오른쪽)입니다.보시는 것처럼 color에 회사에서 쓰는 컬러값(vars..