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

기존 FE 개발 환경을 공통으로 Vagrant을 이용하여 세팅된 VM에서 개발을 진행하다 이슈가 발생했습니다. Vagrant와 사용 중인 VirtualBox와의 버전 충돌로 인해 Vagrant 내부 소스를 수정하여 사용했고, 무거운 VM 작업 환경으로 개발 리소스가 낭비되었습니다. 그러한 불편함을 겪던 도중 Docker Container로 공통된 FE 개발 환경을 구축한다면 컨테이너의 장점을 살려 더 편하고 나은 환경을 구축할 수 있지 않을까?라는 생각이 들었습니다. 그렇게 시작된 Docker Container로 FE 개발 환경을 셋업을 시작했습니다. Docker 설정 1. Dockerfile 작성 및 이미지 빌드 기존에 사용 중이던 개발 환경의 경우 ubuntu 베이스의 node, git, yarn ..

개발을 진행하다 보면 특정 요소의 크기나 속성 등의 변화를 추적해야 하는 case가 많이 생깁니다. 그럴 때마다 외부 라이브러리를 찾는 것보다 Observer API를 통해 직접 간단하게 구현하는 것이 더 깔끔하게 프로젝트를 구성할 수 있습니다. 자주 사용하는 Observer API 위주로 설명을 진행하겠습니다. 요소의 크기 감지 ResizeObserver ResizeObserver는 특정 요소의 크기 변화를 관찰하여 변화가 일어날 경우 지정된 callback 함수를 실행합니다. ※ window resize event의 경우 브라우저의 크기 변화를 관찰 사용방법 // ResizeObserver 요소 지정 const targetElement = document.querySelector('.className..

프로젝트를 진행 중에 특정 커스텀 훅에서 제대로 동작하지 못하는 버그로 인해 해당 이슈가 QA로 들어와 고치면서 단위 테스트에 대한 필요성을 많이 느끼게 되었습니다. 기존에 공용으로 사용 중인 account 모듈에 관해서만 Jest를 이용한 단위 테스트가 적용되어 있어서 현재 진행 중인 프로젝트가 Vite로 구성된 점을 토대로 Vitest를 한번 사용해보았고 간단히 구성을 소개할까 합니다. Vitest? Vitest는 Vite에서 사용되는 테스팅 프레임워크입니다. Jest에서 제공하는 API를 대체할 수 있도록 Vitest에서 호환 가능한 API를 제공하며 단위 테스트 설정에 필요한 mocking, snapshots, coverage의 기능도 포함되어 있습니다. Vitest는 다른 테스팅 프레임워크보다 ..

최근 다수의 이미지 파일을 업로드하여 바로 사용자가 볼 수 있도록 하는 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..