분류 전체보기
-
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 ..
-
우아한테크코스 5기 FE 레벨 2을 마치며...Study/일상·회고 2023. 6. 25. 16:01
미루고 미루다 작성하는 우아한테크코스 레벨2 회고글입니다. 사실 방학하자마자 바로 회고 글을 작성할까 했지만 여행을 다니느라 글을 쓸 시간이 없었습니다. 방학식을 한 날 이후로 단 하루도 빼놓지 않고 노는일정을 빽빽하게 잡았습니다. 가평, 수원, 양양, 강릉, 횡성, 을왕리를 돌다 보니 화면을 볼 시간이 부족했고, 덕분에 작성하려고 준비한 기술 관련 글들도 미뤄져서 레벨3 기간에 작성할 것 같습니다. 🤔🤔🤔 레벨 1에서는 JavaScript/TypeScript를 이용한 바닐라 웹을 학습했다면, 레벨 2에서는 본격적으로 React를 학습하게 됐습니다. 진행한 미션과 회고를 정리해보겠습니다. 미션 미션 1 - 다시, 점심 뭐 먹지 Repository Feedback Step1 바로가기 바로가기 Step2 바..
-
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로 실행합니다. 프로젝트가 잘 실행됐나요..
-
Windows에서 VMware를 이용하여 Ubuntu 설치 및 설정하기 (+ 프론트엔드 기본 설정)Study/Tools 2023. 5. 9. 01:25
최근 맥과 윈도우를 왔다갔다 하면서 개발을 하다보니 여러가지 문제를 겪었습니다. 집에 있을 때에는 윈도우 환경에서 개발을 하고, 밖에서는 맥을 사용해왔는데요, 사실 대부분의 상황에서는 큰 문제가 없지만, 자동 스크립트를 적용할 때 문제가 생기곤 합니다. 예를 들면 배포용 스크립트 문장에 rm -rf나 mkdir 같은 명령어가 포함된다면 윈도우 환경에서는 반드시 오류가 발생할 것입니다. 집에서도 맥을 쓰면 되는 문제긴 했지만 최근에 윈도우 데스크탑을 새로 산 상황에서 두 컴퓨터 모두 사용하고 싶었습니다. 또, 저처럼 특수한 경우가 아니더라도 협업 등 여러 상황에서 문제가 발생할 수도 있을 것입니다. 결론부터 말하자면 자동 배포할 때 필요한 각종 스크립트 명령어는 git bash 같은 환경에서 실행하면 문제..
-
React18의 useSyncExternalStore로 전역 상태 관리하기Frontend/React·React Native 2023. 5. 2. 03:51
지금 이 글을 쓰는 이 시점(2023년 5월)에서 useSyncExternalStore는 리액트 생태계에서 여전히 생소한 주제일 뿐만 아니라, 리액트 18부터만 지원하는 훅입니다. 이 훅은 외부의 저장소(store)를 구독할 수 있도록 하는 기능을 가지고 있습니다. 저는 이 글에서 Tearing 현상이나 해결법에 관련한 글이 아닌, 이 기능을 오용(?)하여 전역 상태처럼 관리할 수 있는 기능에 대해 소개하려고 합니다. 사실 이 글을 쓰는 지금 이 순간에도 useSyncExternalStore에 대한 정보를 찾아보려고 해도 국내에는 많은 레퍼런스가 존재하지 않기에 불분명한 출처의 자료가 될 수도 있습니다. 다행히도 저와 같은 주장을 하는 해외 기사 몇 가지를 발견했지만요. 또한, 후술하겠지만 제가 앞으로 ..