본문 바로가기

Programing375

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.

티스토리툴바