Project
1.Next.js + TypeScript + Tailwind CSS + Supabase 시작하기
이전에 쇼핑몰을 만드는 프로젝트를 React로 개발했었다. 이때 SPA이기 때문에 상품마다의 정보를 담은 meta tag를 작성할 수 없다는 점이 아쉬웠다. React에서 동적 meta tag를 설정할 수 있도록 시도해보았지만 모든 상품에 적용하는 것이 어려워 진행을
2.Next.js + Supabase 회원가입 & 로그인 구현
우선 Supabase를 설정해야 한다. Supabase 설정 user 테이블 설정 테이블 생성 user 테이블에 원하는 속성을 설정해주면 된다. 나의 경우 user_type, name, phone 속성을 추가적으로 설정해주었다. > ❗️주의할 점 원래 컬럼 이름을 u
3.Next.js + Supabase 데이터 삽입(+이미지 여러장 올리기)
상품을 등록하는 form을 구현할 계획이다. Storage를 사용해서 이미지(여러장) 업로드 이미지 순서 변경 (drag&drop) 이미지 미리보기 form 위의 이미지처럼 form을 만들었다. 이미지 여러장 올리기 이미지를 업로드할 수 있는 input의 코드를 더
4.Next.js + Tailwind CSS 폰트 설정
Next.js에서 Tailwind CSS를 사용할 때 Pretendard 폰트 적용하는 방법
5.Next.js + Supabase 장바구니 구현(1) - 담기편
Supabase 장바구니 관련 Table 설정 유저의 ID 당 하나의 cart를 갖도록 하고 cart_item 테이블을 통해 각각의 상품이 담기도록 구성했다. cart table 생성 cart_item table 생성 각 테이블의 관계도 확인 cart와 cart_i
6.Next.js 결제 기능 구현 with 포트원
현재 진행중인 쇼핑몰 프로젝트의 결제 기능을 구현하기 위해 포트원을 사용하기로 결정했다. 거의 모든 카드사들, 간편 결제 등을 지원하고 있어 포트원을 선택하게 되었다. 포트원? 포트원의 경우 다음과 같이 한줄로 자신을 소개하고 있다. > PortOne > 코드 한 줄
7.Next.js에서 차트 구현하기 with Chart.js, react-chartjs-2
판매자 센터의 메인에서 매출과 주문 수을 한눈에 파악할 수 있도록 하는 차트를 구현하고 싶어, 차트 라이브러리에 대해 알아보게 되었다. 내가 구현할 차트의 경우 아래와 같다. 매출 주문건수 차트 라이브러리의 경우 매우 다양하지만, 그 중에서 Chart.js를 선택하
8.Vercel을 이용한 Next.js 배포 방법과 배포 과정에서 생긴 문제 해결하기
Next.js를 배포하기 위해 Vercel을 사용하거나 Node.js 서버, Docker 이미지, 정적 HTML 파일로도 자체적으로 호스팅할 수 있다.나의 경우 Vercel을 사용해 배포를 진행했다.Vercel은 Next.js를 개발한 곳에서 직접 운영하기에 Next.
9.Supabase에서 필터링 오류를 피하는 !inner 사용하기
🧨 문제 상황 차트를 구현하고나서 문제가 없는줄 알았는데, 다른 판매자로 로그인해서 상품등록을 진행하려고 했더니 상품등록 0개인 판매자에게 매출현황과 주문건수 차트가 나타났다. 이전에 확인했던 차트와 똑같은 모양으로.. 😓 알고 보니 차트 데이터가 주문 데이터