Next.js + Supabase 프로젝트 - (6) : 페이지 설계, CRUD 구현
이 포스팅은 아래의 포스팅에 이어지는 내용입니다.https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-배포-CICD-구현하기 Next.js + Supabase 프로젝트 - (5) : Github 연결, vercel 배포, CI/CD 구현하기저는 프로젝트 개발을 진행하면서 사이트로 배포도 무료로 해보려고 합니다. 일단 무료로 사이트를 띄우는 방법으로 Vercel 을 택하겠습니다. 주요 내용1. 작업중인 프로젝트 Github 에 올리기2. 프kyurasi.tistory.com 기대 결과물 이전 포스팅까지 해서 프로젝트에 Supabase DB 연결, Vercel에 Github 을 연결하여 CI/CD 구현 까지 해보았습니다.이제 연결..
이 포스팅은 아래의 포스팅에 이어지는 내용입니다.
https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-배포-CICD-구현하기
Next.js + Supabase 프로젝트 - (5) : Github 연결, vercel 배포, CI/CD 구현하기저는 프로젝트 개발을 진행하면서 사이트로 배포도 무료로 해보려고 합니다. 일단 무료로 사이트를 띄우는 방법으로 Vercel 을 택하겠습니다. 주요 내용1. 작업중인 프로젝트 Github 에 올리기2. 프kyurasi.tistory.com
기대 결과물
이전 포스팅까지 해서 프로젝트에 Supabase DB 연결, Vercel에 Github 을 연결하여 CI/CD 구현 까지 해보았습니다.
이제 연결한 DB 를 직접 만져보는 과정을 해보겠습니다!
이전에, 제가 이 프로젝트 초반에 드렸던 조건을 다시 한 번 짚고 가겠습니다.
1. 프로젝트에 필요한 모든 기술은 무료만 사용할 것이다. (서버, 데이터베이스, 각종 라이브러리, 서드파티)
2. AI (chat GPT 등)의 도움을 충분히 받는다. (무료 선에서)
3. 실제로 다른 사람도 접속을 해서 다른 사람한테 보여줄 수 있어야 한다
자 이제 다시 시작해보겠습니다.
먼저, 필요한 라이브러리들을 미리 설치해두겠습니다. 이후에 전부 설명드리겠습니다
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-highlight @tiptap/extension-text-align @tiptap/extension-font-family react-dropzone
이 포스팅에서 할 작업은 블로그 포스팅을 작성하고, 볼 수 있는 페이지를 만드는 작업입니다.
이제 블로그 관련 페이지들을 만들어보겠습니다. 먼저 폴더 구조를 생성하겠습니다
app 폴더 안에 blog 라는 폴더를 만듭니다.
=> app/blog
- app 폴더에 blog 라는 폴더 생성
- page.tsx 파일 생성 : app/blog/page.tsx
- write 라는 폴더 생성
- 그 안에 page.tsx 파일 생성 : app/blog/write/page.tsx
- [slug] 라는 폴더 생성
- 그 안에 page.tsx 파일 생성 : app/blog/[slug]/page.tsx
- app 폴더 밖에 components 라는 폴더 생성
- editor 라는 폴더 생성
- RichTextEditor.tsx 라는 파일 생성 : components/editor/RichTextEditor.tsx
- editor 라는 폴더 생성
- app 폴더의 page.tsx 파일 수정 : app/page.tsx
- app 폴더 밖의 next.config.ts 파일 수정 : next.config.ts
- app 폴더 밖의 tailwind.config.ts 파일 생성 : tailwind.config.ts
이제 단계별로 하나씩 생성 이유와 방법에 대해서 알아보겠습니다
폴더 구조별 목적과 기대 효과
1. blog 폴더
목적: 블로그 기능을 위한 전용 라우팅 영역 생성
기대효과: /blog URL로 접근할 수 있는 블로그 메인 페이지 구성. Next.js의 App Router 방식으로 깔끔한 URL 구조 만들기
2. page.tsx
목적: 블로그 메인 페이지 (포스트 목록 표시)
기대효과: 발행된 모든 블로그 포스트를 카드 형태로 보여주는 랜딩 페이지. 사용자가 흥미로운 글을 쉽게 찾을 수 있도록 하기
3. write 폴더 + page.tsx
목적: 새 블로그 포스트 작성 전용 페이지
기대효과: /blog/write URL로 접근해서 리치 텍스트 에디터로 글을 작성할 수 있는 관리자/작성자 전용 공간 제공
4. [slug] 폴더 + page.tsx
목적: 개별 블로그 포스트 상세 보기 페이지
기대효과: /blog/my-first-post 같은 깔끔한 URL로 각 글에 접근 가능. SEO에 유리하고 공유하기 좋은 URL 구조
Slug 란 : 웹 개발에서 slug는 웹 페이지의 URL에서 제목이나 핵심 내용을 축약하여 표현한 부분을 의미합니다. 일반적으로 URL의 마지막 부분에 위치하며, 페이지의 내용을 쉽게 파악할 수 있도록 돕는 역할을 합니다. 검색 엔진 최적화 (SEO) 관점에서 중요하며, 페이지의 주제를 명확히 나타내는 키워드를 포함하는 것이 좋습니다.
5. components 폴더
목적: 재사용 가능한 UI 컴포넌트들을 모아두는 공간
기대효과: 앱 전체에서 공통으로 사용할 컴포넌트들을 체계적으로 관리. 코드 재사용성과 유지보수성 향상
6. editor 폴더
목적: 에디터 관련 컴포넌트들만 따로 분류
기대효과: 텍스트 에디터, 이미지 업로더 등 에디터 관련 기능들을 모듈화해서 관리하기 쉽게 만들기
7. RichTextEditor.tsx
목적: Tiptap 기반의 리치 텍스트 에디터 컴포넌트
기대효과: 워드프로세서처럼 텍스트 스타일링, 이미지 삽입, 링크 추가 등이 가능한 강력한 글쓰기 도구 제공
8. page.tsx 수정
목적: 홈페이지에서 블로그로 연결되는 네비게이션 추가
기대효과: 사이트 방문자들이 메인 페이지에서 바로 블로그 섹션으로 이동할 수 있는 동선 확보
9. next.config.ts 수정
목적: Supabase Storage 이미지를 Next.js Image 컴포넌트에서 사용할 수 있도록 도메인 허용
기대효과: 외부 이미지 로딩 보안 문제 해결하고, 최적화된 이미지 로딩으로 성능 향상
10. tailwind.config.ts 생성
목적: Tailwind CSS Typography 플러그인 활성화
기대효과: 블로그 글 내용에서 prose 클래스 사용으로 아름다운 타이포그래피 자동 적용. 가독성 좋은 글 레이아웃
설명은 블로그에서 구현하려는 기능을 단계별로 명세를 하고 시작하겠습니다.
Phase 1 -1
- 메인 페이지에서 블로그 포스팅 관련 페이지들을 접근할 수 있다
- 블로그 포스팅 메인 페이지에서 작성된 포스트들을 볼 수 있다
- 포스팅을 작성할 수 있다 (사진 첨부)
- 웹 검색에 잘 걸리도록 최적화를 한다
- 태그를 여러개 추가할 수 있게 한다 (키워드)
- 포스팅을 수정할 수 있다
Phase 1 -2
- 로그인 기능을 구현한다
- 로그인을 한 유저만 글을 작성할 수 있다
- 내가 작성한 포스팅들을 모아볼 수 있다
- 자신의 포스팅만 자신이 수정할 수 있다
Phase 1 -3
- 좋아요 기능을 만든다
- 댓글, 대댓글 기능을 만든다
- 작성자를 follow 할 수 있는 기능을 만든다
포스팅을 보여주는 페이지, 포스팅을 작성하는 페이지, 포스팅을 수정하는 페이지등을 만들다 보니 UI 작업도 많이 들어가게 되어, 제가 저장하고 있는 Github 을 public 으로 돌려 포스팅마다 브랜치를 파서 공유드리고 싶지만, 안타깝게도 당연한 말이지만, public 으로 돌리게 되면 CI/CD 가 불가합니다ㅠ
아쉬움을 뒤로하고 각각에 대한 파일들을 올리고, 해당 파일들에 대한 주석도 많이 달아놨으니, 다음 포스팅에서 파일들을 첨부하고, 각 파일에 대한 설명을 첨부하겠습니다
