React Native 모바일 앱 프로젝트 생성

 프로젝트 생성

프로젝트를 생성하고자 하는 폴더에서 npx @react-native-community/cli init [프로젝트명] 

npx @react-native-community/cli init firstapp

해당 폴더에 [프로젝트명]으로 입력된 폴더 및 기본 코드로 구성된 파일들이 생성된다.

위에서 생성한 [프로젝트명] 으로 디렉토리를 이동후 npx react-native run-android 으로 샘플프로그램을 실행한다.

Read More

React native App개발을 위한 환경 구축

환경

• Windows 11
• VSCode
• Docker

필요 프로그램

• node.js - React native 개발은 node.js 필요
• JDK - Android SDK build 도구
• Android Studio - Android App을 빌드하기 위해 필요

설치

• Node.js - LTS버전으로 설치 한다. https://nodejs.org/en/download
• Windows Installer 버전으로 다운로드 후 설치
  
• 
  
• Terminal에서 "docker pull node:22-alpne" 을 입력

• shell 세션으로 다운받은 node.js를 실행하고 yarn을 설치
    > docker run 0it --rm --entrypoint sh node:22-alpine
    # node -v
    # corepack enable yarn
    # yarn -v
  
  
  
  
• 
  

• React-Native CLI 설치
• yarn add react-native-cli
  
• JDK 설치
• ORACLE 싸이트에서 LTS 버전으로 다운로드 후 설치
  
  
  
• Android Studio 설치
• 안드로이드스튜디오 홈페이지의 다운로드 페이지에서 IDE다운로드 후 설치
  
  
  

• 환경 변수 설정
• 사용자 변수 및 Path를 설정한다.
• JAVA_HOME, ANDROID_HOME을 설정하고 PATH에 JAVA_HOME과 ANDROID_HOME을 추가한다.
  
  
  
  
  
  
• 설치 및 환경변수 설정이 완료되면 시스템을 재부팅한다.

Read More

React native로 모바일 앱 개발

남들 다한다는 앱 개발 해보자. 어떻게?

준비과정의 기록

자료를 찾아가며 기록

설치부터 안드로이드 App, iOS App까지

기본개념

React Native

Typescript

JAVA

CSS

• flexbox

kotlin

Docker

Bundle

순서

• 개발환경 구축
• 샘플프로그램 작성

참고

• 리액트네이티브 개발환경 세팅
• DevOps with Docker and Node.js
• How to Dockerize a React Native App?
• React Native Esbuild
• React Native 튜토리얼

Read More

[Error] Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

 React-native 로 페이지 이동하는 것을 연습하는데 계속해서 위 제목과 같은 오류가 발생한다.

Navigating Between Screens 페이지에서 아래와 같이 설치하라고 한 것을 안했다는 이유로 종속성에 문제가 생긴 것이다. react-vativr-screens와 react-native-area-context를 install 하고 나니 정상적으로 실행된다.

> npm install react-native-screens react-native-safe-area-context

노트에는 Warning이 나올 수도 있다는 건데... Error 라니...

관련글

• 리액트 네이티브 관련글
• 개발관련

Read More

React-native App 생성 오류

react-native 로 App을 개발할 때 아래와 같은 명령으로 Typescript 템플릿으로 App을 생성시

$> npx react-native init AwesomeTSProject --template react-native-template-typescript

아래와 같은 오류가 발생

error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-react-native-template-typescript: Not found".

info If you think this is a bug, please open a bug report with the information provided in "D:\\work\\reacttest\\AwesomeTSProject\\yarn-error.log".

info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

yarn remove v1.22.19

[1/2] Removing module react-native-template-react-native-template-typescript...

error This module isn't specified in a package.json file.

info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.

warn Failed to clean up template temp files in node_modules/react-native-template-react-native-template-typescript. This is not a critical error, you can work on your app.

D:\work\reacttest\AwesomeTSProject\node_modules\metro-hermes-compiler\src\emhermesc.js:77

          throw ex;

          ^

RuntimeError: abort(Error: Command failed: yarn add react-native-template-react-native-template-typescript). Build with -s ASSERTIONS=1 for more info.

    at process.abort (D:\work\reacttest\AwesomeTSProject\node_modules\metro-hermes-compiler\src\emhermesc.js:402:15)

Nodejs, JAVA JDK를 새로 깔아도 오류가 계속 발생.

react-native-cli를 새로 설치하니 문제가 해결되었다.

$> npm uninstall react-native-cli

$> yarn global add @react-native-community/cli

$> npx react-native init AwesomeTSProject --templete react-native-typescript

참고

• 리액트 네이티브 관련글
• 개발관련

Read More

React native App 개발 환경 구축

 Windows환경에서 App 개발 환경 구축

 iOS와 Android App을 같이 빌드하기 위해서는 Mac에서 환경을 구축해야 하겠지만 Mac이 없는 관계로 Windows환경에서 환경을 구축해 본다.

설치항목

• Chocolatey
• Node.js
• Python
• React Native CLI
• JDK
• Android Studio
• VisualStudio Code

설치

Chocolatiey 설치

Chocolatey 설치하기

Node.js 설치

        Node.js설치

Python 설치

다운로드 위치 : 파이썬 윈도우즈용 다운로드

윈도우즈환경에서 Python설치하기

React Native CLI 설치

       Powershell을 관리자 모드로 실행

       > choco install -y jdk8 실행

     

     > npm install -g react-native-cli

     >  

Android Studio 설치

     다운로드 위치 : https://developer.android.com/studio

     다운받아 설치

     환경 변수 세팅

•  키보드에서 Win + Pause 버튼을 누른면 설정창이 나온다. 거기서 고급시스템 설정을 누른다.

• 시스템 속성에서 환경 변수(N).. 버튼 클릭

• 시스템변수에서 새로 만들기를 누르고 ANDROID_HOME 변수를 추가하고 위에서 설치한 디렉토리를 기재한다.

• 시스템 변수중 path 항목을 찾아 선택하고 편집 버튼을 눌러 환경 변수 편집 화면을 띄우고 거기서 새로 만들기를 눌러 platform-tools디렉토리를 path에 추가한다.

참고

• 리액트 네이티브 위키
• 리액트 네이티브 관련글

Read More

 React Native ?

  모바일용 앱 개발을 리액트 네이티브로 개발하면 iOS App, Android App을 하나로 관리할 수 있다고 한다.

  리액트 네이티브관련 자료를 찾아보니 Facebook에서 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 개발한 오픈 소스 모바일 애플리케이션 프레임워크이라고 한다.

iOS 와 안드로이드 용 App을 하나의 코드로 개발?

 그렇다고 iOS App을 Windows에서도 빌드할 수 있다는 얘기는 아니다. Mac을 가지고 있으면 iOS용과 안드로이드용 App을 빌드할 수 있으나.... Windows 머신에서는 iOS용 App을 빌드 할 수 없다고 한다. 

참고

• 리액트 네이티브 위키
• 리액트 네이티브 관련글

Read More