전체 글

개요 Hot Module Replacement(HMR)의 기본적인 동작 메커니즘에 대해 살펴보고, 간단한 예제를 통해 살펴보려고 한다. 예제와 설명은 esbuild 번들러에서 HMR 기능을 구현하는 데모를 기반으로 한다. 해당 구현 사항은 아래 저장소에서 확인 가능하니 참고하길 바란다. https://github.com/leegeunhyeok/esbuild-hmr GitHub - leegeunhyeok/esbuild-hmr: PoC of Hot Module Replacement(HMR) for Esbuild PoC of Hot Module Replacement(HMR) for Esbuild. Contribute to leegeunhyeok/esbuild-hmr development by creating ..

벌써 2023년의 마지막, 12월이다. 지금까지 공부를 하고, 일을 해오면서 개인 회고를 진행했던 적이 없었는데, 이제부터 연말에 한 번이라도 개인 회고를 진행할까 한다. 첫 직장에서부터 지금까지 단 한 번의 공백기 없이, 쉬지 않고 달려왔다. 이번 회고를 통해 지난날들을 돌이켜보고, 앞으로의 계획을 세우고자 한다. 본론으로 넘어가기 전에, 회고글은 필자 본인의 매우 주관적인 견해가 포함되어 있으니 감안하고 읽어주면 감사하겠다. 내용 관련해서 다른 생각을 갖고 있거나, 이야기를 해보고 싶다면 언제든지 메일로 연락 주길 바란다. 커리어의 시작 먼저, 필자에 대해 소개하자면 특성화 고졸 출신 개발자이다. 그리고 고등학생때에는 "도제학교"라는 정부 정책의 지원을 받아 고등학교 2학년 2학기부터 졸업까지 실제 ..

커스텀 키보드를 살펴보던 중 DROP에서 이쁜 키캡을 발견하게 되어 구매하게 되었다. DROP은 처음 알게 된 해외 키보드 용품 쇼핑몰인데, 배송 대행지 없이 바로 직구가 가능하다. 이번에 구매한 키캡은 DROP + BIIP MT3 EXTENDED 2048이다. Kit: Alphas ($52) Kit: Modifiers ($52) Kit: Accent Modifiers ($52) 배송비를 포함하여 총 $186를 지불했다. + 관세 그리고 수수료로 약 22,000원 가량 추가로 지불했다. https://drop.com/buy/drop-biip-mt3-extended-custom-keycap-set?defaultSelectionIds=969821 Drop + biip MT3 Extended 2048 Cust..

개요 esbuild 기반의 React Native 번들러를 개발하게 된 계기와 개발을 진행하면서 겪었던 수많은 문제들 그리고 이들을 해결하기까지의 과정을 간략히 소개하려고 한다. 자체 개발한 번들러는 아래 링크에서 확인할 수 있고, 오픈소스로 모두 공개되어 있다. https://react-native-esbuild.vercel.app Getting Started | React Native Esbuild An extremely fast bundler + React Native react-native-esbuild.vercel.app 번들러를 개발하면서 느낀 점은 생각했던 것보다 넓고 깊은 지식을 요구한다는 점이다. 번들러가 동작하는 방식, 트랜스파일링과 최적화 과정, 번들 코드가 실행되는 런타임 그리고 플..

개요 이번 글에서는 React Native 애플리케이션을 개발할 때 접하고 있는 기능들이 어떻게 동작하는지 살펴보려고 한다. Logging 지난 번들러 글에서 살펴본 내용인데, 빌드 타임에 console 폴리필이 코드 최상단에 주입된다는 것을 기억하는가? 해당 폴리필은 React Native 애플리케이션의 로그 포맷 개선 그리고 네이티브로 메시지를 전달하기 위한 기반을 마련하는 폴리필이다. Native 먼저 React Native 애플리케이션 내에서 기록한 콘솔 로그가 어떻게 네이티브 로그에도 기록되는지 한 번 살펴보도록 하자. 폴리필을 확인해 보면 아래와 같이 nativeLoggingHook이 존재할 경우 콘솔 객체의 메소드를 재정의(Override)한다. 코드를 살펴보면 알 수 있지만, 메시지를 로그..

개요 지난 글에서 구현된 네이티브 모듈이 어떻게 등록되고 런타임에서 접근할 수 있게 되는지 살펴보았다. 네이티브 모듈의 메소드가 호출되면 브릿지를 거치게 된다는 부분까지 살펴보았는데, 지난 내용에 이어 어떻게 네이티브로 전달되고, 자바스크립트 런타임에서는 결과를 어떻게 전달받게 되는지 살펴보려고 한다. 브릿지(Bridge) React Native 개발자라면 브릿지(Bridge)에 대해 들어본 적이 있을 것이다. 브릿지는 자바스크립트 런타임과 네이티브 간의 상호작용을 담당하는 React Native의 핵심 기능 중 하나이다. 자바스크립트 런타임에서 네이티브 모듈에 접근하여 동작을 요청하거나, 네이티브에서 자바스크립트 콜백 함수를 호출하여 결과를 전달하는 역할을 수행하는 개념이 곧 브릿지이다. 브릿지는 내부..

개요 지난 글에서는 코드가 번들링 되고 자바스크립트 엔진에서 실행되기까지 거치는 과정에 대해 살펴보았다. 이번 글에서는 React Native의 핵심 기능 중 하나인 네이티브 모듈이 어떻게 동작하는지 파헤쳐보자. Native Modules 네이티브 모듈이란, 네이티브(Kotlin, Java, Swift, Objective-C)에서 구현한 클래스 인스턴스를 자바스크립트 런타임에 노출시켜 실행시킬 수 있도록 하는 React Native의 핵심 기능이다. 이를 통해 네이티브와 상호작용 하여 자바스크립트만으로 할 수 없는 동작을 구현할 수 있게 된다. 새로운 아키텍처가 릴리즈된 이후, Native Modules는 이제 레거시(Legacy)가 되었다. 다만 아직 Deprecated 된 것은 아니고, 새로운 아키텍..

개요 지난 글에서는 프로젝트 코드가 번들링 되는 과정에 대해 알아보았다. 이번 글에서는 만들어진 번들이 어떻게 실행되는지 살펴보도록 하겠다. Architecture React Native를 접해본 개발자라면 기본적인 아키텍처에 대해 여러 번 접한 적이 있을 것이다. 자바스크립트와 네이티브 간의 상호작용은 브릿지(Bridge)를 통해서 이루어진다는 것은 아주 오래전부터 이어져왔다. 하지만 브릿지에는 몇 가지 고질적인 성능 이슈가 있었는데 상호작용을 위해선 JSON으로 직렬화/역직렬화가 필요하고 모든 작업은 비동기적으로 처리된다는 점이다. 이러한 문제를 개선하기 위해서 React Native 팀에서는 새로운 아키텍처(New Architecture)에 대해 발표했고, 현재 릴리즈 된 상태이다. 새로운 아키텍처..

개요 오늘날의 자바스크립트 생태계에서는 기능을 모듈로 분리하여 구현하고 실제 배포 시에는 번들링 과정을 거치게 된다. React Native는 기본적으로 Metro 번들러를 통해 번들링을 수행하는데, 이번 글에서는 React Native 프로젝트 코드가 어떻게 번들링 되는지 살펴보려고 한다. 번들링(Bundling) 번들링이란, 여러 모듈과 파일을 단일 파일로 병합하여 최적화하는 과정을 의미한다. 물론 번들을 조금 더 잘게 나눌 수도 있지만 목적은 여러 모듈과 파일을 묶는 것이다. 자바스크립트 번들러는 대부분 비슷한 과정을 거쳐 번들링을 수행하게 된다. 모듈을 탐색하고 코드를 변환한 후 마무리 작업을 거치게 되는데, React Native의 기본 번들러인 Metro 번들러도 동일한 작업들을 수행한다. 모..

새로운 시리즈 게시글을 작성하기에 앞서 소개하고자 한다. 이번 시리즈의 제목은 React Native Under The Hood 이다. React Native는 보다 쉽게 여러가지 플랫폼의 애플리케이션을 만들 수 있도록 도와준다. 그만큼 내부에 숨겨져 있는 것들이 아주 많다. 우리의 코드가 어떤 과정을 거쳐 빌드되고, 빌드된 코드는 어떻게 실행되며, 자바스크립트 런타임과 네이티브간의 상호작용 그리고 개발 모드에서 사용하는 기능들이 어떻게 동작하는지 등 이번 시리즈를 통해 React Native의 내부를 조금이나마 들여다볼 수 있도록 소개하고자 한다. 내부를 들여다보는 만큼 복잡하고 어려울 수 있지만, 글을 읽는 동안 분명 흥미로울 것이다. 참고로 React Native Under The Hood 시리즈 ..