반응형 React11 Next.js + Supabase 프로젝트 - (9) - 2 : 추가 설명 포스팅 - js 동기, 비동기 처리란 현재까지 프로젝트를 진행하며 코드에 주석을 달며, 읽기를 권장드리는 형식으로 설명을 이어왔는데, 이 타이밍에 부족했던 설명들과 브라우저에서의 데이터 통신과 화면 그리기의 방식에 대한 개념을 한 번 상세하게 짚고 넘어가야 할 것 같아 포스팅을 작성하게 되었습니다 app/blog/page.tsximport { createServerSupabaseClient } from '@/utils/supabase/server';import Link from 'next/link';import Image from 'next/image';/** * 블로그 목록 페이지 - Server Component * * 동기 처리 (Server-side): * - 페이지 렌더링 전에 모든 포스트 데이터를 서버에서 미리 가져옴 * - .. 2025. 7. 17. Next.js + Supabase 프로젝트 - (9) : 로그인 회원가입 인증 구현 with Clerk Next.js + Supabase 를 사용한다면 Supabase 를 사용하니까 편하게 Supabase 의 내제된 기능인 auth 를 사용을 할 수도 있습니다. 하지만 로그인 관련 UI 구현도 귀찮고, 모던 로그인 UX 등을 이해해보고 싶어, Clerk 라는 인증 관리 툴을 사용해 볼까 합니다. Supabase Auth vs Clerk 비교Supabase Auth✅ 장점완전한 통합: 이미 Supabase 사용 중이므로 추가 설정 최소화데이터베이스 직접 연동: RLS(Row Level Security)로 데이터 보안 자동 관리비용 효율성: 별도 인증 서비스 비용 없음간단한 설정: 기존 Supabase 클라이언트 그대로 활용기존 코드와 완벽 호환❌ 단점UI 커스터마이징 제한: 인증 UI를 직접 구현해야 함소.. 2025. 7. 14. Next.js + Supabase 프로젝트 - (8) : 포스팅 상세 페이지 구현 저번 포스팅에 대한 요약, 이번 포스팅에서 이어질 내용에 대한 안내 후 진행하도록 하겠습니다. 이전 포스팅 요약 Next.js와 Supabase를 활용한 CRUD(생성, 조회, 수정, 삭제) 기능 구현에 대한 튜토리얼입니다. 주요 내용은 다음과 같습니다:Supabase 설정Supabase 프로젝트 생성테이블 구성 (예: posts 테이블)Next.js에서 Supabase 연동Supabase 클라이언트 설정환경변수로 URL과 키 관리CRUD 기능 구현createPost: 게시물 생성getPosts: 게시물 전체 조회getPost: 특정 게시물 조회updatePost: 게시물 수정deletePost: 게시물 삭제API 라우트 작성 (pages/api/ 폴더)각 기능별로 API 핸들러 작성프론트엔드에서 API.. 2025. 7. 11. Next.js + Supabase 프로젝트 - (7) : Supabase CRUD, UI 코드 구현 (해당 파일들 전체 코드 공개) 이번 포스팅은 아래의 CRUD 구현에 대한 상세 설명으로 이어집니다.이번 포스팅은 내용은 컴팩트 하나, 코드를 첨부함에 따라 스크롤이 길 수는 있겠습니다ㅎㅎ 파일을 추가하는게 나을 수도 있을 텐데, 혹시나 다운로드의 부담도 있을 것 같아 코드로 적어두겠습니다 https://kyurasi.tistory.com/entry/Nextjs-Supabase-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-6-CRUD-%EA%B5%AC%ED%98%84 Next.js + Supabase 프로젝트 - (6) : CRUD 구현이 포스팅은 아래의 포스팅에 이어지는 내용입니다.https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-.. 2025. 7. 2. 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 구현 까지 해보았습니다.이제 연결.. 2025. 7. 1. Next.js + Supabase 프로젝트 - (5) : Github 연결, vercel 배포, CI/CD 구현하기 저는 프로젝트 개발을 진행하면서 사이트로 배포도 무료로 해보려고 합니다. 일단 무료로 사이트를 띄우는 방법으로 Vercel 을 택하겠습니다. 주요 내용1. 작업중인 프로젝트 Github 에 올리기2. 프로젝트 vercel 로 배포하기3. Github 코드 푸쉬로 Vercel 에 CI/CD 구현하기 1. 진행중인 프로젝트 Github 에 올리기1) github 에 로그인 후 우측 상단 나의 아이콘 클릭 - Your repositories - New 를 클릭해 새로운 저장소 생성2) 생성한 저장소의 HTTPS 주소 복사3) 프로젝트로 돌아가서git init: 현재 프로젝트의 /.git/ 안의 기존 깃 저장소를 다시 초기화git remote add origin [2)에서 복사한 주소]: 현재의 프로젝트에 2.. 2025. 6. 29. Next.js + Supabase 프로젝트 - (4) : Supabase 연결 - 코드 구현 이 포스팅은 이전 포스팅인 Next.js + Supabase 프로젝트 - (3) : Supabase 연결 에 이어지는 내용입니다. Supabase 의 기능을 사용할 코드를 작성할 텐데, 두 가지로 나누어서 구현하려고 합니다. 1) Supabase 의 client 기능2) Supabase 의 server 기능 app 폴더 밖의 root 폴더에 utils 폴더를 만들고그 안에 supabase 폴더를 만들고, 이 안에 파일들을 생성할 예정입니다 utils/supabase/client.ts목적: 브라우저 환경에서 Supabase 클라이언트를 생성하기 위한 함수주요 기능:createBrowserSupabaseClient(): 브라우저에서 사용할 Supabase 클라이언트를 생성합니다. Supabase의 URL과 .. 2025. 6. 29. Next.js + Supabase 프로젝트 - (3) : React Query 설정, Supabase 연결 이 포스팅은 이전 포스팅인 Next.js + Supabase 프로젝트 - (2) 에 이어지는 내용입니다 이번 포스팅은 프로젝트에 supabase 연결(무료)하는 내용을 다룰 예정입니다. 내용을 다루기에 앞서회원 Supabase란 뭘까?Supabase 가 2020 년 등장하기 이전, 많은 개발자들의 토이 프로젝트는 빠른 개발을 위해 서버 + auth(회원 관리) + DB 의 기능을 한 번에 가져갈 수 있는 Firebase 를 주로 선택했습니다. 하지만 이 모든 기능을 가지고 등장한 supabase로 인해 firebase 대신 supabase를 택하는 개발자들이 많이 생기고 있습니다. supabse 는 오픈소스 프로젝트고, PostfreSQL 기반으로, Firebase 대비 저렴하고 다양한 연동을 지원합니다.. 2025. 6. 29. Next.js + Supabase 프로젝트 - (2) Next 프로젝트 생성, 기초 설정 이 게시글에 이어지는 내용입니다 => 이전 포스팅 : Next.js + Supabase 프로젝트 - (1) Next.js + Supabase 프로젝트 - (1)시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서kyurasi.tistory.com 위 포스팅에서 프로젝트를 설치한 뒤, 해당 프로젝트 폴더로 이동합니다 cd 방금생성한프로젝트명 프로젝트에 생성된 구조에 대해서는 위의 포스팅에서 간략하게 다루어 보았습니다. 이번에는 Tailwind css 를 next 프로젝트에서 어떻게 사용하는지 확인해보겠습니다 아래 링크는 tailwind css 에서 제공하는 ne.. 2025. 6. 28. Next.js + Supabase 프로젝트 - (1) Next 프로젝트 생성 시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능) 1. 프로젝트 생성npx create-next-app@latest 프로젝트명 사실상 기본 세팅은 전부 엔터를 눌렀습니다ㅎㅎ 일단 타입스크립트와 tailwind 를 사용할거라 전부 기본 설정대로 진행했습니다Typescript - yESLint - nTailwind CSS.. 2025. 6. 28. React Next.js + Supabase 프로젝트 실습 최근 React 의 중요성이 아주 커지면서, 주니어 프론트엔드 개발자들에게는 React에 대한 지식은 선택사항이 아닌 필수 교양이 된 느낌이기도 합니다ㅎㅎ 제가 진행할 이 프로젝트에서는 학생분들, 개발을 가볍게 시작해보려는 분들을 위해 무조건 지킬 조건들이 있습니다프로젝트에 필요한 모든 기술은 무료만 사용할 것이다. (서버, 데이터베이스, 각종 라이브러리, 서드파티)실제로 다른 사람도 접속을 해서 다른 사람한테 보여줄 수 있어야 한다 (무료 배포가 가능해야 한다)AI (chat GPT 등)의 도움을 충분히 받는다. (무료 선에서)최근 실무에서 요구되는 기술들을 사용한다 (포트폴리오용) 하지만 항상 명심해야 할 부분도 있습니다. 텍스트로 전하는 글인 이상, 완벽하고 상세한 내용을 전부 담을 수는 없습니다... 2025. 6. 28. 이전 1 다음 반응형
