Frontend/React·React Native
-
msw 2.0를 활용한 api mocking (설치 및 기본 세팅)Frontend/React·React Native 2023. 11. 1. 15:38
프론트엔드 개발을 하기 위해서는 서버와의 통신이 필연적입니다, 하지만 개발을 하다보면 백엔드에서 api의 제작이 늦어질 수 있습니다. 이런 경우에는 어떻게 해야할까요? 백엔드에서 api를 다 만들어 줄 때까지 기다려야 할까요? 만약 서버가 완성이 되더라도, 실패에 대한 테스트는 어떻게 진행할 수 있을까요? msw가 이러한 문제들을 해결해줍니다. 클라이언트 개발 환경에 포함되어있는 msw가 서버의 역할을 대신하면서 요청/응답을 mocking 하게 되며, 각종 통신 상황에 대해서 테스트를 진행합니다. msw의 핵심 개념은 다음과 같습니다. 1. Intercepting requests 클라이언트에서 발생하는 요청을 가로챕니다. 사용자가 서버로 보내려던 요청이 msw로 흘러갑니다. 2. mocking respo..
-
React에서 Google Maps API, Tanstack Query로 대용량 마커 데이터를 관리하는 방법Frontend/React·React Native 2023. 10. 26. 09:54
최근 진행한 프로젝트에서는 다음과 같은 핵심 기능이 필요했습니다. 1. 대량의 데이터(전국 약 6만여 건)를 사용자의 화면에 해당하는 영역만 적당하게 마커로 렌더링 해줄 것 2. 사용자가 움직일 때 마커 렌더링을 새롭게 진행할 것 3. 한번 렌더링 한 마커는 유지하고, 화면에서 벗어난 마커는 해제할 것 4. 사용자가 화면을 축소하는 경우 마커를 다른 방식으로 보여줄 것 5. 지도는 지도대로 동작하고, React는 React대로 동작하여 독립적인 환경을 보장할 것 이 프로젝트에서는 Google Maps API, React, Tanstack Query를 사용했으며, 이를 적절하게 제어할 수 있는 전략이 필요했습니다. 일단, 미리 말씀드리자면.. 일정한 수 이하의 데이터를 다루거나 마커가 동적으로 관리될 필요..
-
React에서 Google Maps API를 자유롭게 사용하는 방법 (@googlemaps/react-wrapper)Frontend/React·React Native 2023. 10. 24. 15:39
React에서 Google Maps API를 사용하기 위해 사용하는 @react-google-maps/api나 react-google-maps 같은 라이브러리들을 사용하는 방법이 있을 것입니다. 이 라이브러리들을 사용하면 Google Maps API에 있는 주요 기능들을 React 컴포넌트처럼 사용할 수 있지만, 여러 가지 문제가 있습니다. 실제 Google Maps API에서 제공하는 환경과 달라 제대로 된 기능을 활용하기 어렵습니다. 구글 지도에서 제공하는 기능들을 직접 접근하여 개발하는 것이 아닌, 라이브러리에서 제공하는 컴포넌트에 의존하여 개발을 하다보면 트러블 슈팅을 할 때 문제가 발생합니다. 과거 React Native에 Google Maps API를 사용하기 위해 라이브러리(react-nat..
-
useSyncExternalStore로 만들어보는 전역상태관리 라이브러리Frontend/React·React Native 2023. 7. 5. 01:55
몇 달 전부터 전역상태관리 라이브러리를 직접 만들어보고 싶었는데, 우테코 방학 기간에 심심해서 만들어 봤습니다. 혹시 useSyncExternalStore가 무엇인지 처음 들어보신다면 이 문서를 확인해보시는 것도 좋습니다. 제가 사용해 본 라이브러리의 폭이 넓지는 않지만 RTK, recoil, zustand를 사용해 본 결과 여러 가지 불만스러운 점이 많았습니다. 라이브러리는 아니지만 context API까지의 비교를 해보겠습니다. 장점 단점 RTK 주요 비즈니스 로직을 한 곳에 모으도록 하는 탑 다운 방식의 중앙 집중형 상태 관리를 강제한다. 보일러 플레이트 코드의 양이 상당하고, 러닝 커브가 큰 편이다. react에서 해야할 일을 정해진 함수 내에서 억지로 사용하게 하는 느낌이 든다. recoil ..
-
Recoil 상태 관리를 위한 강력한 도구 : useRecoilCallback(), Snapshot 객체를 활용한 recoil 상태 관리Frontend/React·React Native 2023. 6. 3. 02:01
Recoil은 React 애플리케이션의 상태 관리를 위한 라이브러리입니다. 공식문서의 Basic Tutorial를 참고해 보면 atom과 selector를 활용한 상태 관리가 그렇게 어려워 보이지 않습니다. 일단 useRecoilState으로 대부분의 로직을 리액트의 영역으로 끌고 온 다음 가공한 다음 다시 recoil로 돌려줘서 상태를 업데이트하곤 합니다. 하지만 이게 과연 괜찮은 걸까요? 그렇다면 recoil은 하는 일이 뭘까요? 지금부터 예제 몇 가지를 비교하면서 소개 할 것입니다. 이 글의 초반 부에는 너무나도 당연하고 쉬운 예제들로 가득 찰 것이지만, 뒤로 가면 갈수록 어? 이게 뭐지? 스러운 장면들이 나올 것입니다. 또, 이 글을 다 읽을 때 쯤에는 recoil을 recoil 답게 쓸 수 있을..
-
실험으로 확인하는 React 최적화 (memo, useMemo, useCallback)Frontend/React·React Native 2023. 5. 17. 14:56
React로 작성 된 프로젝트가 규모가 커지면 커질수록 관리해야하는 컴포넌트의 갯수가 많아지게 됩니다. 큰 규모의 애플리케이션에서는 React 컴포넌트의 렌더링 성능이 곧 사용자 경험에 영향을 미치게 됩니다. 따라서 렌더링을 최소화 하여 React의 성능을 극대화할 필요가 있는데요, 그 중에서도 리액트의 메모이제이션을 소개하려고 합니다. 메모이제이션이나 memo, useMemo, useCallback같은 경우에는 리액트 공식 문서에도 좋은 예제와 함께 설명도 잘 되어있지만 좀 더 명확하게 보일 수 있도록 상황과 예제를 작성해봤습니다. React에서는 재렌더링(re-rendering)이 언제 일어나는가? React는 상태가 바뀌면 본인과 그 자식들이 모두 재렌더링 됩니다. 다음과 같은 코드가 있습니다. i..
-
왕빠른 Vite React를 사용하여 GitHub Pages 및 Storybook 자동 배포 설정하기Frontend/React·React Native 2023. 5. 12. 00:27
Create React App에서 리액트 프로젝트와 Storybook 배포를 자동화 하는 것은 자료가 많고 매우 쉽습니다. 하지만 Vite라면 어떨까요? 아직까지 Vite는 다소 귀찮은 작업들이 존재하는데요, 자료가 거의 없어서 직접 소개하려고 합니다. 많은 배포 방법이 존재하겠지만 리액트 프로젝트는 GitHub Pages에 배포할 것이고, 스토리북은 Chromatic에 배포할 것입니다. Vite로 React 프로젝트 설치 (with TypeScript) yarn create vite 프로젝트명 --template react-ts 타입스크립트 템플릿으로 설치할 생각이 없다면 다른 템플릿도 존재합니다. 설치가 끝나면 yarn 으로 패키지를 설치해주고, yarn dev로 실행합니다. 프로젝트가 잘 실행됐나요..
-
React18의 useSyncExternalStore로 전역 상태 관리하기Frontend/React·React Native 2023. 5. 2. 03:51
지금 이 글을 쓰는 이 시점(2023년 5월)에서 useSyncExternalStore는 리액트 생태계에서 여전히 생소한 주제일 뿐만 아니라, 리액트 18부터만 지원하는 훅입니다. 이 훅은 외부의 저장소(store)를 구독할 수 있도록 하는 기능을 가지고 있습니다. 저는 이 글에서 Tearing 현상이나 해결법에 관련한 글이 아닌, 이 기능을 오용(?)하여 전역 상태처럼 관리할 수 있는 기능에 대해 소개하려고 합니다. 사실 이 글을 쓰는 지금 이 순간에도 useSyncExternalStore에 대한 정보를 찾아보려고 해도 국내에는 많은 레퍼런스가 존재하지 않기에 불분명한 출처의 자료가 될 수도 있습니다. 다행히도 저와 같은 주장을 하는 해외 기사 몇 가지를 발견했지만요. 또한, 후술하겠지만 제가 앞으로 ..