ChoboIT

개발 환경 - M1 Macbook Pro (2021) - macOS Ventura 13.2.1 - react@18.2.0 - react-native@0.71.4 Problem 여느 때와 같이 "npx react-native start" 를 통해 RN 앱을 실행시켜 개발을 진행하려 했다. 그런데, 이번에 ""listen EADDRINUSE: address already in use :::8081." 에러가 나타나면서, RN 앱을 실행시킬 수가 없었다. 에러의 내용은 대강 "주소가 이미 사용되고 있어서 지금 ReactNative 를 시킬 수 없다" 라는 뜻인 것 같았다. 주소에서도 포트(Port)가 이미 사용 중이라 새로운 RN 앱을 실행할 수 없는 것처럼 보인다. 바로 구글링을 통해 해결법을 찾았고, 바로..

Problem 이전에 진행하던 RN 프로젝트를 다시 진행하고자 빌드를 시켜보았다. 그런데, 이전에 잘되던 iOS 빌드가 잘 되지 않았다. "npx react-native start" 명령어를 실행시킨 후에, "i" 를 입력시켜 iOS 빌드를 진행했는데, 진행 중에 멈추는 현상이 발생했다. FAIL 문장이라도 명확히 나타난다면, 검색하기 쉬웠을텐데 에러 문구마저 안 나타나니 곤란할 수 밖에 없었다. 그러던 중, iOS 를 빌드하는 다른 명령어로 진행을 시켰더니, "BUILD FAILED" 가 뜨게 되었다. react-native run-ios 에러 로그는 상당히 길었으며, 위 이미지는 에러문에서 일부를 캡쳐한 것이다. 에러 내용 중에서 "value" 에 대한 에러 문장을 복사하여 구글링 하였다. 비슷한 에..

React Native 앱에서도 웹뷰를 사용할 수 있다. "react-native-webview" 라이브러리를 추가하여 웹뷰를 사용하고, 웹뷰와 앱 간에 동작 연동을 해본다. 그리고 그에 대한 내용과 그 과정에서 겪었던 오류들에 대한 내용들을 모두 정리하고자 한다. 개발 환경 - M1 Macbook Pro (2021) - macOS Ventura 13.2.1 - react@18.2.0 - react-native@0.71.4 1. Install Package npm install --save react-native-webview 웹뷰를 사용하고자 하는 RN 프로젝트 폴더로 이동하여, 위 명령어를 입력한다. install 이 완료되면 "package.json" 파일에 dependencies 블럭에 잘 추가되..

본 글에서는 React-Native 기본 프로젝트를 생성하고, 그 과정에서 필자가 겪었던 오류를 해결한 방식에 대해 정리한다. 개발 환경 - M1 Macbook Pro (2021) - OS: Ventura 13.2.1 1. 프로젝트 생성 npx react-native@latest init [PROJECT_NAME] [PROJECT_NAME] 공간에 원하는 프로젝트명을 넣어주면 된다. 그러면 입력한 이름의 RN 폴더와 함께 기본적인 템플릿이 생성된다. 필자의 경우에는 iOS 환경을 생성하면서 에러가 발생했었다. 발견한 에러와 이를 해결한 과정을 정리한다. 2. [ERROR] warn Multiple Podfiles were found 이전에 Ruby 버전으로 에러가 발생했었는데, 이번에는 Cocopods ..

오랜만에 새 React-Native 프로젝트를 생성하던 중에 위 에러를 마주쳤다. 에러의 내용은 Ruby 의 버전이 맞지 않다는 것으로, Ruby 버전을 업데이트 하기로 했다. 업데이트와 동시에 앞으로도 쉽게 업데이트 하기 위해서 Ruby 버전 관리자인 rbenv 까지 설치하기로 한다. 실행 환경 - Macbook M1 Pro (2021) - Ventura 13.2.1 1. brew update brew update 2. brew install ruby-build brew install ruby-build 3. brew install rbenv brew install rbenv 4. rbenv install 2.7.6 rbenv install 2.7.6 5. rbenv global 2.7.6 rbenv ..

개발 중이던 Android 앱의 특정 기능들을 다른 ReactNative 앱과 결합할 일이 생겼다. 그래서 가장 먼저 Android 앱에서 필요한 기능들을 하나의 라이브러리 모듈로 통합을 해두었고, ReactNative 앱에서 생성된 Android Project 에 모듈을 Import 해주었다. 해당 모듈에는 필요한 기능들을 모두 사용하는 Activity 까지 넣어두었기 때문에, ReactNative 앱에서 Activity 를 호출해주기만 하면 됐다. 다만, 본 글에서는 ReactNative 에서 Android Project 를 생성하고, Android Project 내에서 ReactNative 에서 사용할 수 있는 함수를 어떻게 만들고, 호출하는지에 대해 정리한다. 1. Create React Nati..

Problem FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE React-Native의 Android 빌드를 하던 중에 위와 같은 에러가 나타날 때가 있다. 에뮬레이터와 연결되어 있을 때 발생하는 에러로 보이며, 저장 공간이 부족하여 빌드한 앱을 설치할 수 없다는 뜻이다. ..

필자가 사용하는 MAC OS에서 React-Native 개발 환경을 구축하는 방법에 대해 정리해놓고자 한다. React-Native 개발 환경에는 크게 Expo CLI와 React-Native CLI, 2가지가 있다. 그 중에서 React-Native CLI를 구축하는 방법을 정리한다. 1. Homebrew 설치 Homebrew는 Mac에서 필요한 애플리케이션이나 개발 환경 등을 설치하는 데 유용하게 쓰인다. Homebrew에 대한 설치 방법은 Homebrew 홈페이지에서도 확인할 수 있다. 다음 코드를 Terminal 에 입력하여 Homebrew를 설치한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEA..