풀스택 Vibe 코딩으로 웹앱 배포 경험을 목표로 온라인 쇼핑몰/쇼룸 개발 (2/2)

소개

Next.js를 기반으로 한 풀스택 쇼핑몰 POC를 개선하는 작업을 진행중입니다.

  • 처음엔 바이브에만 의존한 무지성 코딩으로 빠르게 만들었지만, 점점 "해줘" "해줘" 로는 한계를 느꼈습니다.

    (무지성으로 코딩하다보니 코드를 중복으로 다른 경로에 만드는 등의 충돌 발생 ⚠️)

  • 추후 원하는내로 제작, 수정, 추가 하려면 기초 지식을 쌓는 것이 더 중요하다고 느껴서 무료강의 들으며 일부 기능을 천천히 추가해 보았습니다. 🧠

진행 방법

사용한 도구들

  • Next.js : 풀스택 언어

  • Vercel : 배포

  • Clerk: 인증 시스템 구성 및 관리자 권한 부여

  • Neon: PostgreSQL DB

주요 작업 내용

  • DB 변경

    • 처음에는 SQLite로 시도했지만, Vercel에서는 PostgreSQL을 사용해야 함을 확인.

    • Supabase는 일주일 미접속 시 자동으로 비활성화되는 문제가 있어 Neon으로 진행.

  • DB 마이그레이션

    • 기존 데이터를 CSV로 변환해 Neon에 업로드하는 CSV 로더 코드 생성.

    • 이 기능은 추후 사용자 UI에도 기능으로 추가할 계획.

  • 페이지네이션 구현

    • 목록을 12개씩 한 페이지에 표시되도록 페이지네이션 로직 구현.

  • 관리자 기능 추가

    • Clerk 으로 관리자 계정이 로그인하면 수정/삭제 버튼이 구현 (기능 연동은 아직)

여성 의류 상점의 스크린 샷
의류 선택을 보여주는 웹 사이트의 스크린 샷
항목 목록을 보여주는 웹 페이지의 스크린 샷
한 쌍의 반바지를 보여주는 전자 상거래 웹 사이트의 스크린 샷

결과와 배운 점

  • 트렌드만큼 중요한 건 기초

    • 바이브 코딩은 빠르게 MVP를 만들고 진행하는데에 좋지만, 기초가 없으면 기능 완성 및 유지 보수도 불가능.

마무리하며

내가 만들고 싶은 것, 무엇이든 만들어서 배포할 수 있는 능력자 잡부 가 되면

필요한 곳이 더 많아지지 않을까 생각해봅니다. 💪

4
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요