본문 바로가기

Programing/Server21

Supabase 데이터 전처리 :: 텍스트 컬럼을 구분자를 기준으로 여러 컬럼으로 분리하기 주의prostgresSQL에 익숙하지 않은 경우 export CSV로 데이터 테이블을 필수로 백업을 하시고 진행하시기를 바람.아래 사진을 보시고 글쓴이의 날짜 데이터 형식과 다르다면 본인 글에 있는 SQL 쿼리를 그대로 쓰지 마시기 바람.오전/오후로 구분하고 시간은 각각 00~12로 나가는 방식임.구분자로 마침표 (.)가 있음.중간에 공백이 많이 들어 가 있음.상황 구글 스프레드시트에서 제공하는 서식을 사용하다 보니 데이터를 가공하기 어려운 형태로 되어 있어 날짜와 시간을 date 컬럼에 하나, time 컬럼에 분리하고자 한다.개선SQL 쿼리를 어디서 입력해야 하는지 모르겠다면 본인이 작성한 supabase 전처리 포스트 중 첫번째 포스트를 보면 사진과 함께 자세히 남겨두었다.SELECT trim(.. Programing/Server 2024. 6. 28.
Supabase 데이터 전처리 :: 여러 컬럼을 하나의 jsonb로 병합하기 주의혹시 모르니 데이터 백업은 꼭 하고 진행할 것.전체 데이터 선택 후 export CSV를 해서 파일로 남겨두면 추후에 다시 import 할 수 있음.상황 사진과 같이 지출내용1~3이라는 컬럼에 각 내용을 하나씩 관리하고 있었다.이 내용은 단순한 스프레드시트로 관리하고 있던 것이라 한 셀에 json 형식으로 관리하고 있지 않았다.이렇게 되면 지출내용을 사용자가 여러 개 입력하면 입력한 만큼 컬럼을 미리 만들어줘야 하고, 입력값이 없는 경우에는 null이 너무 많이 생긴다.개선supabase와 같은 SQL은 json 보다 jsonb 형식을 더 권장한다고 경고창이 나온다. 아래와 같은 형식으로 입력 가능하다.{ "details": [ " 중성화 수술 책임비 입금", "2번 내용", "3번.. Programing/Server 2024. 6. 28.
Supabase 회원가입 + 별도 데이터 테이블에 동시 기록하기 상황Supabase에서 기본으로 제공하는 이메일 회원가입을 하면 Supabase의 authentication에 유저의 메타데이터가 저장된다.그런데 데이터테이블의 관점으로 봤을 때 이 메타 데이터는 한 셀이 json 형태의 객체로 저장되어 있어 데이터를 가공하기가 복잡하다. 코드가 복잡해질 수 있다.따라서 사용자에게 닉네임, 집 주소 등 받아야 하는 데이터가 많으면 많아질 수록 이 기본 기능만으로는 부족함을 느낄 수 있고, 찜하기, 댓글 기능 등 다른 데이터들과 관계형 데이터베이스 기반으로 외래 키를 설정하는 데 있어서도 부족함이 있다.따라서 이런 경우 별도로 user 데이터를 만들어 관리하는 것이 더 편리하다.전체 코드import React, { useEffect, useState } from 'reac.. Programing/Server 2024. 6. 23.
supabase CRUD - 이미지 파일 선택 후 미리보기로 렌더링하기 상황아래와 같이 input type = file만으로 이미지를 선택하게 되면, 해당 이미지가 잘 선택되었는지 사용자가 알기가 어렵다.사용자 경험을 증대시킬 여러 방식이 있을 수 있겠다. 선택한 파일의 파일명을 렌더링 해주어도 된다. 하지만 직접적으로 어떤 이미지를 선택했는지 보여주고자 한다. 일단 이미지 선택하기 버튼을 누르면 이미지가 supabase 서버로 업로드 되는 로직이 이미 구현되어 있다. useEffect(() => { if (image && typeof image !== 'string' && image instanceof File) { console.log('이미지 선택됨 =>', image); handleImgUpload(image); } }, [image].. Programing/Server 2024. 6. 20.
supabase 카카오 소셜 로그인 기능 구현하기 참고자료supabase 공식문서https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.comKakao Developers 사이트 접속아래 카카오 개발자 사이트 접속 후 로그인하기.https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.com애플리케이션 추가하기상단 내 애플리케이션 - 애플리케이션 추가하기.프로젝.. Programing/Server 2024. 6. 20.

티스토리툴바