React

1. Redux Tookit 과 zustand의 비교1-1. 작은 크기 적은 보일러 플레이트redux & rtk의 11.8mb ( minified 30.4 kb 까지)라는 큰 사이즈와 달리 zustand는 1.16kb 라는 압도적으로 작은 크기를 가지고 있습니다.보일러 플레이트의 양이 많은 redux toolkit과는 달리 무척 간단하게 설정하여 사용할 수 있습니다.(예를 들어 rtk은 provider로 감싸야 내부에서 사용할 수 있는 것과 달리 zustand는 그런 코드들이 전혀 필요 없습니다.) 1-2. 낮은 학습 곡선Redux + Redux Toolkit은 Redux의 개념과 셋업 그리고 layer를 어느 정도 알고 있어야 하기 때문에 처음에 사용하기에는 (다른 상태 관리 라이브러리와 비교했을 때 ..

📖 react query의 staleTime과 cacheTime에 refetch 조건에 대한 이해가 필요하다고 생각하여 공식 문서 참고 및 여러 실험 후 기록해둡니다. 0. 옵저버(Observer)와 쿼리(Query) 가장 먼저 react-query의 핵심 개념 중 하나인 옵저버와 쿼리에 대해서 알아보겠습니다. 옵저버(Observer) 옵저버는 비동기 데이터 요청을 추적하고 업데이트를 처리하는 객체입니다. 쿼리의 상태 변화를 감지하고 변화 과정과 결과에 따라서 UI를 업데이트 시킬 수 있습니다. useQuery 훅을 사용하여 옵저버를 생성할 수 있습니다. 옵저버는 다음과 같은 속성을 가질 수 있습니다. isLoading : 캐시에 없는 비동기 데이터 요청이 진행 중인지 여부 isFetching: 비동기 ..

1. 다양한 상황에서 이미지 불러오는 방법 1. CRA [public] 이미지 태그가 아닌 곳에서 `backgroundImage`로 불러올 때 이미지(img) 태그에서 소스 코드로 불러올 때 cra는 `process.env.PUBLIC_URL`로 public 폴더에 접근할 수 있게 default로 되어 있다. [인터넷 이미지 주소] const image = 'https://cdn.pixabay.com/photo/2019/07/30/05/53/dog-4372036_1280.jpg'; 혹은 그냥 [src 폴더의 이미지 불러오기] 1. svg, 이미지 파일 다 됨. import Badge from '../assets/images/Badge1.svg'; 2. (svg는 안 되는 듯?) 3. ReactCompon..

React Hooks를 사용할 때 Stale Closure라는 현상이 자주 발생한다는 얘기를 들었습니다. Closure(closure의 개념은 생명주기가 끝난 외부함수의 변수를 참조하는 함수를 의미합니다.)라는 것은 아는데 Stale Closure는 대체 무슨 현상인지 궁금했습니다. 그래서 공부 후 기록해두고자 합니다. 참고로 Tailwind CSS를 사용했습니다. shortcut으로 f 는 flex, fc는 flex-column로 만들어두었습니다. ('f-fc' = 'flex flex-column') 1. Stale closure 란? react hooks를 사용할 때 상태 값에 변화가 생겨도 이를 감지하지 못 하고 예전 값을 바라보고 있는 클로저 함수 혹은 이와 같은 현상을 의미합니다(함수든 현상이든..

🗯️ React에서 CSS를 다루는 방법은 여러 가지가 있습니다. 그 중 Tailwind CSS와 Styled-components를 사용해봤는데요. 프로젝트를 할 때마다 이 두 개중 어떤 것을 사용할 지 고민을 했습니다. 그래서 각각의 장단점과 사용경험, 그리고 제가 사용했던 코드를 짧은 예시로 기록해두고자 합니다. (각각 어떻게 설치하고 파일을 구성하는지, 그리고 다른 사용법은 다루지 않습니다. 예를 들어 styled-components의 themprovider, createGlobalStyle 라던가... 그런 건 tailwind에서도 config.js에서 가능하기 때문입니다.) 1. Tailwind CSS (CSS framework) 먼저, 가장 최근에 사용한 Tailwind CSS부터 시작하겠습니..

`navigate()` 함수는 React Router v6에서 추가된 네비게이션 함수로, 다음과 같은 옵션을 제공합니다. 1. `replace`: boolean 이전 페이지를 `history` 스택에서 제거하고, 새로운 페이지를 스택에 추가하지 않습니다. 이전 페이지가 `history` 스택에서 제거되므로, 뒤로 가기 버튼을 눌러도 이전 페이지로 되돌아가지 않습니다. 2. `state`: object 이동할 페이지에 대한 추가 정보를 전달할 수 있습니다. 이전 페이지에서 전달한 데이터를 받아서 활용할 수 있습니다. 3. `search`: string 쿼리 문자열을 전달할 수 있습니다. 예를 들어, `search: '?page=1&size=10'`와 같이 쿼리 문자열을 전달할 수 있습니다. 4. `hash..

💡 클라이언트 데이터가 아닌 서버 데이터 통신을 위해 axios를 공부해보았다. 1. Axios 란? (1) Axios란? axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 다시 말하자면, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. 근데, Fetch가 있는데 굳이 왜 Axios를 쓸까? 이렇게 물어볼 수도 있다. 💬 그런데 ES6부터 도입된 Javascript 내장 라이브러리 Fetch는 안쓰나요? 쓸 수 있다. 바닐라 자바스크립트상에서는 썼었다. 하지만 Axios의 response가 친절하고 편리하다. 기능적인 면에서 Axios가 앞선다. 그래서 Fetch는 안 쓴다. 그 기능 차이를 자세하게 보자 Case 1. 데이터 읽어오기 fetch는 f..

💡 react를 공부하면서 heroku 사이트를 이용하여 서버를 배포하였을 때 estimated cost 가 떠있길래 '무료 아니었나? 이게 뭐지?' 하고 봤더니 7$가 찍혀있었다. 보자마자 허겁지겁 deploy된 app을 삭제하고 다른 무료 사이트를 찾아보다가 좋은 정보를 얻었다. heroku의 대체자로 render 라는 사이트를 소개하고 json-server를 배포하는 방법까지 알아보자. 정확히 말하자면 json-server를 render 사이트의 web service를 통하여 api를 열어두고, vercel 을 사용하여 react app 을 deploy할 것이다. 프로젝트는 완성했고 배포단계라는 가정 하에 글을 작성하였다. 1. 먼저 json server를 다른 폴더에 만들자. (이미 하나의 폴더에..

💡 함수형 컴포넌트가 도입된 지 시간이 꽤 흘러서 실무에서도 클래스형보다 함수형을 더 많이 쓰고 있다고 합니다. React 공식문서에도 함수형을 쓸 것을 권고하고 있습니다. 하지만 회사의 오래된 heritage로 클래스형 컴포넌트를 마주칠 수 있는 상황도 있을 수 있으니 이를 대비하여 사전(?) 지식으로서 짧게 알아보는 시간을 가졌습니다. 1. LifeCycle 리액트의 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터 사라질 때까지의 생명주기를 뜻합니다. 리액트 컴포넌트는 [Mount] -> [Update] -> [Unmount] 의 과정을 거칩니다. mount는 생성될 때, update는 업데이트될 때, unmount는 제거될 때를 뜻합니다. 라이프 사이클 메서드의 종류는 총 10가지 입니다. w..

1. 리액트 쿼리의 엄청난 내장 기능 isLoading, isError의 기능이 내장되어 있어 자동으로 처리해준다!!! 👉 편리하다 return 문에 도착하기 전에 isLoading 또는 isError에 따라 별도의 처리를 해주기 때문에 대기 상태 처리 / 오류 처리에 대한 부분이 아주 쉽게 해결이 된다. 기존 미들웨어 코드들에 비해서 코드량이 적고 규격화되어 있기 때문에 책임 소재가 분명해지게 된다. 2. 리액트 쿼리 사용 방법 2-0. 리액트 쿼리 설치 yarn add react-query 2-1. 모든 루트를 QueryClientProvider 로 감싼다. QueryClientProvider는 데이터를 읽어오는 기능(QueryClient)을 애플리케이션 전체에 주입하도록 하는 API 이다. impo..