supabase 썸네일형 리스트형 Bonus 4. Next.js 안정성 확보하기 - Vitest 테스트 가이드 Vitest 테스트 가이드 - Bonus 4. Next.js 안정성 확보하기Vitest로 테스트 코드를 작성합니다.기술 부채였던 테스트를 드디어 추가했습니다.🧪 테스트가 없으면 생기는 일3개월간 테스트 없이 개발했습니다.어느 날 작은 수정을 했습니다.// 금액 포맷 함수 수정function formatCurrency(amount: number) { return amount.toLocaleString() + '원'}배포했습니다.다음 날 연락이 왔습니다."견적서 금액이 이상해요."확인해보니 null이 들어오는 경우를 처리 안 했습니다.formatCurrency(null) // "null원" 출력테스트가 있었다면 배포 전에 잡았을 겁니다.📦 Vitest 설치Jest보다 빠르고 설정이 간단합니다.npm i.. 더보기 Bonus 3. 확장 계획과 회고 - 사이드 프로젝트 로드맵 사이드 프로젝트 로드맵 - Bonus 3. 확장 계획과 회고3개월간의 실험을 마무리하며 앞으로의 계획을 공유합니다.🚀 3개월간 만든 것돌아보니 생각보다 많이 만들었습니다.✅ 고객용 웹사이트 (12페이지)✅ 마이페이지 (7페이지)✅ 관리자 시스템 (15페이지)✅ 이메일 시스템 (15종)✅ 다국어 지원 (한국어/일본어)✅ 월 운영비 거의 0원처음에는 "과연 될까?"라고 생각했습니다.3개월 후, 실제로 작동하는 서비스가 완성됐습니다.📋 앞으로 해보고 싶은 것들프로젝트를 계속 발전시킨다면 이런 것들을 해보고 싶습니다.단기 (1-3개월)1. 모바일 앱- 고객용 문의/견적 확인 앱- 관리자용 알림/처리 앱- Push 알림React Native로 만들면 웹에서 배운 걸 활용할 수 있을 것 같습니다.2. 결제 시스.. 더보기 Bonus 2. 80시간 삽질 경험담 - Next.js 개발 실수 모음 Next.js 개발 실수 모음 - Bonus 2. 80시간 삽질 경험담3개월간 겪은 개발 실수들을 공유합니다.여러분은 같은 삽질을 피하시길 바랍니다.😅 완성된 것만 보면 순탄해 보이지만완성된 프로젝트만 보면 "잘 만들었네"라고 생각할 수 있습니다.하지만 실제로는 삽질의 연속이었습니다.밤새 디버깅하고, 다음 날 아침에 원인을 찾고, 처음부터 다시 만들고...이 글에서는 그 삽질들을 솔직하게 공유합니다.🔥 삽질 1: 다국어 나중에 추가하기상황처음에는 한국어만 지원하면 된다고 생각했습니다."다국어는 나중에 하지 뭐~"2주 후, 일본어도 지원해야 한다는 걸 알게 됐습니다.문제하드코딩된 텍스트가 200개가 넘었습니다.제품 목록총 {count}개의 제품이 있습니다문의하기모든 파일을 찾아다니며 수정해야 했습니다... 더보기 23. 담당자 배정과 알림 - B2B 업체 관리 시스템 B2B 업체 관리 시스템 - 23편. 담당자 배정과 알림업체(회사) 관리 시스템으로 B2B 거래를 체계화합니다.이 글에서는 업체 CRUD, 담당자 배정, 거래 통계, 알림 설정을 다룹니다.🏢 B2B는 회사 단위다문의가 쌓이다 보니 패턴이 보였습니다.같은 회사에서 여러 번 문의가 옵니다.담당자도 바뀝니다.A회사 김과장 → 문의A회사 이대리 → 문의A회사 김과장 → 또 문의개인별로 관리하니까 히스토리가 끊겼습니다.Claude에게 물었습니다.업체(회사) 단위로 관리할 수 있게 만들어줘.같은 회사 직원들을 묶어서 보고 싶어.회사별로 담당자도 배정할 수 있게.🗄️ 업체 데이터 구조Claude가 새 테이블을 제안했습니다.-- 업체 테이블create table companies ( id uuid primary .. 더보기 22. CRUD 패턴과 이미지 업로드 - 제품/회원/FAQ 관리 제품/회원/FAQ 관리 - 22편. CRUD 패턴과 이미지 업로드CRUD 패턴을 재사용해서 여러 관리 기능을 효율적으로 만듭니다.이 글에서는 제품, 회원, FAQ 관리와 이미지 업로드, 드래그 정렬을 다룹니다.🔄 비슷한 패턴이 반복된다문의 관리를 만들고 나니, 비슷한 게 더 필요했습니다.제품 관리회원 관리FAQ 관리전부 비슷한 구조입니다.목록 → 상세 → 수정 → 삭제Claude에게 물었습니다.제품, 회원, FAQ 관리 페이지를 만들어줘.문의 관리랑 비슷한 구조로.📦 제품 관리제품 목록// app/admin/(protected)/products/page.tsximport { getProducts } from '@/lib/queries/admin-products'import Link from 'next.. 더보기 21. 항목 관리와 이메일 발송 - 견적서 생성 시스템 견적서 생성 시스템 - 21편. 항목 관리와 이메일 발송견적서 생성 시스템으로 고객에게 정식 견적을 보냅니다.이 글에서는 DB 설계, 폼 구현, 금액 계산, 발송 기능을 다룹니다.📄 견적서가 필요했다문의를 받았습니다."이 제품 얼마예요?"답장을 보내야 하는데, 그냥 이메일로 "10만원이요"라고 보낼 순 없었습니다.정식 견적서가 필요했습니다.Claude에게 물었습니다.견적서 작성 기능을 만들어줘.문의에서 바로 견적서 작성으로 넘어갈 수 있게.항목을 여러 개 추가할 수 있어야 하고,부가세도 자동 계산되게.🗄️ 견적 데이터 구조Claude가 두 개의 테이블을 제안했습니다.견적 메인과 견적 항목입니다.-- 견적 메인 테이블create table quotations ( id uuid primary key d.. 더보기 20. CRUD와 상태 변경 - 문의 관리 시스템 구축 문의 관리 시스템 구축 - 20편. CRUD와 상태 변경문의 관리 시스템으로 고객 문의를 체계적으로 처리합니다.이 글에서는 목록, 필터, 상세 페이지, 상태 변경, 담당자 배정을 다룹니다.📋 문의가 쌓이기 시작했다대시보드에서 숫자는 보이는데, 실제 문의 내용을 보려면 어떻게 해야 할까요.처음엔 대시보드에서 DB 쿼리 결과를 보여줬습니다.홍길동 | hong@email.com | 제품 문의입니다... | pending금방 한계에 부딪혔습니다.상태를 바꾸고 싶은데 방법이 없었습니다.Claude에게 물었습니다.문의 관리 페이지를 만들어줘.목록에서 상태별로 필터링도 되게 하고,상세 페이지에서 상태를 바꿀 수 있게.📋 문의 처리 플로우Claude가 먼저 워크플로우를 정리했습니다.1. 새 문의 확인 (pendin.. 더보기 19. 통계와 현황 조회 - 관리자 대시보드 만들기 관리자 대시보드 만들기 - 19편. 통계와 현황 조회관리자 대시보드를 만들어 사이트 현황을 한눈에 파악합니다.이 글에서는 레이아웃 구성, 통계 조회, 최근 활동, 성능 최적화를 다룹니다.📊 대시보드가 필요했다고객 기능을 만들고 나니 문의가 들어오기 시작했습니다.문제는 어디서 확인하는지 몰랐다는 것입니다.DB를 직접 들여다봐야 했습니다.SELECT * FROM inquiries ORDER BY created_at DESC;이건 아니다 싶었습니다.Claude에게 물었습니다.관리자 대시보드를 만들어줘.로그인하면 바로 현황이 보이게.오늘 문의 수, 처리 대기 건수 같은 것들.🏗️ 관리자 레이아웃Claude가 먼저 레이아웃 구조를 만들었습니다.사이드바가 있는 전형적인 관리자 페이지 형태입니다.// app/ad.. 더보기 이전 1 2 3 다음
