[React] Day_61 데일리 정리

 

투데이 내 하루 정리

 

 

오늘 분명 이것저것 뚱땅거렸는데

갑자기 수업듣고 왔더니 왜 하루가 다 지나갔지..?

여튼 오늘까지 강의정리하고...

다음주는 트러블 슈팅으로 우다다다 쓰겠습니다요

^-^)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