time to wander

React를 사용하여 프로젝트를 만들 때 성능을 최적화하기 위한 방법으로 많이 거론되는 것이 useMemo, useCallback, React.memo 훅을 사용하는 것이다. React.memo는 비교적 이해하기 쉬워서 실제로 프로젝트에서도 사용했었는데 useMemo와 useCallback은 잘 이해가 가지 않아 아예 도입하지 않았던 기억이 난다. 개념에 대한 이해 보다는 어떻게 사용해야 똑똑하게 사용할 수 있는 건지 잘 와닿지 않았었다. 어떻게 성능을 최적화하는 걸까? useMemo와 useCallback의 핵심은 메모이제이션이다. 메모이제이션이란? 메모이제이션이란 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램의 실행 속도를 빠르게..

Defaults cached data - 더 이상 useQuery, useInfiniteQuery의 활성 인스턴스가 없는 쿼리 결과 또는 쿼리 옵저버들은 inactive 상태가 되고, 나중에 다시 사 용될 때 캐시에 남아 있게 된다. - 기본적으로 inactive한 쿼리는 5분 후에 GC 처리 된다. 즉 default cacheTime이 5분이라는 의미로, 변경하고 싶다면 cacheTime 옵션에 변경하고자 하는 시간을 설정하면 된다. - default cacheTime: 5분 (1000 * 60 * 5 ms) stale data - useQuery 또는 useInfiniteQuery 훅을 사용해서 캐시된 데이터는 기본적으로 stale한 데이터로 취급한다. - 위와 같은 default option은 전체..

(docs에 재밌는 게 보일 때마다 계속 업데이트하고 있습니당..ㅎ) State Management React에서 데이터는 단방향으로 흐르는 구조를 가지고 있다. 데이터가 위에서 아래로, 단방향으로만 흐르게 되면 동일한 상태를 여러 컴포넌트에서 구독해야 할 때(전역에서 상태를 관리해야 할 때), 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 때 등의 상황에서 Props Drilling 같은 이슈가 발생하거나 상태 관리가 어려워질 수 있다. React 에서는 Context API 라는 전역으로 상태 관리를 할 수 있게 해주는 자체적인 API를 제공하고 있지만 보다 다양한 상태 관리 관련 인터페이스들을 제공하는 Redux, MobX, Recoil 같은 상태 관리 라이브러리들이 계속해서 등장하고 있다. 위와 ..

항상 css-in-js로 styled-components만 사용하다가 emotion을 써보고 싶어서 라이브러리를 설치했다. emotion에서도 styled-components와 동일하게 GlobalStyle과 ThemeProvider API를 제공하고 있어서 우선 theme과 global 파일을 생성하여 간단한 설정을 마친 후 index.js에 임포트하였다. 그런데 임포트 하자마자 아래와 같이 export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' 라는 문구와 함께 에러가 발생했다. 'useInsertionEffect'라는 API가 export 할 수 있는 API 리스트에 없어서 발생하는 문제인 듯 ..

밈글밈글 프로젝트 코드를 리팩토링 하려고 보는데 로그인 상태 여부를 확인해서 조건부 렌더링하는 컴포넌트가 굉장히 많았다. 그런데 로그인 상태를 전역에서 관리하면서 컴포넌트에서 구독하고 있는 게 아니라 각 컴포넌트마다 웹스토리지에 유저 정보가 있는지 확인하여 로그인 상태인지, 로그아웃 상태인지를 연산하는 작업을 하고 있었다. 이미 상태 관리 툴로 리덕스를 사용하고 있었지만 사실상 서비스 운영은 종료돼서 공부하는 김에 React에서 기본적으로 제공하는 Context API를 사용하여 로그인 상태를 전역으로 관리하고, 로그인 상태가 필요한 컴포넌트에서는 구독할 수 있도록 수정해보았다. Context API란? React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로, 즉 단방향으로 흘러야 한다. 컴포넌트 dep..

깃허브 페이지로 레주메를 만들고 블로그에만 링크를 심어 놓기는 했는데..미미하겠지만 그래도 유저 트래킹을 하고 싶어서 구글 애널리틱스를 사용하기로 했다. 나는 react-ga 라이브러리를 사용했기 때문에 이전 버전인 유니버셜 애널리틱스 속성으로 계정을 생성하였다. 1. 구글 애널리틱스 계정 생성하기 계정을 생성할 때 두 번째 속성 설정 단계에서 고급 옵션의 유니버셜 애널리틱스 속성만 만들기를 선택한다. 2. index.html에 트래킹 스크립트 삽입하기 계정을 생성하고 나면 트래킹 ID가 포함되어 있는 스크립트 코드가 주어진다. 해당 스크립트를 index.html의 head 안에 삽입한다. 3. react-ga 라이브러리 설치 및 설정 react-ga 라이브러리 설치 후 실행 파일에 아래와 같이 설정한다..