nextjs 썸네일형 리스트형 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}개의 제품이 있습니다문의하기모든 파일을 찾아다니며 수정해야 했습니다... 더보기 30. Analytics와 에러 추적 - Vercel 모니터링 가이드 Vercel 모니터링 가이드 - 30편. Analytics와 에러 추적운영과 모니터링 방법을 정리합니다.이 글에서는 Analytics, 에러 로깅, 백업, 보안 점검을 다룹니다.🎉 배포 완료! 하지만...배포 완료! 하지만 이제 시작입니다.처음에는 "배포하면 끝이지"라고 생각했습니다.그런데 며칠 후 문제가 생겼습니다."로그인이 안 돼요""페이지가 느려요""에러가 났어요"운영이 더 어렵다는 걸 깨달았습니다.Claude에게 물었습니다.운영하면서 뭘 확인해야 해?에러는 어떻게 추적하지?📊 Vercel Analytics방문자 분석 도구입니다.설치npm install @vercel/analytics// app/layout.tsximport { Analytics } from '@vercel/analytics/r.. 더보기 29. GitHub 연동과 도메인 설정 - Vercel 배포 가이드 Vercel 배포 가이드 - 29편. GitHub 연동과 도메인 설정Vercel에 배포하여 세상에 공개합니다.이 글에서는 GitHub 연동, 환경 변수 설정, 커스텀 도메인, 자동 배포를 다룹니다.🚀 드디어 배포!3개월간 개발한 프로젝트를 세상에 공개할 시간이 왔습니다.로컬에서만 돌리던 걸 인터넷에 올리는 순간은 항상 떨립니다.Claude에게 물었습니다.배포하려고 해.Vercel이 좋을까?Vercel을 선택한 이유:✅ Next.js 제작사 (완벽 호환)✅ 무료 플랜 충분✅ GitHub 연동 자동 배포✅ HTTPS 자동 적용✅ 글로벌 CDN📦 GitHub 저장소 준비1. 저장소 생성github.com → New repository이름: kmetaroPrivate (비공개) 권장2. 로컬 연결git in.. 더보기 28. 이미지와 캐싱 전략 - Next.js 성능 최적화 Next.js 성능 최적화 - 28편. 이미지와 캐싱 전략성능 최적화로 사용자 경험을 개선합니다.이 글에서는 이미지 최적화, 데이터 캐싱, ISR, 번들 최적화를 다룹니다.⚡ 성능이 왜 중요한가?처음에 만든 페이지는 로딩이 느렸습니다.Lighthouse 점수를 확인해보니 50점대였습니다.Claude에게 물었습니다.페이지 로딩이 느려.성능 최적화를 해줘.페이지 로딩이 3초 이상 걸리면:- 이탈률 53% 증가- 전환율 7% 감소 (매 1초마다)- SEO 순위 하락B2B라도 빠른 게 좋습니다.🖼️ 이미지 최적화가장 큰 문제는 이미지였습니다.Next.js Image 컴포넌트// ❌ 일반 img - 5MB 원본 그대로 로드// ✅ Next.js Image - 자동 최적화import Image from 'next.. 더보기 27. 메타데이터와 OG 이미지 - Next.js SEO 최적화 Next.js SEO 최적화 - 27편. 메타데이터와 OG 이미지SEO 최적화로 검색 노출을 높입니다.이 글에서는 메타데이터, OG 이미지, 구조화 데이터, 사이트맵을 다룹니다.🔍 검색에서 찾아올 수 있을까?B2B 서비스도 검색에서 찾아올 수 있습니다."산업용 펌프 견적""B2B 밸브 구매"이런 검색에 노출되면 무료로 고객을 얻을 수 있습니다.Claude에게 물었습니다.SEO 최적화를 해줘.검색 엔진이 우리 사이트를 잘 이해하도록.📋 Next.js 메타데이터 API정적 메타데이터바뀌지 않는 페이지는 정적으로 설정합니다.// app/[locale]/(public)/products/page.tsximport { Metadata } from 'next'export const metadata: Metadat.. 더보기 26. i18n 템플릿과 커스터마이징 - 다국어 이메일 시스템 다국어 이메일 시스템 - 26편. i18n 템플릿과 커스터마이징다국어 이메일 템플릿을 구현합니다.이 글에서는 다국어 메시지 구조, 언어 감지, 변수 치환, 관리자 설정을 다룹니다.🌐 일본어 이메일이 필요했다일본어 고객이 문의를 남겼는데, 한국어 이메일이 갔습니다."문의가 접수되었습니다"일본인 고객은 이해할 수 없었을 겁니다.Claude에게 물었습니다.이메일도 다국어로 보내야 해.고객의 언어 설정에 따라 해당 언어로.📝 다국어 메시지 구조모든 이메일 텍스트를 한 파일에 모았습니다.// lib/email/messages.tsexport const emailMessages = { inquiryReceived: { ko: { subject: '문의가 접수되었습니다', title: '.. 더보기 이전 1 2 3 4 다음
