[Radix-UI] React의 Automatic Batching에 의한 문제 해결 사례

개요디자인 시스템 구축을 위해 `Radix-UI` 를 사용 중인데 내부 구조를 살펴보다가 이벤트 핸들링 방식에 대해 궁금하여 오픈 소스 코드를 살펴보던 중 2년전 React가 17에서 18로 업데이트 되면서 이벤트 처리에 대한 큰 변화로인해 트러블 슈팅을 겪은 사례에 대해 알게되어 조사하게되었다. (이 글은 저의 트러블 슈팅이 아닙니다...!) 사건의 발단으로는 하나의 이슈 사항으로 인해 PR이 머지 된 사례가 있었다. 이슈로는 `ContextMenu`에 대한 일관된 동작이 이루어지지 않는 다는 것. 이는 React 18의 핵심 변경 사항 중 하나로, 모든 이벤트 핸들러에 일관되게 자동 일괄 처리(automatic batching)를 도입한 것으로, 특정 이벤트만 일괄 처리를 적용이 가능했던 17버전과는..

• format_list_bulleted 개발/테크톡
• · 2024. 10. 27.
• textsms

React-Native 아키텍처 변화 알아보기

개요 이번엔 RN(React Native)을 살펴볼 일이 생겼는데, 문득 RN이 어떤 방식으로 JavaScript에서 브라우저 엔진 없이 Native(iOS,Android)에서 상호작용과 UI가 그려지는지 궁금하게 되었다. 이번 글은 RN의 과거와 현재의 아키텍처가 어떤 식으로 구성되어 왔고, 개선된 아키텍처는 어떤 방식의 메커니즘을 가지게 되는지 정리해 보고자 한다. 웹 개발만 해 오던 분들이라면 너무 깊게 이해할 필요는 없을 것 같고, 단순히 React와 RN이 어떻게 다르게 동작하는지를 아키텍처 관점으로만 가볍게 봐도 괜찮을 것 같다. 먼저 RN의 메커니즘을 이해하기 위해선 아키텍처를 이해해야 하는데, RN은 0.68 버전 전부터 적용해 오던 브릿지(Bridge) 메커니즘을 적용하고 있었다. 하지만..

• format_list_bulleted 개발/테크톡
• · 2024. 4. 13.
• textsms

📦 패키지 최적화를 통해 런타임 성능 향상 시키기

개요처음 시작은 도커 최적화에서 시작되었다.  사내 프로젝트 진행 중 yarn-berry 마이그레이션 후 CI/CD를 진행하는 도중. 회사에서 사용되는 gitlab의 저버전 이슈로 인해 ci 중 캐싱이 되지 않고, 필요 이상의 .yarn 내부의 패키지와 dev module들이 포함되어 올라가는 이슈가 발생하여 빌드 최적화에 관심을 두게 되었다.그 후 운영 단계에서 최적화는 반드시 거쳐 가야 하는 순번이라 생각했고, 이번 기회에 번들링 최적화를 진행하게 되었다. Bundle Size 최적화What is Bundle?여러 개의 파일을 묶어서 처리되는 의미. Javascript 파일들을 묶어서 생성되고, 웹 애플리케이션에서 필요한 리소스를 단일 파일로 묶어서 관리하고 전달하는데 사용된다. 웹 애플리케이션에선 ..

• format_list_bulleted 회사/개선
• · 2023. 12. 1.
• textsms

yarn-berry 마이그레이션 적용기

npm? pnpm? yarn? Yarn Berry? npm vs yarnNPM(Node Package Manager)는 Javascript를 위한 패키지 매니저. command-line으로 오픈 소스를 설치하고 활용할 수 있는 도구이다. (이전까지는 기능을 직접 추가하거나 Github에서 다운 받아서 넣었다)Yarn은 Facebook에서 만든 Javascript 패키지 매니저. npm의 단점을 향상시키기 위해 만들어진 매니저 툴이며, 속도, 안정성, 보안성등이 npm보다는 높다. 실제로 데이터를 캐시에 저장하고 병렬처리하여 npm보다 성능과 속도가 더 빠르다는 것을 알 수 있다. 하지만 18년도 쯤 부터는 npm과 yarn 성능 차이가 크게 나지 않아. 접근성으로 오히려 npm이 더 역사가 깊고 접근성이..

• format_list_bulleted 회사/도입
• · 2023. 7. 31.
• textsms