Front-End(Web)/React - 라이브러리들
-
[React Query] (2) useQuery()Front-End(Web)/React - 라이브러리들 2022. 7. 26. 21:14
🧐 서론 첫 번째 포스팅에서는 React Query를 도입하는 배경과 장점, 그리고 기본개념들을 우선 정리하였다. 그리고, 이번 포스팅부터는 실질적으로 다루기 위한 문법들을 정리하려고 한다. React Query에는 주요 개념들이 있었으며, 이번 주제는 비동기 데이터를 지칭하는 쿼리(Queries)를 다루는 문법들이 될 것이다. 쿼리 데이터를 패치하는 useQuery() 메서드와 이 데이터를 다루기 위한 다양한 방법들을 정리해보겠다! * https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3 🌺 useQuery() : 데이터 패치 Hooks 우선, 어플리케이션의 컴포넌트 트리 최상단에 설정했던 ..
-
[React Query] (1) React Query 시작하기Front-End(Web)/React - 라이브러리들 2022. 7. 25. 18:55
🧐 서론 React에서 사용되는 기술들에 계속해서 관심가지던 도중, 최근 React Query를 통한 API fetching이 많다는 것을 느꼈다. 대게 라이브러리들이 그렇듯, 기존의 fetch() 함수나 axios에 비해 더 많은 기능을 제공할 것이라 생각된다. (패치상태, 캐싱 등) 또한, Redux의 경우를 생각하면 비동기 패치와 상태관리 등을 위해 서드파티 라이브러리 설치가 필수적이었다. (비동기 패치를 위한 Redux-thunk, Redux-saga, 상태관리를 위한 Redux-toolkit 등) 그렇지 않아도 번거로운 Redux 설정이 서드파티로 인해 더욱 비대해지고, 범용적으로 쓰이는 saga는 제너레이션 문법이 요구된다는 등의 사용성 이슈가 존재한다. 유튜브 강의 전개내용을 적당히 분할하면..
-
[Jotai] React 전역 상태 라이브러리Front-End(Web)/React - 라이브러리들 2022. 3. 13. 05:22
이전, 토이를 진행하면서 React의 전역 상태를 사용하기 위해 Recoil 라이브러리를 적용했던 적이 있다. (링크) [Recoil] 전역 상태관리 라이브러리 - Recoil 정복기 🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메 abangpa1ace.tistory.com 이전에 사용했던 Redux에 비하면 매우 심플한 사용법에 컬쳐쇼크를 느끼고, 그렇게 나는 Recoil의 추종자가 되었다. 😏😏 이 Recoil의 철학(Atomic Model)에 영감을 받아 만들어진 React의 상태관리 라이브러리인 'Jotai' 를 소개해보려고 한다. 👻 Jot..
-
[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기Front-End(Web)/React - 라이브러리들 2021. 12. 30. 01:04
🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메모장 어플을 다시 만들어보았다. 전역 상태관리 라이브러리 역시 사용하고자 했고, 이전 Redux의 불필요한 구성과 복잡한 원리에 학을 뗀지라.. 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리인 Recoil을 이번 기회에 학습 & 사용해보고자 결심했다! 우선, 두괄식으로 결론을 내리자면, 내가 앞으로 React 프로젝트를 작업한다면 왠만하면 Recoil이다! 그만큼, Redux처럼 다양한 구성(action, reducer 등)을 할 필요가 없으며, 특히 비동기 요청이 매우 심플하다. (Red..
-
[Redux] Redux-SagaFront-End(Web)/React - 라이브러리들 2021. 2. 21. 00:29
Redux-saga 역시 공식사이트에서 비동기의 최적화를 위한 미들웨어라고 소개하고 있다. 채용사이트를 보면 Redux 와 가장 많은 조합을 이루고 있었으며, thunk 에 비해 일관적으로 액션객체를 반환하는 장점이 있다고 한다. 이러한 Redux-saga에 대해 공부를 하면서, Redux 필수 미들웨어를 확실히 알고 넘어가려고 한다. 💜 Redux-Saga 알아가기 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다. (원문) redux-saga is a library that aims to make application ..
-
[Redux] Redux-thunkFront-End(Web)/React - 라이브러리들 2021. 2. 18. 15:40
🤔 Redux 의 비동기 오류 Context API 에서 Redux 로 수정하는 토이 프로젝트를 진행하는 중이었다. action 생성자들을 별도파일로 제작하여 import 해서 사용중이었고, 이처럼 fetch() 로 가져온 데이터로 상태를 최신화할때 에러가 생겼다. 내용은 대충, fetchList() 라는 액션 생성자에 cartList를 담았는데 이것이 객체형태로 정상적인 반환이 되지 않은 것 같다. 또한, 대놓고 Async action에 대한 미들웨어를 사용하라고 권장하고 있다. 이러한, 비동기 처리를 위한 적절한 미들웨어를 찾아보았다. 💜 Redux-thunk 알아가기 리덕스를 사용하는 앱에서 비동기 작업을 사용할 때, 가장 기본적인 방법으로 사용되는 것이 redux-thunk 이다. 이 미들웨어는,..
-
[Redux] 미들웨어(Middleware)Front-End(Web)/React - 라이브러리들 2021. 2. 18. 02:29
🙃 Redux 너란 녀석... Redux의 장점이자 단점이... 깊은 역사와 엄청난 생태계인 것 같다. 그만큼 많은 부가기능들과 트랜디한 업데이트들이 지원되고 있으며, 대체되는 기술들이 등장하지만 바로 넘어가기엔 부담이 있다. 분명, 소규모 프로젝트에까지 도입하기엔 다소 무게감이 있는 친구지만, Context API에 비해 완성도가 있다고 느껴진다. 오늘은 그 이유 중 하나인, 위에서 말한 '부가기능'에 해당하는 미들웨어의 개념을 간단히 공부해보았다. 💜 미들웨어(Middleware) 란? 미들웨어란 말이 낯설지는 않다. Node.js 서버 프레임워크인 Express.js 에서도 미들웨어라는 개념이 있었다. Request-Response 사이에 작동하는 함수들을 일컫는 말이었다. 즉, 미들웨어는 특정한 ..
-
[Redux] Hooks - useSelector, useDispatchFront-End(Web)/React - 라이브러리들 2021. 2. 17. 02:55
😅 서론 react-redux의 connect() 함수와, mapStateToProps, mapDispatchToProps 를 열심히 공부했는데... Dev Ed님 유튜브 영상을 복습하면서, useSelector, useDispatch 라는 간편한 Hooks들을 지원해주는 것을 알았다. (하마터면 connect() 함수로 프로젝트 진행할뻔) 이를 계기로, react-redux에서 지원하는 Hooks 들의 종류와 기능에 대해 한번 공부해보았다. 💜 React-Redux의 Hooks 적용 React-Redux 7버전 이후로, React 에 대한 Redux 관련 Hooks API들을 제공하게 되었다. 이에 따라, 이전의 connect() HOC(Higher-Order Component) 작업이 불필요해진 것이..