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

React base의 프로젝트에서 작업 중 DOM 노드의 크기에 따라 state 값이 바뀌는 로직을 짜야 되는 경우가 종종 발생합니다. 그럴 때 "useEffect의 dependency에 useRef의 current를 맵핑하는 것이 맞나?"라는 생각을 하게 됩니다. useRef에선 리렌더링이 일어나기 전까진 값의 변화 추적이 안되기 때문에 문제가 발생할 수 있습니다. 해당 케이스에선 어떻게 처리할지 알아보겠습니다. useEffect dependency로 ref 연결 케이스 확인을 위한 예시코드를 작성해보겠습니다. import { useEffect, useRef, useState } from 'react'; ... function Component() { const [isBasicState, setIsBa..

최근에 나온 build tool을 사용하면 Babel을 설정할 필요가 없고 필요한 옵션이 있을 경우에만 따로 명시하면 되다 보니 Babel을 직접 만지는 일이 거의 없어졌습니다. 리프레시 겸 Babel과 Webpack을 직접 설정해 보며 Babel에 관한 내용을 정리하려고 합니다. Babel? Babel은 ECMAScript 2015+(ES6+)의 문법을 웹 브라우저가 처리할 수 있는 이전 버전으로 변환하는 JavaScript 트랜스컴파일러(Transcompiler)입니다. Babel은 Babel 만으로 동작하는 것이 아니라 Babel의 plugin이 동작하여 트랜스컴파일이 되는 것입니다. Babel을 통해 JavaScript 최신 문법과 기능을 사용할 수 있습니다. Presets & Plugins Ba..

처음 실무에서 개발을 할 때 사수로부터 중요성을 그리고 지금까지도 팀원들과 이야기를 계속하는 함수형 프로그래밍은 개발을 하는 데 있어 베이스가 되고 늘 중요성을 이야기합니다. 프로그래밍 패러다임 중 하나이며 선언형 프로그래밍 중 하나인 함수형 프로그래밍에 대해 설명하고자 합니다. 프로그래밍 패러다임(programming paradigm) 프로그래밍 패러다임은 개발자에게 프로그래밍의 관점을 갖게 해 주고 결정하는 역할을 합니다. 최근에는 명령형 프로그래밍과 선언형 프로그래밍으로 구분하여 이야기합니다. 명령형 프로그래밍 ⇒ 어떻게 할 것인가? (How) 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하며 절차적 프로그래밍(Procedural Programming, PP)과 객체 지향 프로그..

팀 문화 중 코드 리뷰 문화를 개선하면서 코드 리뷰의 활성화를 위해 PR 진행 시 팀의 모든 인원을 Reviewer로 추가하기로 했습니다. 기존에는 팀장에게만 리뷰가 걸렸지만 코드 리뷰의 방식이 바뀌어 팀의 모든 인원을 계속 걸어줘야 하다 보니 번거로움이 생겼습니다. 그래서 PR 생성 시 자동으로 Reviewer가 걸리도록 Github Code owners에 대해 알아보고 적용하게 되어 해당 내용을 정리하게 되었습니다. Code owners?Github Code owners는 repository에 owner로 지정하여  PR 생성 시 지정된 owner들이 자동으로 Reviewer로 걸리게 합니다. Github Code owners 관리는 CODEOWNERS 파일로 하며 개인 또는 팀을 지정할 수 있습니다..

작업 중인 프로젝트에서 새롭게 디자인 시스템을 도입하여 공통 컴포넌트를 작업하게 되었습니다. 디자인팀과의 협업과 개발팀 내부에서 공통 컴포넌트 작업 내용 공유를 위해 Storybook의 도입을 고려하게 되었습니다. 이전 회사에서 Storybook을 사용하며 공통 컴포넌트 개발 내역과 지속적으로 수정되는 사안들을 체크하기에 좋은 경험을 가지고 있었기 때문입니다. 그래서 이번 기회에 간단하게 Storybook에 대해 정리하고자 합니다. Storybook? Storybook은 UI 컴포넌트 개발을 돕는 도구로 Story라는 단위로 UI 컴포넌트의 상태를 렌더링 합니다. 각 UI 컴포넌트를 스토리 단위로 구성하여 구축한다면 컴포넌트 개발 시 확인을 위해 따로 코드를 작성할 필요가 없고 컴포넌트의 상태에 따른 U..

기존 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는 다른 테스팅 프레임워크보다 ..