만족

웹 어플리케이션에서 데이터 패칭, 캐싱, 서버 상태와 동기화 및 업데이트(fetching, caching, synchronizing and updating server state)를 쉽게 만들어주는 library 이 포스트에서는 react-query의 기초적인 개념 몇 가지에 대해 다룬다. Installation yarn add @tanstack/react-query eslint와 함께 사용하는 것을 추천, 세팅은 아래 링크 참조 https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query ESLint Plugin Query | TanStack Query Docs tanstack.com Quick Start: queryClient https://t..

웹 배포 후 정상적으로 작동하는지 확인해보기 위해 직접 몇몇 url들로 들어가, 정상적으로 웹사이트가 동작하는지 확인하고는 한다. 그러나 매 배포마다 모든 페이지를 확인하기는 번거로우며, 그렇다고 테스트 코드를 빡빡하게 작성하기에는 부담스럽다. cypress를 사용하면 이 작업을 간단히 자동화할 수 있다. 가령 특정 url로 접근하기만 해도 웹사이트가 터져버리는데 미처 확인하지 못해 한참 뒤에나 알아차린 경험이 있다면 아주 간단한 cypress test를 적용하는 것 만으로도 그런 상황을 막을 수 있을 것이다. 샘플 프로젝트 세팅 # 리액트 프로젝트 생성 npx create-react-app simple-cypress-with-react cra로 리액트 프로젝트를 생성해준다. yarn add react-..

렌더링 타임에 state의 갯수가 달라져서 발생하는 오류다 const Mycomponent= ()=>{ const [foo, setFoo]= useState(''); if(foo!== ''){ const [bar, setBar]= useState(''); } return ( setFoo('foo')}>버튼); } 위 코드에서는 버튼을 클릭하기 전에 state가 한 개(foo) 였다가, 버튼을 클릭하고 나면 const [bar, setBar]= useState(''); 에 의해 state가 하나 더 생긴다. 이런 경우 발생하는 오류이므로, state의 갯수는 조건과 관계없이 동일하도록 변경하고, 그 state에 따른 사이드이펙트를 조건부 처리하는 방식으로 수정한다.

리액트 프로젝트를 빌드하면 나오는 결과물들을 간단히 다음과 같이 분류할 수 있다. 1. css 2. js 3. html 4. asset (png, svg ...) 이들에 관해 어떻게 캐시 전략을 세울 수 있을까? css, js css와 js는 빌드할때마다 결과물이 변경될 경우 파일네임 중간의 해시값이 바뀌게 된다. 예를 들어 처음 빌드했을 때 다음과 같은 빌드 결과물이 나왔다면, js코드를 일부 수정하고 다시 빌드했을 때 이런 식으로 js가 변경되었으므로 main.[HASH].js 에서 HASH가 업데이트된다. 따라서 같은 이름의 css, js는 다시 로드할 필요가 없고, 영구적으로 캐싱하기로 결정했다. (빌드 결과물에서 직접 코딩하는게 아닌 이상... 어차피 빌드 파일 이름이 변경되므로 영구캐싱이 타당..

./node_modules/react-simple-wysiwyg/lib/index.es.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available) 원래 잘 됐는데 github action에서 빌드 중 위와 같은 오류가 발생했다. https://github.com/megahertz/react-simple-wysiwyg GitHub - megahertz/react-simple-wysiwyg: Simple and lightweight React WYSIWYG editor Simple and lightweight React WYSIWYG editor. Contribute ..

배경 현재 redux와 swr를 동시에 사용 중이다. redux는 설정 값이나 검색 기록 등의 로컬에서만 다루는 상태들을 관리하는데 사용하고 있고, swr에는 서버로부터 받아온 데이터(상태)를 관리하는데 사용하고 있다. 기존에는 swr를 사용하지 않고 redux만을 사용해 모든 전역 상태를 관리했었지만, 캐시 관리 등의 문제로 서버에서 받아오는 데이터는 swr로 이관한 상태였다. 그러나 redux의 높은 복잡성과 swr의 단순함을 보면서 로컬 값도 swr로 관리하면 안될까 하는 생각을 하게 되었다. redux의 라이프사이클에서 알 수 있듯 보면 redux에서 새로운 상태를 다루고자 할 때 새로운 state를 정의하고 그 상태의 변화를 일으킬 때 필요한 action과 reducer를 만들고 store에 통..

Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 갑자기 를 로 감싸라는 오류가 출력됐다. 그런데 Mac환경에서는 정상 작동하다가 플랫폼을 옮기니 이 오류가 발생해서 의아했다. 원인과 해결 react-router 6버전부터 로 를 감싸는게 강제되었기 때문이다 return ( ) 버전 5까지는 위처럼 작성할 수 있었지만 버전 6부터는 아래처럼 작성해줘야 한다 return ( ) Mac에서는 됐던 이유? package.json에 react-router의 버전이 latest로 되어있었기 때문이다. 과거 5버전이 최신 버전일때 설치하고 package.loc..

https://satisfactoryplace.tistory.com/106 [React] scp명령어를 이용한 배포 간소화 현재까지 배포 과정은 다음과 같았다. 1. yarn build 입력 후 빌드 대기 2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사 터미널에 yarn build후, 다른 창으로 이동하여 작업을 이어나가야 satisfactoryplace.tistory.com 이전에 배포 간소화를 위한 스크립트 작성법을 소개했었다. 그러나 매번 deploy 스크립트를 입력하는 것과, test code가 통과되는지를 확인하는 점이 번거로웠다. 또 scp 명령어에서 pem키를 입력으로 받는데 여러 환경에서 작업하다 보면 pem키를 옮겨오는 것도 일이라서 다른 방법을 찾아보기로 했다. ..