전체 글

[프로젝트 회고록] 주식 거래 서비스 (STOCK-RADAR)

✨ 시작하게된 배경 이번 프로젝트는 이전 프로젝트를 끝내고 react-query에 대해서 학습을 하고난 뒤 react-query를 사용하여 프로젝트를 진행하여 더 깊게 알고싶어 진행하게된 프로젝트다. 주제를 선정하게된 배경은 전년도 중반기쯔음 가벼운 마음으로 주식을 시작하였었는데 주식 차트를 계속 보고 구석구석 존재하는 기능들을 직접 사용해보고 실시간으로 계속 변동되는 데이터들을 보며 흥미를 느껴 나도 주식 사이트를 만들어보고 싶다고 생각이 들었었던적이 있어 그 때의 기억을 살려 주식이라는 주제로 프로젝트를 진행하게 되었다. ✨ 프로젝트를 진행하며 느낀 점 (힘들었던 것, 배운 것 등등) 지속적으로 변하는 데이터를 직접적으로는 접하지 못했던터라 해당 데이터들을 모든 컴포넌트에서 데이터가 일관성 있게끔 ..

[ReactQuery] useSuspenseQuery를 사용해서 Suspense 성능 개선 및 최적화를 해보자 !

❗️서론 최근 프로젝트를 진행하며 react-query의 Suspense를 적용하는 과정에서 그림에서 보는 것 처럼 데이터가 폭포(Waterfall)처럼 순차적으로 호출이 되어 로딩 화면이 장시간 노출되어버리는 골머리를 앓고있었다. 그러던 중에 링크드인의 일촌분께서 해당 방법을 해결할 수 있는 방법을 공유해주셔서 드디어 해결을 하였다 ... https://tech.kakaopay.com/post/react-router-dom-csr-prefetch/ CSR 환경에서 Suspense로 발생한 문제 해결하고 성능 개선하기 | 카카오페이 기술 블로그 react-router-dom 기반의 CSR 환경에서 Suspense를 사용하면서 발생한 순차적 API호출 문제를 프리패칭을 통해 개선한 경험을 공유합니다. te..

[ReactQuery] useMutation과 useQuery에서 TypeScript 적용하기

❗ useMutation에 TypeScript 적용 export function useMutation ✔ TData: Mutate 함수가 반환하는 데이터의 타입) const { data } = useMutation(/* mutateFn */); ✔TError: Mutate 함수 실행 중 발생할 수 있는 오류의 타입) const { error } = useMutation(/* mutateFn */, { onError: (err) => console.error(err) }); ✔TVariables: Mutate 함수에 전달되는 변수의 타입 const { mutate } = ..

Feconf 2023 후기 !

FEconf 2023 !!!! 올해부터 jsconf가 열리지 않아 좌절하고 있던 찰나에 FEconf가 열린다는 소식을 듣자마자 목이 빠져라 기다렸던 컨퍼런스이다. 티켓 구매 일자가 뜸과 동시에 대표님에게 달려가서 이 컨퍼런스에 참여하고 싶으니 지원을 해달라고 부탁을 하였고 대표님께서 흔쾌히 허락해주시는 덕에 든든한 마음으로 컨퍼런스를 기다릴 수 있었다. 티켓 구매 당일에는 거짓말 안치고 5초도 안되는 시간안에 매진이 되어버리는 대참사를 겪었고 희망을 끈을 놓지않고 끊임없이 새로고침을 하여서 결국엔 컨퍼런스 티켓을 손에 넣게 되었다 ! 정말 .... 피 말리는 경쟁이였다. 그리고 또 하나의 청천벽력..... 10월 15일부터 21일까지 도쿄 출장이 잡혀버렸다 그래서 나는 15일 도쿄로 출국하여 21일 도쿄..

[자바스크립트 / Vanilla JS] 함수 참조 (Function Reference)과 함수 호출 (Function Call)에 대해서 알아보자

함수 참조와 함수 호출은 JavaScript 및 TypeScript와 같은 프로그래밍 언어에서 중요한 개념이다. 이 두 개념의 차이점은 함수가 어떻게 다뤄지는지와 언제 실행되는지와 관련이 있다. ❗ 함수 참조 (Function Reference) 함수 참조는 함수 자체를 가리키는 것이다. 이것은 함수를 호출하지 않고 함수의 이름을 변수에 할당하거나 다른 함수에 전달하는 것을 의미한다. 함수 참조를 사용하면 함수를 나중에 호출하거나 다른 곳에서 호출할 수 있다. 예제: function sayHello() { console.log("Hello!"); } const helloFunction = sayHello; // 함수 참조 helloFunction(); // 함수 호출 ❗ 함수 호출 (Function Ca..

[React.js] Recoil의 atom, atomfamily와 selector, selectorFamily에 대해서 알아보자

❗ atom atom은 단일 값 또는 객체를 나타내는 불변 상태를 정의하고 애플리케이션 전체에서 공유된다. 모든 컴포넌트에서 동일한 atom을 사용하며, 해당 atom에 대한 변경 사항은 모든 구독 컴포넌트에 자동으로 전파된다. ✔ 예제 import { atom, useRecoilState } from 'recoil'; const counterState = atom({ key: 'counterState', default: 0, }); function CounterComponent() { const [count, setCount] = useRecoilState(counterState); return ( Count: {count} setCount(count + 1)}>Increment ); } 해당 예제는 ..

[ReactQuery] useMutation에 대해서 알아보자 ! (feat. Optimistic Updates, invalidateQueries)

먼저 useQuery와 useMutation의 차이점에 대해 가볍게 알아보자. ❗ useQuery와 useMutation 차이 1. no cache data : useMutation은 일회성이고 fetching이나 reFetching 그리고 업데이트할 데이터가 없기 때문에 캐시 데이터라는 정의가 존재하지 않는다. 2. no retries : 직접 재시도를 구현할 수는 있지만 기본적으로는 재시도가 없다. (useQuery는 기본적으로 3번 재시도 함) 3. no refetch : 관련된 데이터가 없으므로 refetch가 없다. 4. no isLoading vs isFetching : useMutation은 캐시데이터도 없고 isLoading은 데이터가 없을 때 이루어지는 fetching이기 때문에 isLo..

[ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling)

❓ refetch refetch와 refetch가 일어나는 조건에 대해서는 해당 링크에서 가볍게 다뤘으니 살펴보도록 하자. ❗ refetch와 관련된 옵션 ✔ refetchOnMount 이 옵션은 boolean 타입을 가지며 구성 요소가 마운트될 때 (즉, 처음 렌더링될 때) 데이터를 다시 가져와야 하는지 여부를 결정한다. 'false'로 설정되면 구성 요소가 마운트(초기 렌더링)될 때 데이터를 자동으로 다시 가져오지 않고, 'true'로 설정하면 구성 요소가 마운트 될 때 데이터를 자동으로 다시 가져온다. ✔ refetchOnWindowFocus 이 옵션은 boolean 타입을 가지며 창이 포커스를 얻을 때 데이터를 다시 가져와야 하는지 여부를 결정한다. 'false'로 설정되면 창이 포커스를 얻을 때..