본문 바로가기

전체 글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.
React BootStrap : 화면 중앙에 나타나는 로딩 스피너 인라인 스타일링import { Spinner } from 'react-bootstrap';.. if (isLoading) return ( ); 스피너는 기본적으로 부트스트랩 문서에 있지만, 화면 정중앙 정렬하는 속성이 복잡해서 작성한다.스타일드 컴포넌트로 재사용만약 저 스타일을 여러 군데서 쓸 것 같다거나, 인라인 스타일링이 복잡해서 분리하고 싶은 경우 Styled-components로 정의하고 export 한 후 다른 곳에서 재사용 해도 된다.import styled from 'styled-components';const SpinnerContainer = styled.div` display: flex; justify-content: center; align-items:.. Programing/CSS 2024. 6. 17.
배열로 렌더링 된 아이템 리스트 클릭 시 디테일 페이지에 정보 넘기기 상황이런 식으로 데이터를 받아와 렌더링하는 배열이 있다.이것을 클릭했을 때 디테일 페이지로 해당 아이템의 정보만 디테일 페이지로 넘기는 방법에 대해서 간단하게 알아 보겠다. 방식은 여러 가지가 있을 수 있다.리스트가 렌더링 된 페이지에서 해당 아이템의 고유한 값(예를 들어 id 컬럼)을 URL 파라미터로 넘겨서 디테일 페이지에서 다시 fetch를 받은 뒤, 그 fetch 의 응답값을 다시 filter 하여 find 메서드로 id와 일치하는 값을 찾아오는 방법필요한 정보가 리스트 렌더링 페이지에서 아이템에 다 담겨 있으니 그것을 그대로 디테일 페이지로 넘기는 방법데이터가 여러 사람에 의해 실시간으로 변할 가능성이 있다면 1번의 방법이 좋겠고, 그럴 가능성이 적다면 굳이 디테일 페이지에서 한 번 더 fetc.. Programing/React 2024. 6. 17.
포매팅 함수 - 데이터를 원하는 형식으로 변환하기 상황원본 데이터 날짜 형태가 2022-08-31T12:49:00.000Z이러한 형태로 저장되어 있어 데이터를 fetch 해 와서 렌더링 시킬 때 저대로 렌더링 됨.이것을 2024년 6월 17일 과 같은 형태로 변환하고자 함. 이 외에도 금액이 100000과 같이 나오는 것을 세 자리수 마다 콤마를 찍는 포매팅 함수 등도 여러 가지 알아보고자 함.포매팅 함수 작성YYYY년 MM월 DD일const formatDate = (dateString) => { const options = { year: 'numeric', month: 'long', day: 'numeric' }; const date = new Date(dateString); return date.toLocaleDateString('ko-KR',.. Programing/JavaScript 2024. 6. 17.
TanStack-Query Quick Start TanStack Query 패키지 설치yarn add @tanstack/react-queryGET 요청 (useQuery)fetch 함수 활용// GET 요청할 컴포넌트 또는 최상단 컴포넌트// App.jsximport { useQuery } from '@tanstack/react-query';const apiUrl = '~~~';function App() { const { data, error, isLoading } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await fetch(apiUrl); if (!response.ok) { throw n.. Programing/React 2024. 6. 17.
2024-06-16 (나의 생각) AI 시대와 개발자 AI의 무서운 발전 속도AI의 발전 속도가 무섭다. 인공지능 sora 등 출시되는 족족 세상을 놀라게 하는 인공지능 모델들이 연이어 발표되고 있고, 심지어 악용 우려까지 있을 정도로 기술의 완성도가 높다 보니 상용화 하지 않는 기술도 많이 있다.그런데 놀랍게도 난 개발 공부를 하기 이전, 전혀 다른 직군에서 일을 해 왔는데 그 때는 AI의 발전에 대한 소식을 간간히 접하긴 했어도 이렇게 빠를 것인 줄은 체감할 수 없었다.컴퓨터와 관련이 크게 있지 않은 직업군에서는 AI의 발전이 나의 일을 대체하기에는 당장은 시기상조라고 생각하는 사람들이 대부분일 것이다. 개발을 공부 하며 ChatGPT를 누구보다 많이 하고 있다. 만약 인공지능 챗봇이 탄생하기 전이었다면 튜터님들께 계속 방문하며 막히는 점을 물어봐야 했.. Programing/TIL 2024. 6. 16.

티스토리툴바