최근 기술 근황

새로운 프로젝트와의 만남

2023년 말 이직을 했고 새로운 프로젝트를 만났다. 새로운 프로젝트는 turbo repo로 웹, 앱 그외의 package들이 함께 있는 모노레포 형태였고, 메인 프로젝트는 SSR이 없는 Vite + React + TS의 스택을 쓰고 있었다.

Eslint + Prettier을 Biome으로 전환

기존 프로젝트는 Eslint는 거의 사용하지 않고 사실 상 Prettier만 사용하고 있었는데, 이걸 Biome으로 교체했다. Biome은 linter와 formatter의 역할을 동시에 수행하는 툴로 Rust로 작성되었다. 일단 장점은 빠르고… 빠르고, 그리고 빠르다! 린터와 포맷터의 역할을 둘 다 하기 때문에 Biome을 사용하면 Eslint를 사용할 때 줄줄이 달고 다니던 Plugin들을 없앨 수 있다. 단점이라면 Biome에서 제공하는 룰안에서 세팅을 지정하기 때문에 Eslint Plugin을 통해 세세한 룰 세팅을 선호는 사람이라면 Biome의 룰들이 부족하게 느껴질 수 있겠다.

Yarn Classic에서 Pnpm으로 전환

Yarn Classic은 다소 느리고 유령의존성 문제가 있기 때문에 패키지 매니저를 교체하고 싶었고 선택할 수 있는 옵션으로는 크게 Yarn Berry와 Pnpm이 있었으나 Turbo Repo에서는 Yarn berry의 Plug’n’Play 모드를 지원하지 않기 때문에 사실상 선택지는 Pnpm 하나 뿐이었다. 결과적으로 Pnpm으로 잘 전환했고 이와 관련한 글을 작성하려고 하는데 음 언제쓰지? 🤔

React 16에서 18로 버전 업데이트

pnpm으로 마이그레이션하면서 React의 버전도 16에서 18로 업데이트했다. 그 과정에서 다른 라이브러리와 호환성이 안맞는것 같아 React 버전을 이리 바꾸고 저리 바꾸는 고군분투의 과정이 있었는데 그 과정에서 New JSX Transform 이슈와 만나게 됐다.

문제인즉슨 메인 프로젝트의 Package.json에서는 React 16.9 버전을 사용하는 것으로 되어있었으나 유령의존성으로 인해 실제는 Packages에서 사용하는 React 17에 의존하고 있었다. 따라서 메인프로젝트에서 React 17에서 제공하는 New JSX Transform으로 import React from 'react' 구문없이 JSX 사용이 가능했으나, pnpm으로 변환하면서 유령의존성이 사라지고 본래대로 package.json에 적혀있던 16.9 버전에 의존하게 되면서 에러가 터지게 된 것이였다.

이 문제를 해결하면서 그 많던 import React from ‘react’는 어디로 갔을까 이 블로그 글의 도움을 많이 받았는데, 여담이지만 신기하게도 내가 무언가가 궁금해서 찾다보면 항상 이 블로그에서 도움을 많이 받게 되더라. 신기방기 🤫 이 블로그를 일부러 찾아들어간게 아니라 정보를 막 찾다가 ‘앗 내가 필요한 글이다’ 라고 생각하고 보면 이 블로그인 경우가 많았다. 나중엔 내 블로그도 이런 역할을 했음 좋겠단 작은 소망이 있다.

또 React 버전을 업데이트하면서 만나게 된 이슈는 Automatic batching for fewer renders in React 18와 관련되어 있는데, 레거시 코드 중 setState 함수를 동기적으로 사용하도록 의도된 코드가 있었는데 React 18의 createRoot를 사용하게 되면서 auto batching 되어 문제가 되었던 것이다. 나는 무조건 React가 setState를 batching 처리 하는 것으로 알고 있었는데 React 18 이전에서는 React 이벤트 핸들러 내부에서 발생하는 업데이트만 배칭을 하였다, 는 것을 알게 되었다.

라이브러리를 하나 fork 하기도 했는데 react-sortable-tree라고 프로젝트에서 핵심적으로 쓰고 있는 라이브러리인데 3년전 부터 업데이트가 없고 (메인테이너야 어디갔니…) React 17 이후 버전을 지원하지 못하고 있어서 fork 뜬 뒤 React 18을 지원할 수 있도록 커스텀했다. 대체할 만한 다른 라이브러리가 있는지도 찾아보았지만 react-sortable-tree가 제공하는 편의사항(API)를 커버할만한 대체 라이브러리를 찾지 못했다. 🥲 react-sortable-tree를 커스텀 하는 것이 가장 빠른 방법인 듯한데, 기왕에 커스텀 하게 된 거 디자인이나 성능 부분도 좀 더 디벨롭해보면 좋을 듯 싶다.

기술탐구와 블로그에 글쓰기

일단 Pnpm 전환기에 대한 글을 써야하고 사실 작년부터 TreeShaking에 대한 글을 하나 쓰려고 준비 중이였는데 계속 미루고 있다. (요거 파보는 과정에서 TreeShaking을 지원하는 UI 라이브러리도 하나 만들었는데) 이거 말고도 글로 쓰고 싶은 주제들은 꽤 많은데 다 쓰려면 좀 더 부지런을 떨어야 한다. 쨌든 TreeShaking에 이어서 번들러에 많은 관심을 가지고 있고, RSC도 나에겐 아직 탐구 대상이다.

기술 서적 읽기

개인적으로는 올해 기술서적 10개 읽기가 목표인데 작년 연말즈음 이펙티브 타입스크립트를 완독했고, 이 후 한 번 더 가볍게 2회독 했다.

그 후에 읽은 것들은

쏙쏙 들어오는 함수형 코딩
그림과 작동원리로 쉽게 이해하는 AWS 구조와 서비스
혼자서 공부하는 컴퓨터 구조 + 운영체제 (읽는중)

이다. 쏙쏙 책은 설명을 정말 쉽게 잘 풀어서 써 놓은데다가 내용 자체가 유익했고, AWS 책은 전반적으로 AWS가 제공하는 서비스들에 대해서 쓱 훑어보고 싶어서 고른 책이였는데 나쁘지 않았다. 그치만 VPC에 대해서 자세히 알고 싶다면 다른 책을 읽어야 할 듯.

혼자서 공부하는 컴퓨터 구조 + 운영체제는 지금 읽으면 이해도 더 잘 되고 도움이 될 것 같아서 읽고 있다. CS 기초 지식이야 알아두면 어떻게든 도움이 되겠지만, 과거에는 내가 코드를 치고 구현하는 것과 조금 동떨어진 지식인 것 같기도 하고 내가 알고 있는 지식과의 연결고리를 만들기가 어려워 선뜻 손이 가지 않았는데 최근에는 이래저래 읽는 아티클들에서 CS와 관련된 용어들이 자주 등장하다보니 지금쯤 읽어두면 좋지 않을까 싶어서 선택했다.

아 진짜 사놓고 안 읽은 책도 많고 앞으로 읽고 싶은 책도 많은데 뇌가 한 세 개쯤 되었으면 좋겠다!