내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근 다수의 이미지 파일을 업로드하여 바로 사용자가 볼 수 있도록 하는 Form을 만들게 되었습니다. FileReader를 이용한 file reading 방식으로 개발을 진행하였고 이번 기회에 해당 내용을 포스팅하게 되었습니다. FileReader single file case 다수의 파일을 읽는 케이스를 설명하기 전에 FileReader를 이용한 단일 파일의 케이스 먼저 설명하겠습니다. 업로드된 이미지 파일의 읽기 위해 FileReader의 메서드인 readAsDataURL()을 사용합니다. 이미지의 경우 인코딩하지 않을 경우 깨지기 때문에 readAsDataURL()를 통해 base64로 인코딩 된 데이터로 반환받아 사용합니다. FileReader의 콜백처리를 위해 Promise를 사용합니다. Sin..

React Query를 도입하여 사용 중에 Query Key에 대한 관리의 필요성을 느꼈습니다. 팀 내부에선 Query Key를 Array 형태로 사용하기로 컨벤션이 잡혀 있었는데 사용자가 Array 내부의 key 요소를 잘 못 입력을 하거나 order가 잘 못 되는 경우가 발생할 수 있었기 때문입니다. 그리고 아래의 예시처럼 특정 ID를 key의 요소로 사용하거나 key의 요소가 많을 경우 그러한 실수는 더 많이 발생할 수 있습니다. ... export const useGetUserDetail = (userID: string) => { const context = useQuery( // 지정할 key의 요소가 많은 케이스 ['user', 'detail', 'info', userID], async () ..

Lerna의 Gibhub 이슈에 따르면 더 이상 유지보수가 안될 것으로 판단이 되어 팀 내에서 Monorepo 구축을 위해 다른 라이브러리를 도입하기로 결정했습니다. 현재 운영 중인 application들에 공유하여 사용되는 모듈이 많이 있어 Lerna로 Monorepo가 구축된 상황이었는데 Lerna의 해당 이슈를 통해 Nx를 도입하기로 결정되었습니다. Migration 22년 5월부터는 Lerna가 Nx의 개발사인 Nrwl에서 관리를 하다 보니 Nx의 공식문서에서 Lerna에서 Nx로 통합하는 부분에 대한 설명이 잘되어있습니다. Lerna와 Nx를 같이 쓸 수도 있지만 Lerna를 걷어내고 Nx를 사용하기로 결정했습니다. 기존에 yarn workspaces가 적용된 package라서 lerna.jso..

Store에서 서버 상태 관리(비동기 처리 상태 관리) 분리를 위해 React Query를 도입하게 되었습니다. 이전 포스팅을 통해 여러 서버 상태 관리 라이브러리를 비교했고 팀원들의 의견에 따라 React Query를 선택하게 되었습니다. React Query를 현재 프로젝트에 도입하여 사용한 내용을 정리해 보았습니다. 기본 셋업 React Query를 설치합니다. (React v16.8 이상 호환됩니다.) npm i react-query # or yarn add react-query React Query Provider를 main에 선언합니다. // main.tsx ... import { QueryClient, QueryClientProvider } from '@tanstack/react-query'..

주니어 개발자분께서 이메일 인증 로직에서 인증 시간을 체크하는 timer의 상태 관리에 useRef가 사용되는 걸 보시곤 "상태 관리에는 useState가 쓰이고 useRef는 DOM에 접근할 때 쓰는 것 아닌가요?"라는 질문을 받았습니다. 간단하게 컴포넌트의 생명주기에 따른 상태와 re-render 유무를 설명드렸고 이번 기회에 해당 내용을 간단하게 정리하려 합니다. useState vs useRef보통 useState는 특정 상태 값을 반환하거나 갱신이 필요할 때, useRef는 특정 DOM에 접근하기 위해 많이 사용합니다. 하지만 리액트 공식문서를 보면 추가로 알 수 있는 내용이 있습니다.useRef returns a mutable ref object whose .current property is..

이전에 작업했던 프로젝트의 유지보수를 위해 오랜만에 해당 프로젝트의 개발 서버를 올렸는데 꽤나 많은 시간이 걸렸습니다. 소스 코드를 수정했을 때도 리빌드 시간이 매우 많이 걸렸습니다. 현재 작업 중인 프로젝트에선 Vite를 도입하여 사용 중이다 보니 체감상 더 크게 느끼게 되었습니다. 이전의 프로젝트들에서 사용했던 Webpack, Rollup과 달리 개발 서버 구동 시 많은 시간을 줄이게 해 준 Vite가 무엇인지 살펴보겠습니다. Unbundled Development 브라우저에서 ESM(ES Modules)을 사용하지 못하던 시절 JavaScript의 native 방식의 모듈 관리를 할 수 없었습니다. 그래서 번들링을 하여 모듈화 된 소스 코드를 합쳐 브라우저에서 동작할 수 있게 했습니다. 하지만 애플..

Store에서 전역 상태 관리뿐만 아니라 서버 상태 관리(비동기 처리 상태 관리)에 대한 처리도 같이 하다 보니 Store가 너무 비대해지는 현상이 발생했습니다. 이에 따라 전역 상태 관리와 서버 상태 관리를 분리시켜 Store의 경량화를 위해 서버 상태 관리 라이브러리를 찾아보게 되었습니다. 관련 라이브러리 레퍼런스가 가장 많은 React Query와 SWR 그리고 현재 RTK(Redux Toolkit)를 사용 중이기 때문에 RTK Query 이렇게 도입을 위해 세 라이브러리를 비교해 보았습니다. React Query https://react-query.tanstack.com/overview SWR https://swr.vercel.app/ko RTK Query https://redux-toolkit...

현재 회사에서 운영 중인 세 개의 application 중 두 개의 application의 경우 React, 남은 하나의 application는 Vue.js 기반이었습니다. 운영 중인 Vue.js 기반의 application을 React로 포팅할려는 니즈가 있었지만 한 번에 빅뱅 하기엔 시간이 부족하여 점진적으로 React로 포팅하고 신규 기능 페이지의 경우는 미리 React로 구성하기로 했습니다. 그렇다 보니 기존 Vue.js 기반의 application에 React component를 띄워야 했고 이때 사용한 방식을 포스팅하고자 합니다. react → vue 변환 모듈 ※ Vue는 Class Component 형태로 작성되었습니다. ReactDOMClient의 createRoot()를 통해 렌더링 되..