24. 07. 18 TIL

오늘처럼 진짜 멍졸리고 멍피곤한 날은 없었을 듯... (사실 있었겠지만요)

 

머 예전 강의를 듣긴 했는데 뭔가 확 귀에 들어오진 않았었고...

 당연함. 챌린지 강의임.
진짜 뭔소리고? 하면서 보다가 결국 베이직 강의로 되돌아가게되...

일단 베이직 강의를 보면서 정리하기 시작!

 

일단 next js 설치부터 해본다.

 

npx create-next-app@latest

 터미널에 이렇게 입력해주면 된다.

ts, lint, tailwind, 앱 라우터는 예스

src 만들거? import alisa 어쩌구는 자유인 것 같긴 한데 튜터님은 no 하심

 

그리고 수파베이스 테이블을 하나 만든다.

 

그리고 RLS 설정도 해주셨는데

 

RLS는 데이터베이스가 데이터를 더 안전하게 지키기 위해 만든 기능이다.

수파베이스 DB를 조작할 수 있는 권한을 부여하는데,

RLS를 사용하면 누구에게 어떤 데이터를 보여줄지 아주 세밀하게 정할 수 있다.

 

1. SELECT (읽기 권한) 

테이블에서 (모든 사용자에게) 데이터를 읽을 수 있는 권한을 부한다.

 

2. DELETE (삭제 권한)

테이블에서 데이터를 삭제할 수 있는 권한을 설정한다.

사용자가 자신의 유저 아이디와 일치하는 데이터만 삭제할 수 있게 한다.

 

3. INSERT (삽입 권한)

데이터를 삽입할 수 있는 권한을 설정한다.

인증된 사용자만 테이블에 데이터를 삽입할 수 있게한다.

 

4. UPDATE (수정 권한)

테이블의 데이터를 수정할 수 있는 권한을 설정한다.

사용자가 자신의 이메일과 일치하는 데이터만 수정할 수 있게 설정할 수 있다.

 

** 사실 이 부분 내가 설정해본 적이 없어서 틀릴 수도... 어쩌면 내가 잘못알았을수도... 어쩌면 내가 잘못했을수도... 어쩌면...

 

하여튼 이렇게 설정해주고,

 

이제 supabase client 코드를 작성해줘야 한다.

 

설치는

 

npm install @supabase/supabase-js

이렇게,

 

코드는 최상단 경로에 supabase 폴더를 만들어 client.ts 라는 파일을 만들어주고

// utils/supabase/client.ts 

import { createClient } from "@supabase/supabase-js"

export const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_KEY!,
  )

이 코드를 넣어준다.

 

환경변수 설정은 .env.local을 만들어서 넣어주면 된다.

NEXT_PUBLIC_SUPABASE_URL=<supabase url>
NEXT_PUBLIC_SUPABASE_KEY=<supabase anon key>

 

그럼 이제 타입 설정을 해줘야 하는데

 

먼저 types 폴더가 있어야 하고, supabse.ts 파일이 있어야 한다.

 

그리고 

 

순서대로

npm i supabase@">=1.8.1" --save-dev

npx supabase login

이건 입력 후에 엔터를 쳐줘야 한다.

 

npx supabase init

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts

project_ref 부분엔 프로젝트 id값을 넣어줘야 한다.

 

그리고...

 

 

다음편에서 이어집니다...