💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, auth.users에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. 📍 커스텀 유저 테이블 (직접 만든 유저 테이블)supabase에 기본으로 존재하는 `auth.users`테이블에 데이터가 추가될 때 직접 생성한 회원 테이블(이하 `public.userInfo`)의 정보도 같이 추가할 수 있다. 굳이 또 다른 사용자 테이블을 생성하는 이유는 사용자의 추가적인 데이터를 관리하기 위함이다. 예를 들어 `auth.users` 에서 기본적..
💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, auth.users에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. [Supabase & React 회원가입 구현 #1]📍 로그인/* 기타 코드 생략 */const signinFunction = async (email, password) => { const { data, error } = await supabase.auth.signInWithPassword({ email: "example@email.com", passwo..
💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, `auth.users`에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. 📍 회원가입방법은 매우 간단하다. 아래 함수만 실행 하면 가입이 완료 된다.const signupFunction = async () => { const { user, session, error } = await supabase.auth.signUp({ email: "example@email.com", password: "example-password"..
1. 패키지 설치yarn add @supabase/supabase-js 2. supabaseClient.js 생성import { createClient } from "@supabase/supabase-js";const SUPABASE_PROJECT_URL = "SUPABASE_PROJECT_URL";const SUPABASE_ANON_KEY = "SUPABASE_API_KEY";const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);export default supabase;`url`과 `key`를 `createClient`에 주입반환 받은 `supabase` export다른 곳에서 import해서 사용🚨 주의url, key는 절..
ESLint를 설치하고 React 프로젝트를 하다보면 자꾸 뭐 prop 어쩌구 거슬리게 하는 친구가 있다. 프로젝트 root경로에 있는 `eslint.config.js` 파일을 잠깐 손봐주도록 하자. 그럼 rules : { .... } 속성이 보일텐데 여기에 아래 텍스트만 하나 추가해주면 된다 ."react/prop-types": "off" 전체 rules rules: { ...js.configs.recommended.rules, ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, 'react/j..
💡 공식 문서 react-toastifyReact notification made easy. Latest version: 10.0.5, last published: 5 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2566 other projects in the npm registry using react-toastify.www.npmjs.com 대충 저렇게 생김새와 시간 설정 등 다양하게 꾸밀 수 있는 토스트 라이브러리 공식 문서
코드의 변경점을 저장하려면 우선 `git` 초기화부터 해야한다. 💡 깃 초기화 방법 [git] 깃 초기화 | 소스 코드를 잘 관리하자gitgit은 소스코드의 변경 사항을 추적 및 관리하는데에 사용된다. 코드의 변경 사항들이 전부 기록된다. 개인 프로젝트 및 팀 프로젝트를 관리 할 때 아주 요긴하게 사용된다. git 설치1. git을reactjy2.tistory.com git add - 변경된 파일 추가깃으로 관리되는 디렉토리내의 변경 사항들을 스테이징 영역에 추가할 때 `git add` 명령어를 사용한다. 오직 스테이징 영역에 추가하기 위해서 사용되는 명령어이다. (변경 이력을 저장하려면 스테이징 영역에 있는 대상을 커밋해주어야함. 뒤에 나옴) 대충 `new_file.js`라는 파일을 추가하고..
단일 데이터 가져오기 getDoc() 컬렉션 '문서' 가져오기 (문서 참조)const docRef = doc(collection(db, "{collection}"), "{id}");"{`collection`}" : 참조할 컬렉션 명을 넣으면 된다. "{`id`}": 해당 컬렉션에서 찾을 문서`id`를 넣으면 된다.그럼 컬렉션의 id에 맞는 문서를 `docRef` 변수에서 참조할 수 있다. 문서의 데이터 가져오기const docSnap = await getDoc(docRef);docSnap.data();`getDoc()`: 문서를 참조했던 `docRef` 변수 전달문서의 `고유id`를 넣어 놨기 때문에 단일 데이터 가져옴 (조건에 맞는)`docSnap` 변수에 데이터를 포함한 각종 정보 저장`doc..
gitgit은 소스코드의 변경 사항을 추적 및 관리하는데에 사용된다. 코드의 변경 사항들이 전부 기록된다. 개인 프로젝트 및 팀 프로젝트를 관리 할 때 아주 요긴하게 사용된다. git 설치1. git을 사용하려면 설치를 해야한다. 아래 주소에서 잘 다운받고 대충 설치하면 된다. (전부 기본값으로 설치했음) Git git-scm.com git 초기화프로젝트를 `git`으로 관리하기 위해서는 초기화를 최초 1회 진행해야 한다. `git`으로 관리할 프로젝트 폴더로 이동한다. 터미널에서 `git init` 명령어를 입력한다. (최초 1회만)입력 후 폴더 내에 `.git` 이 생성된걸 확인한다.여기까지만 하면 이제부터 이 폴더는 git으로 관리되는 폴더가 되는 것이다. 💡 초기화를 했으면 코드를 저장 ..