전체보기

개요이번 글에서는 새로운 아키텍처에서 함께 탄생한 개발 편의 기능인 코드젠(Codegen)에 대해 살펴보려고 한다. Codegen 이란?React Native 공식 문서에도 잘 설명이 되어있는데, 사용자가 정의한 인터페이스에 맞게 네이티브 모듈과 뷰(View) 코드를 작성해 주는 도구이다. 과거 브릿지 시절에는 네이티브 모듈 혹은 뷰를 구현해야 하는 경우 JavaScript 환경과 네이티브 간의 통신 과정을 직접 구현해야 했는데, 반복적인 작업이고 무엇보다 타입 불일치로 인해 오류가 발생하는 경우가 종종 생기기도 했다. Codegen은 이러한 과정을 자동화하여 생산성 향상과 타입 안정성을 확보하는 도구로 자리매김하게 되었다. 다음과 같이 package.json 파일에 codegenConfig 필드를 추가..

React Native Under The Hood 시리즈의 후속작을 소개하고자 한다. 지난 시리즈에서도 React Native의 전반적인 부분을 살펴보긴 했지만, 이제 레거시(Legacy)가 되어버린 브릿지(Bridge), 네이티브 모듈(NativeModules) 등에 대한 내용이라 참고할 일이 점차 줄어들게 될 것이다. React Native 팀에서도 앞으로 레거시 아키텍처에 대한 지원을 더이상 진행하지 않는다고 공지하기도 했고, 최근 React Native 0.80.0 버전이 정식으로 릴리스된 기념으로 새로운 시리즈를 준비하고 있다. React Native Under The Hood 시리즈의 두 번째 내용은 New Architecture에 관한 내용이 주를 이루게 될 것이며, React Native ..

개요 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)에 대해 발표했고, 현재 릴리즈 된 상태이다. 새로운 아키텍처..