imaustin

Render Props?그게 뭐지?ReactNode를 바로 쓰는거랑 무슨 차이지? React로 작업을 하다보면 ReactNode가 오는 자리에 아래와 같은 코드들이 가끔 나와있는 소스들을 볼 수 있습니다.const Box = ({ children }: { children: (msg: string) => React.ReactNode }) => { return {children("Hello World")};};많이 본듯 하면서도 자세히 보면 파라미터가 ReactNode가 아니라 ReactNode를 반환하는 함수가 와 있죠? 음... 그런데 이걸 쓰는 곳에서도 조금 낯선 문법으로 작성된 코드를 만나게 됩니다. 이렇게 되어 있을 거예요. {(msg) => {msg}}이게 뭘까요? 1. ReactNode와 R..

Flutter로 프로젝트를 만들면데스크탑 애플리케이션도 만들어지던데...ReactNative는? 이 포트스트는 그냥 저 질문에 대한 검색을 하다가 발견한 마이크로소프트의 깃헙 페이지를 때문에 시작했습니다. 프런트엔드에 디바이스를 추가하기 시작하면 모바일 장치 뿐만 아니라 이후에는 데스크탑 디바이스도 함께 고려해야 하지 않을까? 하는 개인적인 생각 때문에 시작했죠.사실 저는 네이티브 데스크탑 애플리케이션은 그냥 네이티브 방식으로 만들어야 한다고 생각하고 살아온 오래된 시니어 엔지니어였습니다. 물론 어느 부분 그 생각은 변함이 없습니다. 하지만 요즘 크로스 플랫폼 개발 방식들이 너무 잘 나와있고, 나름 장점을 제공하고 있어서 나중에는 ReactNative나 Flutter를 사용해서도 한번 해 봐야지... 하..

왜 앱에서 전역 데이터 관리가중요하고 골치 아픈지...하지만 바닥부터 잘 쌓으면 쉬워요~ 웹이든 네이티브든 전역 데이터 관리는 빠질 수 없는 이슈이고 또 솔루션입니다. 뜨거운 감자처럼 이야기 되는 이 전역 데이터는 왜 프런트 개발자들에게 골치아픈 존재로 이야기 되곤 할까요? 1. 배보다 배꼽이 더 큰 전역 데이터 관리일단 왜 전역 데이터가 필요한 지에 대해서 먼저 이야기를 해야겠죠? 사실 전역 데이터든 특정 컴포넌트나 렉시컬 환경에 갇힌 데이터이든 변수를 이용해서 값을 운용한다는 것에는 변함이 없습니다. 이 이슈는 특정 변수를 누군가에게 전달하는 과정에서 발생합니다. 사용하는 방법 때문에 발생하는 거죠.우리가 만드는 웹이든 앱이든 현대 프런트엔드 개발에서 구축하는 앱은 하나의 큰 몸체 안에 들어가 있는 ..

StatusBar의 배경을 투명하게 했는데왜 Android에서 흰색으로 나오지? 앱의 상태바 배경색을 투명하게 만들어야 하는 때가 많죠? 그래서 일단 아래와 같이 설정하게 됩니다.저렇게 하면 iOS에서는 바로 상태바의 배경이 투명으로 바뀌죠. 그런데 android 애뮬레이터로 보면 마치 도배를 잘못해 놓은 것 처럼 하얀색 배경이 떡하니 붙어 있습니다.좀... 난감하죠?왜 이런 현상이 발생할까요? 그건 Android의 시스템 UI 아키텍처와 관련이 있다고 합니다. Android에서 상태바는 기본적으로 '시스템 UI 윈도우'라는 별도의 윈도우 레이어로 처리됩니다. iOS와 달리 backgroundColor="true"를 설정하면 시스템이 '투명'을 '배경없음'으로 해석해서 기본 색상인 흰색을 칠해버리는 거죠..

ReactNative 0.77 버전 발표새로운 스타일링 기능,Android 16KB 지원과 Swift 템플릿 2025년 1월 21일에 React Native 0.77 버전이 발표되었죠. 이번 릴리즈에서는 편리한 스타일링 기능을 포함해서 최신 안드로이드 기기와 호환되도록 16KB 페이지 지원을 포함해서 Objective-C의 호환성을 유지하면서도 Swift로 기술 트랜드를 따라가는 변화도 추가 되었다고 합니다.더 나은 레이아웃 크기 조정 및 블렌딩을 위한 새로운 CSS 기능Android 15 버전 지원 및 16KB 페이지 지원 커뮤니티 CLI 템플릿 업데이트아래의 내용은 공식 문서의 발표 내용을 번역한 내용입니다.1. 하이라이트1-1. 더 나은 레이아웃, 크기 조정 및 블렌딩을 위한 새로운 CSS 기능Re..

내가 쓰고 싶은 서체를 추가하고 싶은데...좀 번거롭지 않을까? 프런트 엔드 작업을 하다보면 룩앤필에 대한 니즈가 계속 발생합니다. 그 중에서 가장 많은 요구 사항중의 하나가 콘텐츠의 가독성에 가장 영향을 많이 미치면서도 캐릭터를 1차원 적으로 만들어 내는 서체이지 않을까 하는 생각이 듭니다. 프런트 엔드 작업을 해 보신 분들은 모두 공감하시겠지만, 아주 오래 전부터 별도의 서체를 설치하는 것은 여러 가지로 예민하고 좀 번거로운 작업이죠?그럼 ReactNative는 어떨까요? 1. 각 OS 별 소스에 배치되어야 하는 서체들...사실 모바일 앱을 크로스플랫폼으로 작업할 때에 가장 신경쓰이는 것들이 리소스들을 파일 형태로 각 OS별 소스코드에 배치해야 하는 작업들입니다. 어떨 때는 좀 계륵같은 느낌도 들죠?..

텍스트 입력하려고 하면아래에서 디바이스 키보드가 올라와서내가 만든 UI를 막아버리네 ㅠㅠ 모바일 레이아웃 디자인과 구현을 하다 보면 이런 경우가 꽤 많이 발생하죠? 커스텀하게 하단에 입력 UI를 배치했는데 정작 입력하려고 하면 디바이스 키보드가 하단에 등장하면서 내가 만든 입력 UI를 가려버립니다.특히 절대 포지션으로 생성해서 애니메이션 피드백으로 등장시키는 경우 하단에 고정되어 있는 UI위치 때문에 골머리를 썩게 되는데요, 이 때에는 어떻게 해야할까요? 가장 간단한 방법은 Keyboard에 이벤트 리스너를 등록시켜두고 키보드가 나타날 때에 KeyboardEvent 객체가 제공해 주는 정보를 사용하는 겁니다. 1. Keyboard 객체에 이벤트 리스너 등록하기다비이스의 키보드가 나타날 때에 이를 확인하기..

ReactNative에서도Animation을 적용할 수 있을까? 이젠 UI를 퍼블리싱 할 때에 UI 애니메니션 적용은 필수적인 요구사항이 되었죠? Web에서는 다양한 애니메이션 라이브러리와 프레임워크들이 지원되기도 하고, 여러가지 방식으로 애니메이션을 해 보는 기회가 많이 있습니다.이젠 사용자 인터페이스를 제공하는 프런트 영역이 브라우저를 넘어 디바이스 영역으로 확장되기 시작하면서 모바일 앱에서도 이런 요구사항들이 점점 더 많이 요구되어지고 있죠? 웹을 기반으로 제공되었던 많은 사용성들로 인해 사용자들에게 인터페이스 사용에 대한 교육효과가 만들어지면서 UX에 대한 경험들이 UI로 확장되어가는 상황이 기하급수적으로 일어나고 있습니다. 1. Mobile App에서의 애니메이션?기존에 모바일 앱이라는 개발 영..

CocoaPods를 쓰는 이유를 모르면ReactNative를 사용하는 이유를 다시 생각해야 해요. ReactNative CLI 프로젝트를 구축할 때에 iOS를 위해서 CocoaPods를 사용합니다. 그런데 왜 CocoaPods를 사용하는 지 생각해 보신 적 있으신가요? 만약 왜 CocoaPods를 써야 하는지 모르고 있다면, ReactNative를 사용하는 이유를 다시 생각해 봐야 합니다. 왜냐하면 ReactNative 자체가 App이 아니기 때문이죠. 1. ReactNative는 왜 사용할까?사실 잘 모르는 분들이 꽤 있습니다. ReactNative를 왜 사용할까요? 생각해 보신적 있나요?모든 라이브러리나 프레임워크는 기술적인 철학(존재하는 이유)이 있습니다. 마찬가지로 ReactNative도 기술적인..

ReactNative를 CLI 방식으로 생성하는 방식을쉘 스크립트로 추상화 하면 좋을텐데... 1. 기본 프로젝트 생성 방법ReactNative를 처음 사용하는 시점에 프로젝트를 CLI로 생성하려고 하면 여러가지 옵션이나 버전에 대한 블로그 체험 아티클들로 인해 본의 아니게 시간을 낭비하는 경우가 종종 있습니다. 현재 글을 작성하는 시점에서 ReactNative CLI(이하 RN-cli 라고 부른다) 프로젝트를 생성하는 방식은 아래와 같습니다.npx @react-native-community/cli@latest init --version 현재 시점의 버전은 0.76.0이며, 이 글을 작성하는 시점에 0.77.0이 릴리즈 되었습니다. 그러나 본 글에서는 0.76.0을 사용하는 것으로 작성했습니다. 그리고..