본문 바로가기

분류 전체보기402

Supabase 셋업 이후 TanStack Query 커스텀 훅으로 fetch 전역 공유하기 주의Supabase 라이브러리에서 제공하는 내장 함수가 더 좋다.Supabase는 기본적으로 REST API를 지원하기 때문에 아래의 방식이 잘 작동되지만 굳이 Axios Fetch를 보내는 것을 권장하진 않는다.준비물Supabase Project URLAnon-key(Public)라이브러리: axios, TanStack Query파일 트리node_modulespublicsrc assets components api axiosInstance.js hooks usePlaces.js App.jsx main.jsxindex.htmlpackage.json.env.gitignore...파일트리는 위 내용이 전부가 아니고, 기본 파일은 똑같다. 아래 두 개의 파일은 새로 생성.. Programing/React 2024. 6. 17.
로컬에서 브랜치 생성, 삭제하기 브랜치 생성git checkout -b 브랜치이름브랜치 삭제현재 삭제할 브랜치라면, dev 또는 main 브랜치로 이동 후 삭제해야 함.// 다른 브랜치로 이동 후git checkout dev// 브랜치 삭제git branch -d 삭제할브랜치명 Programing/Git 2024. 6. 17.
Supabase Quick Start Supabase란?Backend-as-a-Service(BaaS) 서비스.대표적으로 AWS Amplify, Firebase, Supabase가 있다.관계형 데이터베이스를 지원하는 것이 특징이다.무료 요금제 사용량무제한 API dycjd월 50,000명의 활성 사용자500mb 데이터베이스 저장 공간, 2 Core CPU, RAM 1GB1gb의 파일 스토리지(파일 저장 공간)월 제공 대역폭 5GB사용 방법회원가입https://supabase.com/dashboard/sign-in?returnTo=/projects SupabaseBy continuing, you agree to Supabase's Terms of Service and Privacy Policy, and to receive periodic em.. Programing/Server 2024. 6. 17.
배열.length : 배열의 아이템 개수 렌더링 하기 상황원본 배열 데이터가 있고, 이것이 몇 건인지 렌더링하여 사용자가 직관적으로 데이터의 개수를 파악할 수 있도록 하여 사용자 경험을 높이고자 한다.방법 setIsAsc(!isAsc)}> {isAsc ? '최신순' : '과거순'}{sortedData.length} 건원본데이터배열.length 메서드로 아이템의 개수를 알 수 있다. Programing/JavaScript 2024. 6. 17.
과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기 상황api로 받아 온 데이터가 id별이나 작성순서대로, 순서대로 작성이 되어 있다고 가정했을 때1번 row는 가장 오래된 데이터일 것이다. 따라서 이 데이터를  map 메서드 등을 통해 렌더링 하면 화면에는 과거 순으로 렌더링 된다. 이것을 렌더링 할 때 데이터를 거꾸로 렌더링하고, 이후부터 토글 버튼을 누르면 과거순/최신순으로 바뀌면서 렌더링 되도록 구현 해보고자 한다.방법상태 만들기import { useState } from 'react';function SponsorList() { const [isAsc, setIsAsc] = useState(false); ...상태의 초기값을 true로 주면 아래 이어지는 로직에서는 데이터가 생성된 순서대로 렌더링 되기 때문에 화면에는 역순으로 보인다.기존.. Programing/React 2024. 6. 17.

티스토리툴바