소개
Next.js를 기반으로 한 풀스택 쇼핑몰 POC를 개선하는 작업을 진행중입니다.
처음엔 바이브에만 의존한 무지성 코딩으로 빠르게 만들었지만, 점점 "해줘" "해줘" 로는 한계를 느꼈습니다.
(무지성으로 코딩하다보니 코드를 중복으로 다른 경로에 만드는 등의 충돌 발생 ⚠️)
추후 원하는내로 제작, 수정, 추가 하려면 기초 지식을 쌓는 것이 더 중요하다고 느껴서 무료강의 들으며 일부 기능을 천천히 추가해 보았습니다. 🧠
진행 방법
사용한 도구들
Next.js : 풀스택 언어
Vercel : 배포
Clerk: 인증 시스템 구성 및 관리자 권한 부여
Neon: PostgreSQL DB
주요 작업 내용
DB 변경
처음에는 SQLite로 시도했지만, Vercel에서는 PostgreSQL을 사용해야 함을 확인.
Supabase는 일주일 미접속 시 자동으로 비활성화되는 문제가 있어 Neon으로 진행.
DB 마이그레이션
기존 데이터를 CSV로 변환해 Neon에 업로드하는 CSV 로더 코드 생성.
이 기능은 추후 사용자 UI에도 기능으로 추가할 계획.
페이지네이션 구현
목록을 12개씩 한 페이지 에 표시되도록 페이지네이션 로직 구현.
관리자 기능 추가
Clerk 으로 관리자 계정이 로그인하면 수정/삭제 버튼이 구현 (기능 연동은 아직)
결과와 배운 점
트렌드만큼 중요한 건 기초
바이브 코딩은 빠르게 MVP를 만들고 진행하는데에 좋지만, 기초가 없으면 기능 완성 및 유지 보수도 불가능.
마무리하며
내가 만들고 싶은 것, 무엇이든 만들어서 배포할 수 있는 능력자 잡부 가 되면
필요한 곳이 더 많아지지 않을까 생각해봅니다. 💪
