본문 바로가기

분류 전체보기

 (177)
#14 Deployment > Drizzle RLS 드리즐을 이용해서 RLS세팅하는 방법을 배워보자. (이전에는 SQL 형식으로 직접 supabase에서 세팅했는데, 그거보다 이게 좋다고 한다. 타입스크립트 자동완성 기능활용 할 수 있고, 깃헙에 올릴수있으니) - users/schema.tsimport { bigint, boolean, jsonb, pgEnum, pgPolicy, pgSchema, pgTable, primaryKey, text, timestamp, uuid,} from "drizzle-orm/pg-core";import { authenticatedRole, authUid, authUsers } from "drizzle-orm/supabase";import { products } from "../..
#13 Toss Payments > 토스 페이먼츠 해보기 @tosspayments/tosspayments-sdk 설치 - promote-page.tsximport { Hero } from "~/common/components/hero";import { Route } from "./+types/promote-page";import SelectPair from "~/common/components/select-pair";import { Calendar } from "~/common/components/ui/calendar";import { useEffect, useRef, useState } from "react";import { Label } from "~/common/components/ui/label";import { DateRang..
#12 Transactional Emails > react, tailwind css를 활용해서 이메일 보내는것을 해보자 www.namecheap.com (도메인 사는 곳)www.cloudflare.comwww.resend.com (이메일 꾸며 주는 곳) 나중에 해당 강의는 다시 들어보자!
#11 GPT & CRON Jobs > CHATGPT API 받기https://platform.openai.com/settings/organization/data-controls/sharing 해당 키를 .env 파일 OPENAI_API_KEY값에 넣어두자 > SUPABASE DB 확장프로그램 사용해보자 경로 : DATABASE -> extensions 1. pg_net 활성화2. pg_cron 활성화 그리고 나서, Intergrations 페이지 -> cron에 가면 해당 작업을 할 수 있다. > chatgpt api 사용하기 *npm install openai 설치 먼저, 외부 api를 사용하기 위해서는(특히 유료) supabase의 api key를 별도 세팅해야 한다. 기본적으로는 위 public key를 사용해도 문제가 없다. (..
#10 DMs > 채팅방을 만들어보자 메시지를 보내려고 할 때 기존 채팅방이 없으면 새로 만들어주고, 있으면 기존 채팅방에 메시지를 보내는 방법이다. - get_room.sqlCREATE FUNCTION public.get_room(from_user_id uuid, to_user_id uuid)RETURNS TABLE (message_room_id bigint)LANGUAGE plpgsqlSECURITY DEFINERSET search_path = ''AS $$BEGIN RETURN QUERY SELECT m1.message_room_id FROM public.message_room_members m1 INNER JOIN public.message_room_members m2 ON m1.messa..
#9 Fetchers > Fetcher란? 기존에 loader와 action을 사용하기 위해서는 url 주소에 의존해야 했다. 하지만 fetcher를 쓰면 화면 어디에서든지 자유롭게 loader와 action을 사용 할 수 있다. (notification이나, upvote에 쓰기 좋고 쇼핑몰에서 로그인 안한상태에서 특정 상품 클릭했을 때 다이어로그 띄우고 로그인 하게 하기url은 그대로 있게하면서... 이럴 때 쓰기 좋음 ) > Uplovtes 버튼 작동- routes.ts route("/:postId/upvote", "features/community/pages/upvote-post-page.tsx"),추가 - post-page.tsximport { Breadcrumb, BreadcrumbItem, Breadc..
#8 Private Pages > 프라이빗 페이지들을 꾸며보자. (로그인 된 유저들만 접속 가능한 페이지들) 먼저 커뮤니티 게시글 작성 하는 페이지 - mutations.tsimport { SupabaseClient } from "@supabase/supabase-js";import { Database } from "~/supa-client";export const createPost = async ( client: SupabaseClient, { title, category, content, userId, }: { title: string; category: string; content: string; userId: string; }) => { const { data: catego..
#7 Authentication > supabase를 이용해 인증을 구현해보자npm install @supabase/ssr @supabase/supabase-js 설치 >supa-client.tsimport { createBrowserClient, createServerClient, parseCookieHeader, serializeCookieHeader,} from "@supabase/ssr";import type { MergeDeep, SetNonNullable, SetFieldType } from "type-fest";import type { Database as SupabaseDatabase } from "database.types";export type Database = MergeDeep, "aut..
#6 Public Pages > products 페이지의 db값을 가져와보자 - features/products/queries.tsimport { DateTime } from "luxon";import client from "~/supa-client";export const getProductsByDateRange = async ({ startDate, endDate, limit,}: { startDate: DateTime; endDate: DateTime; limit: number;}) => { const { data, error } = await client .from("products") .select( ` product_id, name, descriptio..
#5 Data Loading Strategies 데이터를 SUPABASE 에서 가져오는 방법은 크게 3가지가 있다.1) DRIZZLE - 비교적 복잡2) supabase client - 간단 / 관계형으로 쓸 때는 코드가 지저분해 보일 수 있고 유지보수가 어려울 수 있음3) view - row sql구문을 사용해서 supabase에 저장하고 불러오는 방법 아래 설명에서는 drizzle을 제외한 supabase client와 view만 다룬다. > drizzle orm대신에 supabase 클라이언트 사용해보기drizzle orm은 sql 구문도 알아야하고, 관계가 엮여 있을 경우 복잡해진다. 그래서 supabase 클라이언트 orm을 대신해서 사용해보자 npm install @supabase/supabase-js 설치 - env파일에 SUPABAS..

티스토리툴바