
오늘 분명 이것저것 뚱땅거렸는데
갑자기 수업듣고 왔더니 왜 하루가 다 지나갔지..?
여튼 오늘까지 강의정리하고...
다음주는 트러블 슈팅으로 우다다다 쓰겠습니다요
^-^)v!
Next.js 강의 정리 - 고오급 개발
배포 그리고 최적화

Shadcn/UI
Vercel의 Shadcn이 만든 UI 도구
Radix UI(접근성에 최적화된 React 컴포넌트)와 Tailwind CSS(유틸리티 기반 CSS 프레임워크)이 기반임
디자인 시스템을 구축하려는 개발자에게 직관적 컴포넌트 라이브러리 제공
- 설치 방법
npx shadcn-ui@latest init
Supabase
Firebase와 유사한 오픈 소스 백엔드 플랫폼, BaaS(Backend-as-a-Service) 제공
서버 관리와 같은 복잡한 작업 없이 개발 집중 가능
- 주요 특징
- PostgreSQL 데이터베이스: 안정적이고 강력한 데이터 관리.
- 인증 서비스: 간편한 사용자 관리 및 인증.
- 스토리지 서비스: 파일 저장 및 관리를 위한 안전한 스토리지.
- Supabase와 서버리스
BaaS와 함께 FaaS(Function-as-a-Service) 제공합니다.
ex) 데이터베이스 변경 시 특정 작업을 트리거 or 사용자 지정 인증 로직 구현
시작하기
- 회원가입 및 프로젝트 생성
- 회원가입 (GitHub 계정으로 간편하게 가입!)
- 프로젝트 생성
- 대시보드에서 New Project 버튼을 클릭해 프로젝트를 생성합니다.
- 프로젝트 이름, 비밀번호, 데이터베이스 지역(서울 추천) 설정
- 데이터베이스 테이블 생성
- Table Editor
직관적인 UI를 통해 테이블과 컬럼 추가 - SQL Editor
SQL 스크립트를 통해 더 세밀한 제어가 가능해짐
Table Editor로 테이블 생성
- 테이블 이름: products
- 컬럼
id: is identity
created_at: timestamp
title, description, price_amount, rating 등 필요한 컬럼 추가
Supabase 클라이언트 설정
1. 클라이언트 파일 생성
- client.ts
import { createBrowserClient } from "@supabase/ssr";
export const createClient = () =>
createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
export default createClient();
2. 서버 파일 생성
- server.ts
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";
export const createClient = () => {
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return cookies().getAll();
},
},
}
);
};
cf. 데이터 CRUD 구현
- 데이터 추가
const { error } = await supabase.from("products").insert([
{
title: "Sample Product",
description: "This is a sample product.",
price_amount: 100,
},
]);
-데이터 삭제
const { error } = await supabase
.from("products")
.delete()
.eq("id", 1);
Supabase Auth
간편하고 강력한 회원가입, 로그인, 로그아웃 제공
ex) GitHub OAuth 프로바이더 추가 (이메일은 해서 예시는 다른거로!)
- 대시보드의 Authentication > Providers로 이동
- GitHub 프로바이더를 활성화, Client ID 및 Secret 입력
GitHub에서 OAuth 앱 생성 후 정보 가져오기
로그인 및 로그아웃 구현
- 로그인
const { data, error } = await supabase.auth.signInWithOAuth({
provider: "github",
});
- 로그아웃
const { error } = await supabase.auth.signOut();
- 로그인 상태 확인
const session = await supabase.auth.getSession();
const isSignedIn = !!session.data.session;
Supabase Storage
파일 업로드와 관리를 제공합니다.
- 버킷 생성
- Bucket 생성
대시보드에서 Storage로 이동해 새 버킷을 생성합니다.
Public 버킷 옵션 활성화. - 정책 설정
“Create Policy”를 클릭해 모든 작업(읽기, 쓰기, 삭제)을 허용합니다.
- 파일 업로드
const file = event.target.files[0];
const { data, error } = await supabase.storage
.from("bucket-name")
.upload("folder/file.png", file);
환경 변수 관리
- NEXT_PUBLIC_ 접두어를 사용하면 브라우저에서도 접근이 가능하다!
NEXT_PUBLIC_SUPABASE_URL=your-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-key
NextAuth.js
Next.js 에서 인증 기능을 간단하게 추가할 수 있는 라이브러리
1. Route 설정
- auth.ts
import NextAuth from "next-auth";
export default NextAuth({ ... });
2. 로그인 페이지
- SignInPage
import { signIn } from "next-auth/react";
const SignInPage = () => {
return <button onClick={() => signIn("github")}>Sign in with GitHub</button>;
};
마무리 - 림졍, never die.

온 세상이 나를 구렁텅이에 몰아세우면서
온갖 억까를 던져주지만...
림졍은 이것에 굴하지 않는다.
이겨... 내보겠습니다.
오늘은 KPT는 제껴두고
과제하러가렵니다
굳바2
'React TIL' 카테고리의 다른 글
[React] Day_63 개인 프로젝트 작업 뜨라블슈띵 (2) (0) | 2024.12.17 |
---|---|
[React] Day_62 개인 프로젝트 작업 뜨라블슈띵 (1) (1) | 2024.12.16 |
[React] Day_60 데일리 정리 (1) | 2024.12.12 |
[React] Day_59 데일리 정리 (1) | 2024.12.11 |
[React] Day_58 데일리 정리 (0) | 2024.12.10 |