[React Native] Metro란

리액트 네이티브는 메트로를 사용하여 javascript 코드와 에셋을 빌드합니다.Metro 구성메트로의 구성 옵션은 프로젝트의 metro.config.js 파일에서 사용자 지정할 수 있습니다.객체로 Metro의 기본 구성에 추가로 병합됩니다.함수로 Metro의 기본 구성을 인수로 받아 최종 구성 객체를 반환해야 합니다.react native에서는 @ract-native/metro-config를 확장하는 metro 구성을 사용해야 합니다. 이 패키지들은 react native 앱을 빌드하고 실행하는 데 필요한 기본 설정을 포함하고 있습니다.아래는 react native 템플릿 프로젝트의 기본 metro.config.js 파일입니다.const {getDefaultConfig, mergeConfig} = re..

• format_list_bulleted React Native
• · 2024. 6. 26.
• textsms

[React Native] Fast Refresh란

fast refresh는 react native의 기능으로 react 컴포넌트에서 변경 사항에 대해 거의 즉각적인 피드백을 제공해줍니다. fast refresh는 기본적으로 활성화되어 있으며 react native dev menu에서 enable fast refresh를 토글할 수 있습니다. fast refresh가 활성화되면 대부분의 수정 사항은 1~2초 내에 화면에 반영됩니다.작동 원리react 컴포넌트만 내보내는 모듈을 수정하면, fast refresh는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다.react 컴포넌트가 아닌 것을 내보내는 모듈을 수정하면, fast refresh는 해당 모듈과 이를 가져오는 다른 모듈들도 다시 실행합니다. 예를 들어, Button.js와 Modal...

• format_list_bulleted React Native
• · 2024. 6. 26.
• textsms

[React Native] 핸드폰(device)에서 실행하는법

Android 기기에서 앱 실행하기1. USB 디버깅 활성화대부분의 android 기기는 기본적으로 google play에서 다운로드한 앱만 설치 및 실행할 수 있습니다. 개발 중에 앱을 설치하려면 기기에서 USB 디버깅을 활성화해야 합니다.USB 디버깅을 활성화하려면 먼저 개발자 옵션 메뉴를 활성화해야 합니다. 설정 -> 휴대전화 정보 -> 소프트웨어 정보로 이동한 후, 빌드 번호 항목을 7번 누릅니다. 그런 다음 설정 -> 개발자 옵션으로 들어가서 USB 디버깅을 활성화합니다.2. 기기를 USB로 연결이제 react native 프로젝트를 실행할 android 기기를 연결합니다. 그런 다음 adb(android debug bridge)가 기기를 제대로 인식하는지 확인합니다.adb devicesemul..

• format_list_bulleted React Native
• · 2024. 6. 26.
• textsms

[React Native] Android(java) 앱 통합하기(합치기)

react native는 처음부터 새로운 모바일 앱을 만들때 훌륭한 도구입니다. 하지만 기존 네이티브 애플리케이션도 단일 뷰나 사용자 흐름을 추가하는 데도 잘 동작합니다. 몇 가지 단계만 새로운 react native 기반 기능, 화면, 뷰 등을 추가할 수 있습니다.핵심 개념react native 구성 요소를 android 애플리케이션에 통합하기 위한 핵심 사항은 다음과 같습니다.react native 의존성 및 디렉토리 구조 설정javascript로 react native 구성 요소 개발android 앱에 ReactRootView 추가react native 서버 시작 및 네이티브 애플리케이션 실행애플리케이션의 react native 측면이 예상대로 작동하는지 확인전제 조건react native 앱을 빌..

• format_list_bulleted React Native
• · 2024. 6. 26.
• textsms

[React Native] Window에서 Android 환경 설정 시작하기

Android Studio를 사용하여 프로젝트를 실행할 수 있도록 환경을 설정하는 방법을 배웁니다. Android 에뮬레이터로 개발하고, 로컬에서 앱을 빌드하는 등의 작업을 할 수 있습니다.환경 설정이 필요한 이유프레임워크를 사용하는 경우 환경 설정이 필요하지 않습니다. android studio 또는 xcode를 설정할 필요가 없습니다. 프레임워크가 기본 앱 구축을 처리해주기 때문입니다. 프레임워크를 사용하지 못하게 하는 제약조건이 있거나 자체 프레임워크를 작성하려는 경우 로컬 환경을 설정하는 것이 필요합니다.의존성 설치Node, React Native CLI, JDK, Android Studio가 필요합니다. 앱 개발에는 원하는 편집기를 사용할 수 있지만, Android용 React Native 앱을..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] 시작하기

react native는 react를 아는 개발자드링 네이티브 앱을 만들 수 있게 해줍니다. 동시에 네이티브 개발자들도 react native를 사용하여 공통 기능을 한 번만 작성함으로써 네이티브 플랫폼 간의 일관성을 얻을 수 있습니다.react native는 모든 필요한 API를 제공하여 상품 준비가 된 앱을 만들 수 있게 해준느 프레임워크입니다.react native를 프레임워크 없이도 사용할 수 있지만, 대부분의 개발자들은 expo와 같은 react native 프레임워크를 사용하는 것이 더 유익합니다. expo는 파일 기반 라우팅, 고품질의 범용 라이브러리, 네이티브 파일을 관리하지 않고도 네이티브 코드를 수정할 수 있는 플러그인 작성 기능을 제공합니다.프레임워크 없이 React Native를 사..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms