본문 바로가기

분류 전체보기402

Supabase SQL 쿼리로 민감한 데이터 한방에 별표 처리하기 상황supabase에 민감한 자료가 있다.그런데 이것을 API 호출로 받아와서 렌더링 해야 하는데 부담스러운 상황이다.일단 데이터를 받아오고 프론트엔드에서 코드로 텍스트를 변환하는 방법도 있겠지만, CSR을 하지 않는 이상 네트워크 탭에서 응답값을 전부 볼 수 있기 때문에 SSR에서는 해결책이 아니다.처음부터 별표처리된 데이터를 받아오는 것이 가장 안전하겠다.그런데 원본 데이터를 훼손시킬 순 없으니 별표 처리 된 데이터 컬럼을 만들어서 그것을 가져오려고 한다.방법UPDATE bankstatementSET securedname = CONCAT( LEFT(name, 2), REPEAT('*', GREATEST(LENGTH(name) - 2, 0)));bankstatement : 데이터 베이스 테이블 이름.. Programing/Server 2024. 6. 29.
supabase jsonb 컬럼 타입 지정 방법 export interface Expense { details: {content: string[]};} 아래와 같은 데이터 형식을 지정할 때 쓴다.{ "content": [ "계좌개설 후 계좌관리자 토스머니 자동으로 이동된 건", "", "" ]} Programing/Server 2024. 6. 29.
실수로 GitHub에 올려버린 .env 지우기 gitignore에 환경변수 파일 설정# .gitignore.env환경변수 파일 캐시에서 제거git rm --cached .env변경사항 커밋git commit -m "Remove .env file from repository"변경사항 pushgit push origin main  위 과정은 리포지토리에서 파일만 삭제하는 것이고 커밋 로그는 그대로 남아 있어서 이곳에서 볼 수 있으니, 필요하면 커밋 로그를 지우는 명령어를 사용해서 추가 조치한다. Programing/Git 2024. 6. 29.
React Tailwind :: 모바일 고려 Layout 컴포넌트 Layout 컴포넌트// src/components/Layout.tsximport React, { ReactNode } from 'react';type LayoutProps = { children: ReactNode; }const Layout : React.FC = ({ children }) => { return ( {children} );};export default Layout;max-w-full: 모바일 장치에서 컨테이너가 전체 너비를 차지하도록 설정sm:max-w-screen-sm: 작은 화면에서 최대 너비를 screen-sm으로 설정md:max-w-screen-md: 중간 크기 화면에서 최대 너비를 screen-md로 설정lg:m.. Programing/CSS 2024. 6. 29.
Supabase + TanStack Query + Intersection Observer :: infinite scroll 구현 개발 환경ReactViteTypeScript사용 라이브러리TanStack QuerySupabaseReact-Intersction-Observer패키지 설치yarn add @tanstack/react-query @supabase/supabase-js react-intersection-observer 단, supabase 셋업은 완료된 상태로 가정함.데이터 fetch 함수 작성supabase에서 어떤 데이터를 가져올 것이고, 데이터를 스크롤 한 번당 얼마나 끊어서 가져올 것인지 설정하는 함수이다.별도 컴포넌트로 작성해도 되고, useInfiniteQuery를 작성한 커스텀 훅 바로 위에서 작성해도 좋다.아니면 fetch만 모아 놓은 api.ts 같은 파일에 다른 fetch 함수들과 모아서 작성해도 좋다.im.. Programing/React 2024. 6. 29.

티스토리툴바