로그인 기능 구현  Web Client 에서  supabase로 로그인 구현할거임 email, password를 통한 supabase.auth.signInWithPassword({...})  진행 signIn 컴포넌트에서 코드를 추가한다.  const supabase = createBrowserSupabaseClient();  const signInMutation = useMutation({    mutationFn: async () => {      const { error, data } = await supabase.auth.signInWithPassword({        email,        password,      });      if (data) {        console.log(da..

https://supabase.com/docs/guides/auth Auth | Supabase DocsUse Supabase to Authenticate and Authorize your users.supabase.com https://lopunko.notion.site/Part-3-Supabase-Auth-1ba2621a1b5345f3b02d2059d47ac7a3 Part 3. Supabase Auth 소개 및 인증방식 기획 | NotionSupabase Authlopunko.notion.site   Supabase AuthSupabase Auth는 다양한 인증 방식을 지원하는 인증 시스템입니다.사용자 인증 및 권한 관리를 제공합니다.이메일 인증, Magic Link를 통한 비밀번호 없는 로그인, 전..

https://recoiljs.org/ko/docs/introduction/getting-started/ Recoil 시작하기 | RecoilReact 애플리케이션 생성하기recoiljs.org 전역 상태 관리 라이브러리 Recoil  예를들어 header에서 받는 검색어 데이터를  다른 컴포넌트로 전달하고자 할 때  단반향으로 전달해야해서 계속  props로 타고 넘겨줘야하는 단점이 있다.  하지만 전역으로 상태를 관리하면 이 작업이 단순화돼서 모든 컴포넌트에 바로 데이터를 공유 할 수 있음   하지만 Recoil은 기본적으로 client 라이브러리임 별도의 프로바이더를 정의 해주고 적용한다. npm install recoil   Atom: Recoil에서 atom은 상태의 단위입니다. atom은 우리..

https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com     New bucket 클릭  polices -> new policy  For full customization 클릭(비교적 간편하게 폴리쉬 생성가능)   누구나 사용가능하게 anon 으로 설정했음   이제  업로드 코드를 구현하면됨 .env 파일에 storage id 로 환경..

CRUD SERVER ACTION 구현하기  "use server";import { Database } from "types_db";export type TodoRow = Database["public"]["Tables"]["todo"]["Row"];export type TodoRowInsert = Database["public"]["Tables"]["todo"]["Insert"];export type TodoRowUpdate = Database["public"]["Tables"]["todo"]["Update"];   supabase 설정하면서 생성된 types_db.ts를 보면 todo 테이블이 생성되어 있는 것을 확인할 수 있다. actions에서 그 테이블로 작업할거기때문에 import해서 사용한다..

https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com 회원가입 진행해야함  나는 github로 인증함    new Project     비밀번호는 Generate a password를 사용해서 랜덤으로 만들어줬고 copy하여 따로 보관   생성되는데 로딩 시간이 조금 소요된다.    완료가 되면 아래와 같이 화면이 변한다.     1..

https://www.material-tailwind.com/docs/html/installation Get Started with Material Tailwind - Tailwind CSS Components LibraryRoots of UI/UX Design By Creative Tim Learn to Develop Intuitive Web Experienceswww.material-tailwind.com  npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --savenpm install @tailwindcss/typography autoprefixer --save-dev  Material Ta..

https://tanstack.com/query/v3 TanStack QueryInstead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how muchtanstack.comhttps://tech.kakaopay.com/post/react-query-1/ 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카..

https://recoiljs.org/ RecoilA state management library for React.recoiljs.org   Recoil은 전역 상태 관리 라이브러리이다.  npm install recoil   모든 state 를 모아놓는  공간 atom은 상태의 단위로, atom에 저장된 상태는 여러 컴포넌트에서 구독할 수 있습니다.import { atom } from "recoil";export const userState = atom({  key: "userState",  default: {    email: null,    name: null,  },});   Recoil 상태를 사용하려면 useRecoilState와 useRecoilValue를 사용합니다.useRecoilSta..

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations Data Fetching: Server Actions and Mutations | Next.jsLearn how to handle form submissions and data mutations with Next.js.nextjs.org  서버에서 실행되는 서버 컴포넌트와 브라우저 실행되는 브라우저 컴포넌트로 나뉘어진다.  각 컴포넌트 중에서 import해서 그대로 사용할 수 있는 서버에서 실행되는 함수다. 라고 생각하면 됨  https://www.youtube.com/watch?embeds_referring_euri=https%3A..