도록

배경- supabase.auth를 통해 인증할 때, supabase.public.users 테이블에 데이터를 자동으로 insert 하기를 원함 방법1. users 테이블 생성2. sql editor에서 trigger 함수 생성-- 1. 기존 트리거 삭제drop trigger if exists on_auth_user_created on auth.users;-- 2. 트리거 함수 수정create or replace function public.handle_new_auth_user()returns trigger as $$declare new_json json; provider text; provider_id text; name text; picture text;begin begin -- 필드 ..

배경- supabase auth 를 통한 회원가입/로그인 시 가져오는 사용자 정보를 users 테이블에 insert 하고 싶었다.- trigger 함수(문서)를 생성해 등록했으나, 어떤 provider인지 알 수가 없어 곤란해 모든 데이터를 다 조회해보았다. 결과혹시나 개인정보로 보이는 것은 // 하고 타입 기재로 변경했으니 참고 (google 기준){ "instance_id": "00000000-0000-0000-0000-000000000000", "id": "// uuid", "aud": "authenticated", "role": "", "email": "// email", "encrypted_password": "", "email_confirmed_at": null, "invite..

supabase는 90일이 지나면 완전히 정지된다.backup 파일만 다운로드 받을 수 있는데 이 파일을 이용해서 복원하는 방법을 기록해두려고 한다. 1. backup 파일 다운로드 2. 복원시킬 신규 프로젝트 생성 후, 상단 바에 connect 클릭 3. psql 타입으로 변경 뒤, session pooler 부분 copy해 terminal에 입력한다. 더보기비밀번호가 기억나지 않는다면? 4. 처음 받았던 backup 파일을 복원하기

문제 상황테스트 페이지가 필요해서 셋팅하던 중, 테일윈드 공식 문서 대로 제일 최신 버전을 설치하니 vite.config.ts 파일에서 아래와 같은 오류가 발생했다.Type 'Plugin[]' is not assignable to type 'PluginOption' 해결책: node_modules 폴더와 lock 파일(ex. pnpm-lock.yaml, package.lock.json, yarn.lock)을 둘다 삭제하고 다시 install 받으면 해결된다. rm -rf node_modules pnpm-lock.yamlpnpm install 출처: https://github.com/tailwindlabs/tailwindcss/discussions/17541

정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 section으로 나누고, 나누어진 섹션에 아래 css을 적용시킨다.content-visibility: auto;            // 브라우저에게 해당 요소가 현재 뷰포트에 보이지 않을 때 렌더링을 건너 뛰기contain-intrinsic-size: 1000px;    // 스크롤바가 올바르게 뜨기 위해, 요소의 예상 크기를 설정 conetent-visibility가 가질 수 있는 값의 종류는?- visible : 아무런 효과 없음- hidden : 요소 생략 (dispaly:none처럼, 페이지 내 찾기/user-agent 접..

WebSocket만 써보고 SockJs는 처음 써보기에, 하나씩 기록해보려 한다.  1. install sockjs-clientyarn add sockjs-client @types/sockjs-client  2. socket 연결부의 예제 코드 추가import React, { useEffect, useRef, useState } from 'react';import SockJS from 'sockjs-client';const SocketTest = () => {  const [messages, setMessages] = useState([]);  const socketRef = useRef(null);  useEffect(() => {    socketRef.current = new SockJS('서버주소..