Overview 이전 포스팅 Conceptual Model of React Suspense과, Algebraic Effects of React Suspense에서 React가 Suspense를 어떤 관점으로 바라보고 있는지, 그리고 어떤 개념적 모델을 바탕으로 구성되어 있는지를 살펴보았습니다. 이번 포스팅에서는 이러한 내용들을 바탕으로 Suspense가 실제로 React 소스 코드 레벨에서 어떻게 구현되어 있고, 구체적으로 어떤 과정을 거쳐 동작하게 되는지를 간략하게 살펴보도록 하겠습니다. (소스 코드는 글을 작성하는 시점의 최신 코드를 기반으로 하지만, React 프로젝트는 코드가 굉장히 자주 바뀌는 편이기 때문에 변경사항이 생길 수 있습니다.) Recap Example Code 이전 포스팅에서 언급한..

Overview React Suspense의 개념적 모델을 다룬 이전 포스팅의 마지막 부분에서 Dan Abramov(React Core Team)의 Suspense에 대한 Comment를 잠깐 언급했습니다. 이 Comment에 대한 구체적인 내용은 아래 인용문과 같습니다. (아래 인용문은 Suspense가 Fallback UI를 처리하기 위해서 throw 된 Promise를 사용한다는 내용을 이해하고 있다는 것을 전제로 합니다. 해당 내용에 대한 이해가 필요하다면 이에 대해 다룬 이전 포스팅을 참고해 주세요) This builds on a React feature called “Suspense”, which is in active development for the data fetching use cas..

Overview React v18의 정식 릴리즈가 나오면서 Automatic Batching, Transition등 여러 Feature들이 소개되었습니다. 그중에는 React v16.6에 Experimental Feature로 등장했다가 이번에 정식으로 탑재된 "Suspense"에 대한 내용도 추가되어 있는데, 이번 포스팅에서는 특별히 이 Suspense라는 기능에 대해서 살펴보려고 합니다. What is Suspense? Suspense lets your components “wait” for something before they can render. In this example, two components wait for an asynchronous API call to fetch some data..

Overview 모노레포의 문화적 의의를 다룬 이전 포스팅에 이어, 이번 포스팅 시리즈에서는 실제로 모노레포를 팀에 도입하기 위해 거쳐왔던 여러 기술적인 고려 사항들을 간단하게 이야기해보려고 합니다. "모노레포는 이렇게 운영하는 것이 좋다"라는 가이드라기보다는 프론트엔드 팀이 모노레포로 전환하는 과정에서 겪은 여러 문제들과, 이를 해결해 나가는 과정에 대한 기록에 가까울 것 같습니다. 글은 다음과 같은 순서로 작성되었습니다. Workspaces & Dependencies Global Lint & Prettier Deploy & Branch Management Plugin (Optional) Sparse Checkout CI / CD Pipeline 프론트엔드 서비스들을 모노레포로 이전하기 전과 후 CI..

Overview 회사 내 관리자페이지를 완전히 새로 기획하여 만들게 되면서, 이전에 급하게 만드느라 추가하지 못했던 기능들과 검토할 기회조차 없었던 기능들을 추가하려고 노력했다. 그 중에 하나가 바로 프로그램을 TDD를 사용하여 작성하는 방식이었는데, 사용자의 잔고와 사내의 잔고가 오가는 일이라 (자세한 내용은 사내 규정상 밝힐 수가 없다.) 잘못된 로직의 코드가 들어가게 되면, 큰 피해가 생길수도 있기 때문에 테스트 코드의 중요성을 깨닫게 되었고, 같이 개발하는 팀원들에게 부분적으로 TDD를 도입하는 방식을 제안했었다. TDD 도입의 현실적인 한계. TDD는 단순히 프로그램을 작성하고, 그 작성한 코드가 제대로 돌아가는지를 테스트하는 테스트코드를 작성한다는 개념이 아니라는 것을 이해하였다. TDD는 일..