분류 전체보기
-
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에 대한 정보를 찾아보려고 해도 국내에는 많은 레퍼런스가 존재하지 않기에 불분명한 출처의 자료가 될 수도 있습니다. 다행히도 저와 같은 주장을 하는 해외 기사 몇 가지를 발견했지만요. 또한, 후술하겠지만 제가 앞으로 ..
-
React에서 눈속임을 이용한 커스텀 비밀번호 만들기 (카드 번호 절반만 숨기기)Frontend/React·React Native 2023. 4. 27. 16:17
웹 환경에서 사용자가 어떤 값을 입력하게 할 때 input 태그를 쓰는 것은 매우 당연합니다. 그렇다면 이 input 의 값을 숨기는 방법으로는 무엇이 있을까요? 대표적으로는 password 타입이 있는데요, 사용자가 어떤 값을 입력하더라도 *로 치환하여 화면 상에서 보이지 않도록 숨기는 역할을 합니다. 하지만 이 input 입력 폼에 특정한 값만 숨기고, 특정한 값은 노출시키고 싶다면 어떻게 할 수 있을까요? 예를 들면 사용자가 카드 번호 16자리를 입력할 때, 뒤 8자리만 가려지게 할 수는 없을까요? 그러면서 하이픈까지 넣어주는 센스를 발휘할 수 있을까요? 1111222233334444 를 차례로 입력하면 1111 - 2222 - **** - **** 으로 변환되어 input태그에 출력할 수 있을까요..
-
React에서 Context API로 상태 관리하기 (with Typescript)Frontend/React·React Native 2023. 4. 17. 17:27
React에서 프로젝트를 진행하다보면 컴포넌트 간에 상태를 공유하기 위해서 그 상태를 부모에게 끌어올리는 일은 자연스러운 현상입니다. 이 과정을 다시 생각해보면, 상태를 부모가 관리하게 하여 prop으로 자식들에게 전달하는 방식으로 쉽게 구현할 수 있겠죠. 하지만 React 애플리케이션이 점점 커지고 복잡해질 수록 상태 관리를 하는 것은 어려운 작업이 될 것입니다. 특히 여러 구성 요소(ex.컴포넌트)간에 상태를 공유해야한다면 상태 값을 공유(동기화)하는 것은 주요 문제 중 하나입니다. 이런 문제를 해결하기 위해 Redux, MobX, Recoil 등 상태 관리 라이브러리를 사용하는 것이 굉장히 일반적이지만, 라이브러리 없이 context api로 구현하는 방법에 대해서 알아보려고 합니다. 특히 타입스크..
-
JavaScript의 cloneNode와 이벤트 버블링을 활용한 HTML template tag 활용법Frontend/JavaScript 2023. 4. 11. 03:16
HTML의 template 태그는 웹 개발에서 재사용성을 높이는 방법 중 하나입니다. template 태그를 사용하면 웹 페이지에서 일부분을 독립적으로 만들어 놓고, 필요할 때마다 JavaScript를 통해 동적으로 삽입할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 예를 들면, 어떤 컴포넌트에 필요한 HTML 코드를 문자열로만 관리하는 것은 굉장히 불편합니다. ES6에 와서 백틱으로 템플릿 리터럴을 관리하는 기능이 추가되었지만, IDE 차원에서 코드가 인식이 잘 되지 않는 등 여러 문제가 있습니다. template 태그의 공식문서를 확인해보면 템플릿 태그는 렌더링 되지 않습니다. DOM 상에 존재하지 않지만, 해당 코드를 JavaScript가 동적으로 읽어들여 복제(.clo..