React Native를 활용한 WebView 적용해보기 (1)

기운찬곰·2023년 4월 21일

React Native를 활용한 WebView 적용해보기

목록 보기

1/1

Overview

현재 진행 중인 사이드 프로젝트는 모바일 웹 형태입니다. 근데 어느정도 반응형도 가능하도록 만들었기 때문에 패드나 PC에서 사용하기에도 무리가 없게 만들고 있습니다.

근데 막상 이렇게만 하기에는 뭔가 아쉽습니다. PWA도 고려할 수 있겠지만 너무 한정적이란 생각이 들고요. 그리고 요즘에 WebView를 도입해서 웹을 앱처럼 감싸서 사용하는 서비스가 많이 보이는거 같더라고요. WebView를 하면서 생각해볼 문제도 많이 있고요.

그렇기 때문에 한번 저도 WebView를 도전해볼까 합니다. WebView로 만드는 방법은 React Native와 Flutter가 Android와 iOS 동시에 지원이 되기 때문에 2개가 적합한 선택지 인 거 같아보였습니다.

왜 React Native인가?

사실 저는 React Native를 그다지... 좋아하진 않는 거 같습니다. 몇 번 써보긴 했지만 그 때마다 너무 무겁고 복잡해 보인다는 느낌을 버릴 수 없는 거 같습니다. Flutter도 RN보다 더 많이 사용하는거 같고요.

하지만, RN도 여전히 많이 사용하는 것 같아보입니다. 아직까지는 승자와 패자가 결정이 나지 않은 느낌. 그렇기 때문에 저는 다시한번 RN를 도전해보겠습니다. Flutter를 쓰기에는 Dart라는 언어도 배워야 하고 좀 더 오래걸릴 거 같아서요... 그나마 익숙한 RN 를 쓰는 것으로...

문제는 개발환경 세팅

저는 Mac mini M1을 사용하고 있습니다. 2021년 초 대학교 졸업할 때 쯤 샀는데 정말 잘 산거 같습니다. 하지만 용량을 그 당시 돈이 아깝기도 해서 256GB를 산게 지금 발목을 잡더군요.

앱 개발 환경을 세팅하려면 정말 용량이 많이 듭니다. 애뮬레이터부터 시작해서 안드로이드면 안드로이드 스튜디오, 안드로이드 SDK 같은 걸 설치해야하고, iOS면 XCode랑 Cocospods? 를 설치해야 합니다.

용량이 원래는 30G 였는데 이것저것 정리하고 캐시폴더도 정리해서 45G까지 늘렸습니다.

기존 안드로이드 개발환경 제거

기존 안드로이드 스튜디오와 그 외 관련된 도구랑 라이브러리를 먼저 제거하도록 하겠습니다. 이전에 RN랑 Flutter를 해본 적이 있어서 묵은 때가 많습니다. 충돌을 일으킬 수 있으니 다 제거해버린다음 새로 다시 설치하겠습니다.

참고 : https://velog.io/@ejkim/macOS-Android-Studio-완전-삭제
참고 2 : https://developer-ping9.tistory.com/106

일단 저는 위 사이트를 참고해서 아래 4가지 명령을 실행했습니다. Android SDK만 삭제했는데 용량이 엄청 늘어났습니다. 와우... 좀 놀랍군요.

Andorid Studio 어플리케이션을 삭제하는 명령어 → 47.24GB 됨.

rm -Rf /Applications/Android\ Studio.app

모든 Andorid Studio 관련 환경 설정 삭제 → 찾아보니까 저는 없네요

rm -Rf ~/Library/Preferences/AndroidStudio*

AVD(가상 장치) 및 키 저장소 삭제

rm -Rf ~/.android

Android SDK 도구 삭제 → 여기까지 지웠을때 62.53GB 됨… 와우…

rm -Rf ~/Library/Android*

안드로이드 스튜디오 설치

공식 사이트 : https://developer.android.com/studio

요즘에는 Android Studio Flamingo(?)라고 하나요? 안드로이드 스튜디오도 많이 발전한 느낌입니다.

특히, Jetpack Compose UI가 리액트랑 비슷하다고 하던데… 갑자기 RN 웹뷰보다 안드로이드 개발해보면 좋을수도 있겠다는 생각이 드네요. 근데... 그럴시간은 없네요. 퇴사했으니 다시 취준해야죠.. 네...그렇습니다. (~~지금 이러고 있는 것도 취준에는 도움 안될텐데?~~)

용량은 1.1G 정도 됩니다. 다운 용량이… 설치까지 완료했을때 58.69GB가 되었네요. 대략 4G 정도 하는거 같습니다.

저희는 Custom을 선택해줍니다. 아무래도 Standard를 선택하면 거의 다 설치할 거 같아서...

부가적으로 Android SDK, Android SDK Platform, Android Virtual Device 설치하는데 2G 정도 드네요.

마지막으로 안드로이드 관련 환경 변수 설정. 이미 예전에 해놓은게 있네요. ㅎㅎㅎ

export ANDROID_HOME=$HOME/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

React Native 프로젝트 생성

흠… 현재 RN 버전이 0.71.6 입니다? 예전에 했을때가 0.66.4였네요… 흠. 생각보다 큰 발전은 없었나요?? 근데 지금 다시 생각해보니 0.7 에서 뭔가 큰 변화가 있던거 같습니다... 0.6 했을 때 잘 되던게 0.7에서는 안되는게 있네요.. 밑에서 차차 설명드리겠습니다. ㅠㅠ

기본이 typescript라서 따로 추가 설정없이 설치 하면 됩니다. default가 typescript인건 처음보네요..ㅋㅋ

> npx react-native init BookNookApp

✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing CocoaPods dependencies (this may take a few minutes)
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./BookNookApp/ios && pod install".
CocoaPods documentation: https://cocoapods.org/

프로젝트 세팅을 했으니 git init을 하기로 했는데 거부당하더군요.. Xcode에 대한 라이센스를 동의하지 않았기 때문에 발생하는 문제인거 같습니다.

XXX % git

You have not agreed to the Xcode license agreements. You must agree to both license agreements below in order to use Xcode.

Hit the Return key to view the license agreements at '/Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf'

참고 : https://joyfulhome.tistory.com/233

해당 사이트를 참고해서 해결할 수 있었습니다.

sudo xcodebuild -license 실행하고 space를 계속 누르다보면 마지막에 agree하라고 나옵니다.

pnpm 으로 React Native 프로젝트 세팅

참고 : https://runreactnative.dev/posts/pnpm-react-native

저는 요즘에 pnpm을 사용중이기 때문에 여기서도 pnpm을 사용하고 싶습니다. 근데 잘 생각해야 할 게 pnpm으로 하면 되던게 안되는 것들이 많기 때문에 저는 권장하지 않습니다... ㅠㅠ

react native 공식문서에서도 pnpm이 안보이고 npm, yarn만 보이던게 사실 이유가 있어보이네요. 일단 yarn.lock을 제거하고 pnpm install을 해줍니다.

git init
git add . && git commit -m 'initial commit'
git clean -xfd
rm yarn.lock
pnpm install

그리고 pnpm으로 아래 라이브러리는 별도 설치해줘야 합니다.

> pnpm install react-native-gradle-plugin
❯ pnpm install @react-native-community/cli-platform-android -D
❯ pnpm install @react-native-community/cli-platform-ios -D

안 그러면 나중에 실행할 때 라이브러리 못 찾는다고 에러 발생합니다. (제가 그랬습니다.)

> Could not read script '/Users/ckstn0777/Documents/BookNookApp/node_modules/@react-native-community/cli-platform-android/native_modules.gradle' as it does not exist.

그리고 실행(pnpm run android)하면 그래도 에러가 발생할 겁니다. 아주 씨벌건 에러네요..

metro 터미널에서 에러를 더 자세히 알 수 있었습니다.

BUNDLE  ../../../index.js 

error: Error: Unable to resolve module react-native from /Users/ckstn0777/Documents/BookNookApp/index.js: react-native could not be found within the project or in these directories:
  node_modules
  3 |  */
  4 |
> 5 | import {AppRegistry} from 'react-native';
    |                            ^
  6 | import App from './App';
  7 | import {name as appName} from './app.json';

도대체 react-native를 왜 못찾는 걸까요? 저 위에 참고 사이트를 제대로 읽어보면 이런 현상에 대해 말해주고 있습니다. "metro랑 pnpm symlinks랑은 잘 맞지 않는다" 라고 합니다. 이래서 RN에서는 pnpm을 추천드리지 않습니다.

그래도 운좋게도 ms에서 만든 @rnx-kit를 사용하면 문제를 해결할 수 있다고 합니다.

const {makeMetroConfig} = require('@rnx-kit/metro-config');
const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');

module.exports = makeMetroConfig({
  projectRoot: __dirname,
  resolver: {
    resolveRequest: MetroSymlinksResolver(),
  },
});

마치면서

일단 프로젝트 세팅과 안드로이드 애뮬레이터에서만 실행을 시켜서 띄우는데 까지 해봤습니다. 이후 내용은 너무 길어질거 같아서 여기서 한번 짜르도록 하고 다음 시간에 iOS Simulator를 사용해서 띄어보도록 하겠습니다. 사실 iOS 띄우는게 더 힘들었습니다...

기운찬곰

배움을 좋아합니다. 새로운 것을 좋아합니다.

React Native를 활용한 WebView 적용해보기 (1)