본문 바로가기

전체 글134

[TIL] supabase 연동 시 'url'과 'anone key'를 .env파일로 보안하는 방법 supabase를 사용할때 url과 anone key를 앱에 그대로 삽입하여 github에 올리면 보안에 취약할 수 있다.이럴때는 .env 파일에 넣어 github에 올릴 때 제외 시킬 수 있다. 그 방법을 알아보자 ! 1. supabase에 프로젝트를 생성한다. 2. 진행중인 프로젝트 앱에 'supabase'폴더 - 'supabaseClient.js'을 생성한다.(가독성 & 유지보수를 위해) 3. 진행중인 프로젝트 앱에 '.env.local' 이름의 파일을 생성한다.4. '.env.local' 파일에 supabase에 있는 'url'과 'anone key'를 넣어준다.VITE_SUPABASE_URL="프로젝트 URL"VITE_SUPABASE_KEY="프로젝트 anone key"//vite 기반으로 앱설.. 2024. 6. 28.
[CSS] reset css 파일 (input 추가) /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbo.. 2024. 6. 28.
[TIL] JavaScript fetch와 async await 사용법 1. fetch 사용법fetch : 데이터 요청을 위한 함수then : fetch가 완료되면 그때 ~라는 뜻json() : 자바스크립트 데이터로 변경하는  함수 fetch 함수를 쓰기 위해 필요한 정보 (예시 데이터 : https://developer.themoviedb.org/reference/movie-top-rated-list )API주소를 알아야함 ex) https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1메소드를 알아야 함 ex) get, post 등등 아래 예시 코드를 보며 좀 더 이해해보자! const options = { method: 'GET', headers: { accept: 'application/json' }};f.. 2024. 6. 28.
[CSS] box-shadow border 꾸미기 https://getcssscan.com/css-box-shadow-examples 2024. 6. 26.
[발표] useTransition과 useDeferredValue useTransition란복잡하거나 오래 걸리는 작업을 하는 동안 웹사이트가 부드럽게 작동할 수 있도록 돕는 도구로비동기 작업을 효율적으로 관리한다. useTransition 사용 방법1. 기본 사용법isPending : 현재 어떤 작업이 진행 중인지를 나타내는 값. 작업이 진행중이면 'true', 아니면 'false;.startTransition :  비동기 작업을 시작하는 함수. 이 함수 안에서 오래 걸리는 작업을 수행하면 된다.import React, { useState, useTransition } from 'react';function ExampleComponent() { const [isPending, startTransition] = useTransition(); const [data, .. 2024. 6. 25.
[DIL] useDeferredValue useDeferredValue는 UI 일부의 업데이트를 지연시킬 수 있는 리액트 훅이다.const deferredValue = useDeferredValue(value) 참조 useDeferredValue(value)컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져온다.import { useState, useDeferredValue } from 'react';function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ...} 매개변수 value: 지연시키려는 값이다. 어떤 타입이든 가능하다. 반환값 초기 렌더링 중.. 2024. 6. 24.
[DIL] useTransition const [isPending, startTransition] = useTransition() useTransition은 UI 를 차단하지 않고 state를 업데이트할 수 있는 React 훅이다. 참조 컴포넌트의 최상위 레벨에서 useTransition을 호출하여 일부 state 업데이트를 트랜지션으로 표시한다.import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...} 매개변수 useTransition은 매개변수를 받지 않는다.반환값useTransition은 정확히 두 개의 항목이 있는 배열을 반환한다.보류 중인 트랜지션이 있는지 여부를.. 2024. 6. 24.
[TIL] TanStack Query란 TanStack Query는 웹 개발에서 데이터를 쉽게 가져오고 서버 상태(서버와의 통신을 통해 가져오는 데이터)를 관리할 수 있게 도와주는 도구(라이브러리)이다. 이전에는 React Query라고 불렸는데 리액트 뿐만 아니라 다른 SPA 프레임워크에서도 사용 가능하기 때문에 이름이 바뀌었다고 한다.이 도구를 사용하면 웹사이트가 서버에서 데이터를 가져오거나 업데이트할 때 생기는 복잡한 문제를 더 쉽게 해결할 수 있다. 예를 들어, 블로그 글 목록이나 상품 목록을 서버에서 가져오는 작업을 쉽게 해준다.왜 TanStack Query가 필요할까?데이터를 자동으로 관리: TanStack Query는 데이터를 서버에서 가져오거나 업데이트하는 일을 자동으로 관리해준다. 만약 데이터를 가져오다가 에러가 나면, 그걸 .. 2024. 6. 21.
[TIL] useQuery 사용중 데이터가 undefined로 뜰때 supabase에 있는 데이터를 가져와서 구현하던 중처음에는 잘 구현되었으나 로직을 변경하지 않았는데도 새로고침했더니 데이터가 undefined으로 뜨면서 오류가 났다.// 오류 코드// 생략function MyPage() {// supabase에서 데이터 가져오기 const selectMapData = async () => { const { data: placeData } = await supabase.from('places').select('*'); return placeData; };// useQuery로 관리하기 const { data: mapData, isPending } = useQuery({ queryKey: ['mapData'], queryFn: selectMap.. 2024. 6. 20.
[TIL] supabase로 로그인과 회원가입 연동하기 supabase 링크 https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comsupabase 공식문서 링크 https://supabase.com/docs Supabase Docs supabase.com   1. supabase 에서 New project 만들기  비밀번호는 Generate a password로 자동생성한 후 Copy해서 .. 2024. 6. 19.
[발표] useMemo와 useCallback useMemo란?컴퓨터나 스마트폰에서 프로그램이 작업을 더 빠르고 효율적으로 할 수 있게 돕는 도구이다.반복해서 계산해야 하는 값이 있다면 미리 저장해두었다가 다음에 바로 꺼내어 쓸 수 있다. useMemo의 사용법const cachedValue = useMemo(calculateValue, dependencies)calculateValue : 캐시 저장할 함수 dependencies : calculateValue 코드 내에 있는 모든 반응형 값(props, state, 모든 변수와 함수 포함 가능)메모이제이션( memoization ): 'useMemo'는 함수의 반환값을 기억하고, 의존성 배월의 값이 변경될 때만 함수가 다시 실행된다. 그렇지 않으면 이전에 계산된 값을 반환한다.    * 메모이제이션.. 2024. 6. 18.
[DIL] useCallback useCallback(fn, dependencies)최상위 컴포넌트에서 useCallback을 호출하여 리렌더링 사이에 함수 정의를 캐시한다.import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수 fn: 캐시하려는 함수 값이다. 어떤 인자도 받을 수 있고 어떤 값이라도 .. 2024. 6. 18.

티스토리툴바