자바스크립트 - React.js

[ReactQuery] StaleTime과 CacheTime에 대해서 알아보자

❗ StaleTime, CacheTime React에서 cacheTime과 staleTime은 React Query라는 라이브러리에서 사용되는 옵션이다. 이 옵션들은 데이터의 캐싱 및 유효성 검사에 관련된 기능을 제어하는 데 사용된다. ❗ StaleTime ? staleTime은 데이터가 "stale" 상태로 간주되는 기간을 지정 데이터가 "stale" 상태란, 이전 쿼리 결과가 캐시되어 있지만, 그 결과가 일정 시간 동안 업데이트되지 않은 상태 staleTime은 밀리초 단위로 설정되며, 기본값은 0 staleTime이 0보다 큰 값으로 설정되면, staleTime 이후에도 이전 캐시 결과를 사용할 수 있다. 이렇게 하면 네트워크 요청을 최소화하고, 사용자 경험을 개선할 수 있다. staleTime이 ..

[React.js] axios interceptor로 refresh token 발급하기

❗ 서론 이번 글은 타프로젝트를 하다가 refresh token까지 쓸 일이 있어서 해당 기능을 구현 후 쓰는 글이다 ! https://growing-jiwoo.tistory.com/85 해당 글에서 추가적으로 refresh token을 발급받는 방법에 대해서 알아보려한다. 그러기에 이번 글은 코드와 간단한 설명만으로 짧게 다룰것이다. [React.js] axios interceptor로 axios header에 토큰 삽입하기 ❓ axios interceptor axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능이다. 요청에 인증 헤더 추가, 오 growing-jiwoo.tistory.com..

[React.js] @emotion/styled + Tailwind (feat. Twin Macro)에 대해 알아보자

❗ 서론 난 이 전 프로젝트에서 styled-components 라이브러리를 사용했었다. 하지만 더 새롭고 사람들이 많이 쓰고 좋은 !! 라이브러리를 쓰고싶다는 생각이 들었다. 그러다 찾은것이 바로 제목이 나와있는 @emotion/styled와 TailWind와 Twin Macro의 삼합. 지금부터는 질답형으로 내 생각을 풀어가겠다. 1. 왜 쓰고있던 styled-components가 아닌 @emotion/styled + Tailwind를 채택해서 사용하는가 ? 성능, 용량, 많은 이슈들과 코드 스타일의 차이도 하나하나 짚으면 좋겠지만 난 매 번 생각하는게 "경쟁력 있는 개발자"이다 그렇기에 난 라이브러리 인기에 대한 차트를 참고하여 선택했다 1위는 storybook, 2위는 emotion, 3위는 Ta..

[React.js] storybook 에러 - Error: No configuration files have been found in your configDir

❗ 문제 발생 나는 storybook 라이브러리를 사용하기 위해 $ npx sb init 명령을 통해 storybook 라이브러리 설치 및 환경셋팅을 하였다 그런데 이런 메시지가 뜨던데 "구성 디렉터리를 찾을 수 없으므로 자동 마이그레이션을 건너뜁니다" 라는 메시지 였다. 그래서 뭐 별 말 아닌줄 알고 대수롭지 않게 넘어갔었다. 그리고 npm run storybook을 통해 storybook을 실행하려했는데 이런 에러가 뜨더라 대충 뭐 직역하자면 "main.js나 뭐 필요한 파일들이 있는데 내가 그걸 못찾겠어" 라는 에러이다 그래서 자동 다운로드 및 환경셋팅을 했음에도 내가 직접 수정해야하는 부분이 있는지알고 무려 4시간을 찾아헤맸다 ❗ 해결 방법 아무리 찾고 찾고 찾고 찾고 찾고 찾고 찾고 찾고 찾고 ..

[React.js] axios interceptor로 axios header에 토큰 삽입하기

❓ axios interceptor axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능이다. 요청에 인증 헤더 추가, 오류 처리 또는 요청 및 응답 로깅과 같은 다양한 용도로 사용할 수 있다. interceptor는 전역적으로 Axios 인스턴스에 추가하거나 개별 요청 또는 응답에 추가할 수 있다. ❗ axios interceptor 써야하는 이유 헤더 수정, 인증 토큰 추가, 오류 처리, 요청 및 응답 기록 등을 할 수 있다. 모든 요청 또는 응답에서 동일한 코드를 반복하지 않아도 되어서 코드가 더 간결해지고 유지 관리가 쉬워진다. 애플리케이션에서 요청 및 응답이 처리되는 방식을 표준화하는..

[React.js] 커스텀 훅(Custom Hook)과 유틸 함수(util function)에 대해서

❗ 커스텀 훅(Custom Hook) React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 훅(useState, useEffect 등)을 이용하여 구현된다. 또한 JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다. 예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기..

[React.js] Geolocation과 reverseGeocoding을 활용한 사용자 현재 위치 기반 좌표, 주소값 받아오기

해당 글은 코드에 대한 자세한 설명을 담는 포스팅이기보다는 나와 같은 기능을 만드는 주니어 개발자를 위한 포스팅임을 미리 알린다. 나는 현재 리액트 사이드 프로젝트로 사용자 현재 위치를 기반으로 하여 주위 모범 음식점을 알려주는 gis 기반의 사이드 프로젝트를 혼자 진행중이다 (https://github.com/Growing-Jiwoo/ModelRestaurant) 해당 프로젝트에서 기초 지반이 되는 기능이 바로 사용자가 접속한 위치의 위도 경도를 받아오고 해당 위도 경도로 주소값을 받아오는 기능이다. 해당 기능이 필요한 이유는 많고 많은 음식점 리스트 중에 사용자의 현재 위치를 기반으로 주위에 있는 음식점 리스트들만을 보여주게 하기위해서이다. ❗ 전체 코드 import { useState, useEff..

[React.js] async/await에서 발생하는 promise<pending> 해결하기

하소연 먼저 시작하겠다..... 현재 혼자서 리액트 사이드 프로젝트 진행중에 있다. 해당 프로젝트에서 geolocation api를 통해 사용자의 위도 경도를 받아낸 후 받아온 위도 경도를 reversegeocoding하여 사용자의 주소까지 가져오는 커스텀 훅을 만들던 중이였다. 내가 원하는 로직은 이렇다. 1. 사용자의 위도 경도를 받아온다. 2. 받아온 위도 경도 값을 reversegeocoding하는 함수에 삽입하여 주소값을 얻어낸다. 해당 로직대로 구현하였을 때 위도 경도는 잘 받아오지만 위도 경도를 props로 받아서 reversegeocoding할 때 return을 할 경우 원하는 값이 반환되는게 아닌 promise 값을 던져주더라 .... * promise은 pending 뜻 그대로 이행하거..