xtring.dev

React Native(RN) 프로젝트에서 정확한 Simulator를 지정하지 않고 Run하게 되면 임의의 Simulator 모델이 켜지게 됩니다. 가장 최근에 사용했던 Simulator 모델이 실행되기도 합니다. $ npx react-native run-ios 하지만 다양한 기기에 올려보고 싶고 더 정확히 특정 Simulator을 실행시키고 싶을 때는 어떻게 할까요? 실행 명령어 뒤에 아래와 같은 명령어를 입력해주면 됩니다! --simulator="" 더 구체적으로 아래와 같은 패턴으로 우리의 RN 프로젝트를 특정 simulator에 올릴 수 있습니다! // iPhone $ npx react-native run-ios --simulator="iPhone 8" $ npx react-native run-i..

헤르메스(Hermes)는 React Native에서 안드로이드 앱을 구동할 때 최적화하기 위해 사용합니다. 기존의 React Native 앱은 '실행 시점'에서 JavaScript를 bytecode로 컴파일합니다. 하지만 헤르메스를 사용하면 '빌드 시' bytecode로 컴파일을 하여 빌드 파일의 크기를 줄여주고, 실행시점에서의 컴파일이 필요없게 되어 초기 실행 속도가 개선됩니다. 따라서 헤르메스(Hermes)의 이점으로는 아래 세가지가 있습니다. 1. 앱 실행(launch) 속도가 빨라집니다. 2. APK 사이즈를 줄일 수 있습니다.(실제 20%까지 줄여지는 것을 눈으로 확인함) 3. 메모리 사용량을 줄일 수 있습니다.(20% 절감) 이렇게 좋은 헤르메스는 사용법도 아주 간단합니다. 먼저, 프로젝트의 ..

React Native로 개발한 앱을 Play Store에 업로드하기 위해서 Android 앱을 Build해봅시다. 1. PlayStore 개발자 등록하기 먼저 구글 Play에서 developer 계정을 생성하고 등록합니다. developer.android.com/distribute/console?hl=ko Google Play | Android Developers Google Play Console로 앱과 게임을 게시하고 Google Play에서 비즈니스를 성장시키세요. 앱의 품질을 개선하고, 사용자층과 소통하고, 수익을 창출하기 위한 여러 기능을 활용할 수 있습니다. developer.android.com 개발자 계정을 등록할 때 약 5만원의 등록비가 필요합니다... 2. Android 서명키 생성하..

React Native에서 Image 컴포넌트를 사용하면 이미지를 뷰에 맞추기 위해 resizeMode를 사용하여 일부 상위 컨테이너에 맞추게 됩니다. 하지만 때때로 resizeMode 만을 통해 상위 컨테이너에서 보여주고 싶은 부분을 완벽하게 보여주지 못하는 경우가 발생하기도 합니다. 바로 아래 예시를 살펴봅시다! 위와 같은 경우 item(상위 컨테이너)이 가진 영역 만큼 안에서 이미지는 상하단의 영역을 보장하여 이미지의 사이즈를 조정합니다. 하지만 이 경우 좌우영역의 빈 공간이 발생하게 됩니다. 그렇다면 resizeMode='cover'로 바꾸면 어떻게 될까요? 이미지의 비율에 상관없이 부모 컨테이너의 영역을 모두 덮을 수 있도록 해줍니다. 이 것은 때때로 문제를 가질 수 있는데요. 🤓 cover 속..

React Native 프로젝트에서 .jsx 사용하기 최근 React 프로젝트를 진행하면서 파일 형식을 .jsx로 하다 보니 새 React Native 프로젝트에서 .jsx으로 파일을 생성하니 Error가 터져나왔습니다. 파일 자체를 인식하지 못한다는 메세지를 보고 혹시 jsx 형식 자체가 인식이 되지 않을까 하는 생각에 구글링을 하던 중 찾게 된 jsx 설정 방법입니다. RN > 0.59 일 경우 프로젝트의 Root level에 metro.config.js에서 설정합니다. * 제가 세팅한 RN version은 0.62.2여서 위와 같은 세팅을 진행했습니다. RN 0.57 프로젝트의 Ro..

새 프로젝트를 만들고 앱을 실행하니 React Native version mismatch. JavaScript version: 0.61.5 Native version: 0.62.2 ... 와 같은 에러가 발생했다. 나의 경우엔 기존에 설치되어있는 React Native CLI이 Global로 설치 되어있고 또 다른 프로젝트를 실행한 경우였다. 그런데 여기서 중요한 점은 이제는 React Native가 CLI를 직접 설치하는 것을 권장하지 않으며 npx를 통해 프로젝트를 생성하고 실행하는 것을 밀고 있다. 최근 npx를 통해 프로젝트를 생성하기 때문에 이 문제는 다시는 발생하지 않을 것 같다. 그래도 만약 에러에 허덕이신 분들이 있다면 Global로 설치된 React Native를 제거하고 npx를 통해 ..

최근 iOS 13이 발표되면서 애플이 다크모드를 지원하게 되었습니다. 다크모드를 통해 사용자들은 서비스를 눈이 편하게 볼 수 있는 것이죠. 개발자들은 항상 흰 화면에 많은 텍스트를 보면서 눈이 시리다고 합니다. 그래서 IDE를 사용할 때 검정 배경을 많이 사용하죠.😎 그런데 이제 일반 사용자들에게도 다크 모드를 지원합니다. 현재 많은 서비스들이 이에 대응하고 적용하고 있습니다. 하지만 대부분의 회사들은 이에 대해 바로 대응할 수는 없겠죠? 그런 경우 어떻게 해야할까요?🤔 대응이라는게 플로우를 따라가는 것도 있지만 지원하지 못한다면 서비스에서는 아예 보여주지 않는 방법도 있습니다. 그래서 저희 서비스에서도 당장 적용할 수 없어 다크모드를 강제로 미지원할 수 있도록 앱을 세팅하기로 결정했습니다! 저희 서비스..

React Native에서 기본으로 제공해주는 `Platform`모듈을 사용하면 iOS와 Android 두 플랫폼을 호환할 수 있습니다! React Native는 크로스 플랫폼 앱을 만들기 위해서 쓰여지는 만큼 Platform을 통한 플랫폼 별 기능 또는 UI를 적용하는 것이 매우 중요합니다. 아주아주 간단한 앱의 경우엔 큰 문제 없이 한쪽의 플랫폼을 통한 개발을 하더라도 큰 문제가 없을 수 있습니다. 하지만 수 많은 기능이 생기다 보면 Android에서는 되는데 iOS에서는 동작하지 않는 라이브러리가 있거나 다른 UI를 보여줘야한다거나 하는 경우가 발생합니다. 이를 위해서 PlatForm을 사용하는 것은 필수적이라고 할 수 있겠습니다. 사용 방법은 아주 간단합니다. 천천히 이해해 볼까요? https:/..