Frontend
-
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..
-
고밀도 지도 데이터 관리를 위한 효과적인 전략: 지도 확대 및 마커 제어Frontend/JavaScript 2023. 8. 25. 00:22
지도 기능에서 가장 핵심인 기능 두 가지를 뽑자면, 지도 그 자체와 지도 위에 그려지는 마커를 뽑을 수 있을 것입니다. 지도 위에 마커를 그리는 일은 그다지 어렵지 않고, documents 에 있는 예제들을 잘 따라하면 누구나 충분히 구현할 수 있을 것입니다. 하지만 마커의 갯수가 과도하게 많다면 어떤 전략을 세울 수 있을까요? 최근 진행한 서비스에서는요 ... 최근 진행한 서비스에서 지도는 굉장히 중요한 요소 중 하나였습니다. 사용자들이 궁금한 장소의 주변에 있는 충전소를 시각적으로 제공해주기 위해서는 지도를 잘 제어할 수 있어야 했습니다. 특히 전국에 이미 수만 대의 충전소가 보급이 된 상황에서 충전소 마커를 모두 그려주기 위해서는 많은 제약이 있었고, 마커를 적당한 수준으로 렌더링 하려면 클라이언트..
-
Github Actions를 활용한 Jest, React Testing Library 테스트 자동화Frontend/JavaScript 2023. 8. 25. 00:12
일반적으로 소프트웨어 테스트란 백엔드에서 그 중요성이 강조되곤 하지만, 프론트엔드에서도 그에 못지 않게 중요한 부분을 차지하고 있습니다. 수많은 툴 중에서 jest 기반의 두 라이브러리를 자동으로 테스트 하는 방법에 대해 작성해보겠습니다. Jest Jest는 JavaScript의 테스트를 위한 대표적인 라이브러리입니다. 기본 설정이 간편하고, 빠르게 테스트를 실행할 때 굉장히 유용합니다. 함수를 mocking하여 의존성이 강한 함수를 제거하여 원하는 테스트를 쉽게 구성할 수 있다는 특징이 있습니다. React Testing Library React Testing Library는 리액트 애플리케이션의 UI를 테스트하기 위한 라이브러리입니다. React 컴포넌트를 호출하여, 사용자의 의도대로 조작할 수 있는..
-
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..