최근 우혁님이 작성해주신 Toss Frontend Fundamentals 모의고사 후기 글을 봤다.글에서 소개해주신 컴포넌트의 "단일 책임" 경계, 어떻게 나누시나요? 라는 제목의 디스커션을 읽는데 아래와 같은 고민을 하게 되었다.Render Props 패턴은 무엇을 해결하는 패턴일까?커스텀 훅 기반의 추상화와 컴포넌트 기반의 추상화 언제 어떤 추상화를 사용하는게 효과적일까?이를 알아보기 위해 다양한 리서치를 진행했고 그에 대한 내용을 공유해보려 한다. 아마 이 글을 읽고나면 언제 어떤 형태의 추상화 전략을 사용할지 판단할 수 있는 명확한 근거를 마련할 수 있게 될거라 생각한다.Render Props 패턴은 무엇을 해결하는 패턴일까?https://patterns-dev-kr.github.io/design..
회사에서는 현재 전역 상태 관리 도구로 Zustand를 사용하고 있다. 프로젝트를 진행하다 보면 왜 여기서 store를 사용했지? 하는 의문을 가지게 되는 경우가 많다. 개인적으로 리액트 앱에서 전역 스토어가 필요한 경우가 극히 드물다고 생각한다.Store 보다 Context API를 선호하는 이유나는 대부분의 경우 Context API가 Zustand보다 적합하다고 생각한다. 이 글에서 말한 것 처럼 나는 Context API를 의존성 주입 도구라고 생각한다.Context API를 사용해 만들고 공유하는 상태는 전역 상태를 만드는게 아닌, Provider에서 생성한 "지역 상태" 및 dispatch 함수에 접근할 수 있는 의존성을 주입한다.그래서 Context API를 이용한 전역상태를 Provider..
회사에서는 Tanstack Table을 사용해 테이블 컴포넌트를 구현해 사용하고 있다. 다만 최근에 이 컴포넌트를 개선하는 작업을 진행했다. 2달 정도의 시간을 투자해 진행했고, 과정에서 600개 가량의 테스트를 작성했다. 앞으로도 다양한 테스트를 추가하며 안전성을 높일 생각이다.기존 테이블의 문제점은 아래와 같았다:** 1. 태그 사용으로 인한 구조적 한계** 태그는 사용 되어야 하는 명확한 태그 중첩 구조가 존재한다. 그로 인해 칼럼 리사이즈 기능, 가상화, 칼럼 드래그 앤 드롭을 통한 재정렬 기능 등등의 구현에 불필요한 복잡도가 추가되고 있었다.2. Tanstack Table의 철학과 맞지 않는 테이블 컴포넌트 API 설계Tanstack Table에서는 제어/비제어 상태가 명확하게 구분되어 있다...
최근 리팩토링과 관련된 작업을 많이 진행했다. 이 작업을 진행하며 좋은 코드에 대한 고민을 많이 하게 되었고, 공부도 많이 했다. 클린코드에 관해 공부하다 보면 가독성, SOLID 원칙, 응집도, 결합도 등의 단어를 많이 듣게 된다. 개인적으로 이 단어들 대부분은 처음 듣고 알았을 때 직관적으로 다가오지 않았다. 이 글에서는 응집도, 결합도, 추상화의 관점에서 좋고 나쁜 코드에 대해 공유해보려 한다.좋은 코드란 무엇이고, 왜 좋은 코드를 작성해야 할까? 내 생각에 좋은 코드를 작성해야 하는 이유는 단 하나다. 변화에 잘 대응하기 위해서다.헤라클레이토스는 “The only constant is change(세상에서 변하지 않는 것은 오직 변화뿐이다).” 라는 철학적 명제를 남겼다. 이 말은 세상에 존재하는..
취준생 시절, 디자인 시스템을 구현하는 프로젝트를 여러번 진행했다. 처음에는 '그저 공통 컴포넌트를 만드는 일'이라 생각했다. 디자인 시스템이라는 단어가 주는 무게감이 있었지만, 솔직히 그때는 디자인 시스템에 대해 긍정적인 감정을 느낀 적이 거의 없었다. 코드 구현에만 급급했고, 디자이너의 관점을 제대로 이해하려 하지 않았으며, 소통보다는 '내 방식대로' 하려 했다. 그러다 보니 디자인 시스템을 빈번하게 수정해야 했고, 경우에 따라서는 아예 초기부터 다시 설계해야 하는 경우도 빈번했다.취업 후 디자인 시스템 관련 업무를 다시 맡게 되었을 때는 다른 마음가짐이었다. 단순히 코드 구현을 넘어 디자인 시스템이 가진 진정한 가치와 의미를 이해하고 싶었다. 책임감도 달라졌다. 이번에는 제대로 해보자는 생각에 여러..
React 개발자라면 누구나 한 번쯤은 Cotext API를 사용해 봤을 것이다. 하지만 많은 개발자들이 Context API를 단순히 상태 관리 도구로 생각하고 있는 경우가 많다. 오늘은 이에 대해 얘기하고, Context API의 진짜 목적과 내부 구현을 파헤쳐 보려 한다.Context API란 무엇일까?나는 Context API가 상태 관리 도구보다는 의존성 주입(Dependency Injection) 도구라 생각했다. 적어도 상태 관리 도구라 생각하는 것보다는 좋은 답변이라 생각한다. 다만 이 글의 결론에도 적어뒀지만, 이 글을 적으며 그 관점에 변화가 생겼다. 내부 동작을 분석하며 의존성 주입의 도구에 그치지 않고 컴포넌트 렌더링 사이클과 동기화시켜 안정적으로 사용할 수 있게 관리해주는 API ..
createPortal은 어떻게 동작할까?createPortal의 주요 특징은 다음과 같다:Portal을 통핸 렌더링된 컴포넌트는 DOM 상에서는 다른 위치에 있더라도, React 트리에서는 원래 위치의 컨텍스트와 이벤트 버블링을 유지한다.부모 컴포넌트의 스타일링이나 오버레이의 영향을 받지 않고 독립적으로 렌더링할 수 있다.createPortal의 세부 구현을 보자:export function createPortal( children: ReactNodeList, containerInfo: any, // TODO: figure out the API for cross-renderer implementation. implementation: any, key: ?string = null,): React..
최근 회사에서 차세대 프로젝트를 진행하고 있다. 그러던 중 회사 동료가 이런 질문을 했다.이전에도 Tanstack Query를 사용하며 이러한 문제를 겪었고, 당시에 내가 생각했던 문제의 원인과 해결책을 공유했다.나는 use 훅을 보고 useSuspenseQuery 내부적으로 use를 쓴다고 혼자 멋대로 생각했다. 회사에 재직해 비즈니스를 다루는 개발자가 된 지금은 이런식으로 근거를 내리고 판단해서는 안된다는 생각이 들었다. 그래서 useSuspenseQuery의 내부 동작을 알아보았고, 그 과정에서 리액트에서 ErrorBoudary와 Suspense가 어떻게 동작하는지, 그리고 use훅은 어떻게 구현되어 있는지 등을 알게되었다. 오늘은 이 내용에 대해 공유해보려 한다.ErrorBoundary와 Susp..