본문 바로가기

전체 글393

Tailwind :: 마우스 호버 시 살짝 커지는 애니메이션 Programing/CSS 2024. 6. 30.
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.
vercel :: 리액트 프로젝트 404 배포 오류 해결 방법 메인 도메인에서는 잘 작동하나, 라우트 페이지에서 리프레쉬 되거나 새로고침을 누르면 404 에러가 뜬다.Next.js 프로젝트에서는 이런 문제가 없으나 React.js에서는 이런 문제가 발생한다. 해결방법루트 폴더에 vercel.json 폴더 생성아래 코드 복붙{ "routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/index.html" }]} Programing/Server 2024. 6. 29.
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.
React-router-dom을 활용한 페이지 라우팅(디테일 페이지) 패키지 설치yarn add react-router-dom폴더 및 파일 생성하기📦 ├─ .env ✅├─ .eslintrc.cjs├─ .gitignore├─ README.md├─ index.html├─ package.json├─ public│  └─ vite.svg├─ src│  ├─ App.tsx│  ├─ api│  │  └─ api.ts ✅│  ├─ main.tsx│  ├─ pages│  │  ├─ SponsorDetail.tsx ✅│  │  └─ SponsorList.tsx ✅│  ├─ routes│  │  └─ routes.tsx ✅│  └─ vite-env.d.ts├─ tsconfig.app.json├─ tsconfig.json├─ tsconfig.node.json├─ vite.config.ts└.. Programing/React 2024. 6. 27.

티스토리툴바