lyuna's story

usetransition이란? 리액트 자바스크립트 라이브러리에서 사용하는 훅 중 하나로, UI를 차단하지 않고 상태를 업데이트 할 수 있으며 사용자가 느끼는 반응성을 개선하기 위해 사용된다.특정 작업이 오래 걸릴 때 사용자에게 더 부드럽게 보이도록 하는데 도움을 준다. const[isPending, startTransition] = useTransition(); useTransition은 두개의 항목이 있는 배열을 반환한다.1.isPending : 플래그는 대기중인 transition이 있는지 알려준다.2.startTransition : 함수는 상태 업데이트(setState) 를 transition으로 표시해주는 함수이다. useTransition는 어떤 경우에 사용할까? 성능이 좋지 않게 되면 빠른 업..

flex-wrap- 요소들을 정렬하는 기능 flex-wrap:wrap;  flex-wrap 속성은 정렬된 요소들의 총 넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해주는 기능. 이 속성은 부모 요소에 display:flex;를 꼭 함께 써줘야 한다. flex-wrap 속성을 사용하지 않으면, 기본값인 flex-wrap:nowrap이 적용되어 정렬된 요소들의 넓이는 부모 넓이에 맞게  자동축소된다.  flex wrap을 적용하여 국가 api의 정보를 정렬

useDefferedValue란? 특정 값의 업데이트를 지연시키면서, UI가 더 부드럽게 업데이트 되도록 도와준다. 이를 통해 사용자는 브라우저가 작업을 완료하기를 기다리지 않고, 즉각적인 반응을 경험할 수 있다. 주로 사용자가 입력을 하거나, 스크롤 할 때 처럼 빠르게 변화하는 값을 처리할 때 유용하다. useDeferredValueUI 일부 업데이트를 지연시킬 수 있는 리액트 훅const deferredValue = useDeferredValue(value)  레퍼런스 컴포넌트의 최상위 레벨에서 useDefferedValue를 호출하여 지연된 버전의 값을 가져온다import { useState, useDeferredValue } from 'react';function SearchPage() { co..

useTransition이란? React에서 비동기 작업을 처리할 때 유용한 Hook이다. 주로 사용자 인터페이스(UI)가 즉각적으로 반응하면서도, 시간이 걸리는 작업을 백그라운드에서 처리하고 싶을 때 사용된다. 이 Hook을 사용하면 사용자 경험을 개선할 수 있다. 쉽게 말해, 무거운 작업을 실행하더라도 UI가 매끄럽게 반응하도록 도와준다.  레퍼런스 컴포넌트의 최상위에서 useTransition을 호출하여 일부 state업데이트를 Transition으로 표시. import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...}  반환값 use..

타입스크립트는 왜 만들어졌는가 ? 존재하는 이유가 뭔지 왜 사람들이 자바스크립트 버리고 타입 스크립트로 넘어오는지 ?? >> 바로 안정성 때문 더 정확히 말하면 타입 안정성 때문 타입 안정성 덕분에 코드의 버그가 줄어들게됨 , 런타임 에러가 줄어들고 생산성도 늘어나게 된다. 자바스크립트는 매우 유연한 언어이다.  개발자가 코드를 잘못짜도 이해하려하고 도와주려한다. 자바스크립트에도 true/false같은 boolean 타입이 있다. Number, string 타입도 있음 배열, 객체같은 자료구조도 있음 타입스크립트와 타입이 같음 그러나 자바스크립트는 개발자를 이해해주려하고 에러를 보여주지않으려함 그래서 멍청한 코드를 작성해도 에러가없음boolean인 false는 string이 됨 배열의 마지막에서다른 언어..

Tanstack query란? 서버 상태를 관리하기 위한 라이브러리로, 데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공한다.> 개발자는 이전에 비해 훨~씬 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있다. 주요 기능 데이터 fetching 및 캐싱: Tanstack Query 는 데이터를 자동으로 캐싱하여 동일한 요청을 반복적으로 하지 않도록 한다. 이는 네트워크 요청을 최소화하고 성능을 향상시킨다.자동 갱신: 데이터를 stale(구식)로 간주하면 자동으로 최신 데이터를 가져온다. 이 기능을 통해 항상 최신 상태의 데이터를 유지할 수 있다.배경에서 갱신: 사용자가 현재 페이지를 보고 있지 않아도 배경에서 데이터를 갱신할 수 있다.간편한 리트라이: 네트워크 요청이 실패하면 자동으로 다..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅입니다. useMemo에서 memo는 memoization을 뜻하는데 해석하자면 '메모리에 넣기' 라는 의미로컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 쉽게 말해서 , 동일한 값을 반환하는 함수를 반복적으로 호출해야 하는 경우처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내 재사용하는 것입니다.  useMemo의 구조에 대해 간단하게 살펴봅시다const value = useMemo(() => { return calculate();}. [item..

우선 supabase 가입 후 프로젝트를 생성한다. https://supabase.com/dashboard/projects Dashboard | Supabase supabase.com    프로젝트명을 기입하고 Generate a password를 클릭하면 비밀번호를 생성해준다꼭 복사해서 저장해둘것! 그리고 프로젝트에 돌아와서 src폴더 안에 supabase 폴더를 만들고, 그 안에 supabaseClient.js 파일을 생성한다.  그리고 파일 최상단 위치에 .env.local 파일을 생성한다.  그리고 파일 안에 코드를 삽입한다. .env.local 파일 안에는 anon Api Key 와, URL을 복사해서 붙여넣는다. 그럼 이제 supabase와 내 프로젝트가 연결되었다 ! 이제 시작!! 우선 회원..

useCallback이란? useCallback은 React에서 성능 최적화를 위해 사용하는 훅으로 , 메모이제이션(memoization)된 콜백 함수를 반환하는 역할을 한다.즉, 함수의 재사용을 도와 불필요한 함수 재생성을 방지한다.레퍼런스 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { refer..

다른 Hook 의 종속성 메모화 컴포넌트 본문에서 직접 생성된 객체에 의존하는 연산이 있다고 가정하자.function Dropdown({ allItems, text }) { const searchOptions = { matchMode: 'whole-word', text }; const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); }, [allItems, searchOptions]); // 🚩 주의: 컴포넌트 본문에서 생성된 객체에 대한 종속성 // ... 이렇게 객체에 의존하는 것은 메모이제이션의 목적을 무색하게한다. 컴포넌트가 다시 렌더링 되면 컴포넌트 본문 내부의 모든 코드가 다시 실행되기 때문이..