[React Native] M1 WEB 개발 환경 설정

• 2021.10.31 이제 우리회사에서 리엑트 기반으로 개발 도입한다고 함.
• 그래서 한번 세팅해보았다..

---

Node, Watchman, React Native command line interface, Xcode가 필요하다.

1. 기본 개발 환경 구성

1-1. Rosetta 설치

Intel 기반 칩용 앱을 실행 할 수 있는 lifeline이다.

Rosetta는 애뮬레이터 형태로 제공되고, 사전에 설치되어 있지 않으므로 수동 설치가 필요하다.

$ /usr/sbin/softwareupdate --install-rosetta --agree-to-license

1-2. iTerm 설치 및 설정

iTerm은 맥에서 개본으로 제공하는 터미널보다 좀더 유용한 터미널 어플리케이션이다.

굳이 필요 없을 듯하여 설치하지 않았지만, 개발환경 세팅 도중에 에러가 발생하여 혹시 몰라 Rosetta가 활성화된 iTerm으로 설치했더니 되었다..

 

https://iterm2.com/downloads.html

위 링크에서 서치 한 후 '정보 가져오기'에서 Rosetta를 활성화한다.

 

1-2. Homebrew 설치

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/<USER_ID>/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

만약 설치 후 Warning: /opt/homebrew/bin is not in your PATH. 경고가 뜬다면 아래 명령을 추가 실행한다.

$ vi ~/.zshrc

--->
export PATH=/opt/homebrew/bin:$PATH

$ source ~/.zshrc

 

 

1-4. Watchman 설치

페이스북에서 제공하는 툴로, 파일시스템의 변경사항을 감지한다.

React native에서는 소스코드 변경이 발생하면, 재로딩을 하기 위해 필요하다.

$ brew install watchman

1-5. Node Version Manager(NVM), node 설치

$ brew install nvm

설치 후 ~/.zshrc에 환경변수를 입력한다.

$ vi ~/.zshrc

--->
# NVM
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

리소스 세션 리로드한다.

$ source ~/.zshrc

node를 설치한다. m1인 경우 15버전 이상부터 지원된다.

$ nvm install 15
$ nvm list

1-6. React Native CLI 설치

$ npm install -g react-native-cli

 

 

 

2. Android 개발 환경 구성

2-1. Android Studio 설치

https://developer.android.com/studio

위 링크에서 android studio를 설치한다.

2-2. SDK Tool 설치 후 환경변수 세팅

Preference -> Apperance & Behavior -> SDK Tools -> Android SDK Command-line Tools가 설치되어있지 않다면 체크한 후 Apply 버튼을 누르면 다운로드를 진행한다.

SDK ~/.zshrc에 환경변수를 설정한다.

$ vi ~/.zshrc

--->
# Android SDK
export ANDROID_HOME=/Users/{username}/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$\ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

$ source ~/.zshrc

 

3. IOS 개발 환경 구성

3-1. Xcode 설치 및 설정

AppStore에서 Xcode를 설치한다.

설치가 완료되면 실행 한 뒤 [Preference > Location > Command Line Tools]에 CLT 설정을 확인 한다.

3-2. Cocoapod 설치

Swift / Objective-C 프로젝트에서 사용하는 외부 라이브러리들을 관리해주는 매니저이다.

M1칩을 사용하는 MacOS 환경에서는 Rosetta를 사용하여 실행한 터미널에서 아래 명령을 실행해야한다.

$ sudo gem install cocoapods
$ sudo gem install ffi

만약 설치도중 아래의 에러가 발생한다면,,,

$ sudo gem install cocoapods                                                                                                                 
Building native extensions. This could take a while...
ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

    current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /Library/Ruby/Site/2.6.0 -r ./siteconf20210101-11931-rfm5dv.rb extconf.rb
checking for ffi.h... *** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
	--with-opt-dir
	--without-opt-dir
	--with-opt-include
	--without-opt-include=${opt-dir}/include
	--with-opt-lib
	--without-opt-lib=${opt-dir}/lib
	--with-make-prog
	--without-make-prog
	--srcdir=.
	--curdir
	--ruby=/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/$(RUBY_BASE_NAME)
	--with-ffi_c-dir
	--without-ffi_c-dir
	--with-ffi_c-include
	--without-ffi_c-include=${ffi_c-dir}/include
	--with-ffi_c-lib
	--without-ffi_c-lib=${ffi_c-dir}/lib
	--enable-system-libffi
	--disable-system-libffi
	--with-libffi-config
	--without-libffi-config
	--with-pkg-config
	--without-pkg-config
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:467:in `try_do': The compiler failed to generate an executable file. (RuntimeError)
You have to install development tools first.
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:585:in `block in try_compile'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:534:in `with_werror'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:585:in `try_compile'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:1109:in `block in have_header'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:959:in `block in checking_for'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:361:in `block (2 levels) in postpone'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:331:in `open'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:361:in `block in postpone'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:331:in `open'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:357:in `postpone'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:958:in `checking_for'
	from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:1108:in `have_header'
	from extconf.rb:10:in `system_libffi_usable?'
	from extconf.rb:42:in `<main>'

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.14.2/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.14.2/gem_make.out

Ruby update를 진행해야한다. 업데이트 진행 후 다시 설치하면 정상적으로 설치된다.

$ curl -L https://get.rvm.io | bash -s stable
$ source /Users/{username}/.rvm/scripts/rvm
$ rvm install Ruby

3-3. Simulator 설치

ios 개발시 Xcode에서 제공하는 가상 디바이스 시뮬레이터가 필요하다.

시뮬레이터는 Xcode에서 [Preference > Components] 로 이동한 뒤, 원하는 버전으로 다운로드하면 설치된다.

 

4. React Native project 실행

프로젝트를 만들 경로로 이동하여 아래의 명령어를 실행한다.

$ react-native init {project명}

 

5. React Native Web 세팅

5-1. react web 패키지 설치

React native에는 react를 기본으로 가지고 있어서 아래의 패키지만 추가로 설치한다.

설치 경로 역시 해당 프로젝트 루트 경로에서 한다.

만약, node-sass 패키지가 존재한다면 제거해야한다. (왜냐, react-dom 설치시 버전 충돌된다. 단!  node-sass를 제거해도 무관하다면!)

$ npm remove node-sass

$ npm install --save react-dom
$ npm install --save-dev @babel/core babel-loader @babel/preset-react
$ npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin

$ npm install react-native-web

5-2. script 설정 및 소스코드 작성

package.json

package.json의 script부분을 아래와 같이 수정한다.

"scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "build-react": "webpack --mode production",
    "start-react": "webpack serve --config ./webpack.config.js --mode development",
    "test": "jest",
    "lint": "eslint ."
  },

webpack.config.js

프로젝트의 루트에 webpack.config.js를 만들고 아래 내용을 작성한다.

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
  	open: true,
    historyApiFallback: true,
    static: './',
    hot: true,
  },
}

index.html

프로젝트 루트 경로에 public 디렉토리를 만들고 index.html을 작성한다.

<!DOCTYPE html>
<html>
  <head>
    <title>React Native Web</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

App.web.js

프로젝트 루트 경로에 App.web.js를 작성한다.

import React from 'react'
import {View, Text} from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello world from react</Text>
    </View>
  )
}

export default App

일반 네이티브와 웹을 같이 쓰는경우에는 **.js,
웹에서만 사용하려면 **.web.js,
네이티브에서만 사용하려면 **.native.js. 
ios에서만 사용하려면 **.ios.js
android에서만 사용하려면 **.android.js

5-3. 실행

$ npm run start-react

뜬다!! 이러면 React Native Web 개발환경 세팅 성공!

---

https://minify.tistory.com/28

[React Native Web] 앱과 웹을 한번에 개발하기 - 1

https://velog.io/@sseumeong2/React-Native-MACM1-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95-%ED%95%98%EA%B8%B0

[React Native] MAC(M1) 개발 환경 설정 하기