useMutation query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다. 서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다. useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다. useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자 const { data, isLoading, mutate, mutateAsync } = useMutation(mutation..

React Query란? React Query는 데이터 Fetching, 캐싱, 동기화 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 이다. Redux, Recoil, Mobx 등의 상태관리 라이브러리들로도 충분히 가능하지만, 클라이언트 쪽의 데이터들을 관리하는데에 있어서 적합할 수는 있어도 서버 쪽의 데이터들을 관리하기에는 여러가지 처리등이 필요한 점들이 있어서 등장하게 되었다. 예를 들어서, 같은 페이지를 바라보고 있는 관리자가 있을 때, 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 확인할 수 있어야 한다. 설치 최근 v4로 업그레이드 되면서 yarn add react-query or npm i react-query 이었던 설치 command가..

MUI의 모든 컴포넌트들은 기본적으로 style이 지정되어있다. 스타일을 변경하기 위해서 여러가지 방법이 존재한다. class명을 지정해서 css파일을 통한 지정 // test.css .test { backgroundColor:'white'; } // test.jsx const Test = () => { return hi } 컴포넌트 인라인 스타일 조정 // MUI 컴포넌트들에도 inline style을 먹일 수 있다. // ex) // sx와 style의 차이는 이전 글에 https://wonillism.tistory.com/287 [MUI] VS / sx VS style vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div..

yarn v3가 좋다는 말을 주변에서 듣고 업그레이드 할까 말까 고민을하다가 새로운 프로젝트에 한번 적용해보려고한다. 토스 기술 블로그에서 기존 npm의 문제점과 yarn berry를 도입한 이야기에 대해서 잘 정리 해놓았으니 읽어보자. https://toss.tech/article/node-modules-and-yarn-berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech yarn berry는 npm과 100% 호환되는 yarn classic과는 다르게 Plug’n’Play (PnP)방식을 지원한다. yarn berry는..

vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div를 써라는 말도 자주 찾아볼 수 있다. mui - React Box - Material UI The Box component serves as a wrapper component for most of the CSS utility needs. mui.com The Box component serves as a wrapper component for most of the CSS utility needs. “Box 컴포넌트는 css 유틸을 필요로 하는 wrapper 컴포넌트 역할을 한다”고 되어 있다. 기본적으로 컴포넌트를 감싸는 wrapper 역할로써 사용된다. 설정을 통해 다른..

React를 좀 더 자세히 알아보고자한다. 앞선 포스팅에서 React의 기본에 대해서 꽤나 많이 다루었지만, 뭐랄까... 개발하면 할수록 뭔가 비어있다는 느낌이 강하게 든다. 프로젝트를하면서 알게 된것들, 배웠던것들 글로 남겨야지 하면서 바쁘다는 핑계로 간략하게 회사 회고록에 남기거나 나중에 자세하게 해야지 하면서 미뤄뒀었다. 그리고 최근 프로젝트중에 Next.js를 쓸 기회가 생겨서 더욱 React에서 뭔가가 비어있다가 느껴졌다. DOM React보다 더 이전의 Javascript의 개념부터 시작해야한다. 이 글에서는 자세히 다루지 않겠다. DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 ..

2022.03.08 - [Javascript/React] - Recoil - 상태관리 라이브러리 Recoil - 상태관리 라이브러리 리액트로 개발을 진행하던 중 redux가 좀 복잡하고 귀찮아서 그냥 context도 써보고 상태관리에 대해 이것 저것 많이 알아보았다. 그러던중 Recoil이라는 오직 리액트를 위한 상태관리 라이브러리가 wonillism.tistory.com 이전에 단순히 recoil을 단순히 전역 상태만으로 사용해서(그조차도 맞는지 모르는...) 조금은 부족하다는 생각에 recoil을 좀 더 상세히 다루어보려고 한다. 상태 관리의 중요성 양방향 바인등을 하는 Angular와는 달리 React는 단방향으로 바인딩 한다. 상위 -> 하위 방향으로만 state를 props로 전달할 수 있고, ..

지난 글에서는 프로젝트 관리 방법론이 뭔지에 대해 다뤘었다. 이번 글에서는 Agile을 도입하기전에 Agile이 맞는지, 실패사례는 뭐가 있는지를 알아보았다. https://wonillism.tistory.com/221 프로젝트 관리 방법론 (Agile 위주) 효과적인 프로젝트 관리를 위해 프로젝트 관리 방법론에 대해 알아보자. 프로젝트 관리란? https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8_%EA%B4%80%EB%A6%AC 프로젝트 관리 - 위키백과,.. wonillism.tistory.com 애자일을 좀 더 알아보자 Agile : 1. 날렵한, 민첩한 2.(생각이) 재빠른, 기민한 날렵하고 민첩하다는 의미에서 만들어진 용어이다...