cyphen156
리액트 네이티브와 개발 환경 설정 본문
오늘은 리액트 네이티브에 대해 알아보고, 크로스 플랫폼 개발을 위한 환경설정하는법을 알아보겠습니다.
What is React-Native
리액트 네이티브는 Meta(구 Facebook)에서 만든 안드로이드, IOS, 웹 개발을 모두 한번에 하기 위한 크로스 플랫폼 개발을 도와주는 Javascript/Typescript 기반의 프레임워크입니다.
리액트 네이티브를 쓰면 단 한번의 빌드만으로 여러가지 플랫폼용 어플리케이션을 동시에 만들 수 있어 개발 시간을 획기적으로 단축시킬 수 있다는 점이 있고, JavaScript와 HTML을 합쳐놓은 듯한 문법인 JSX를 사용하고, 리액트와 상당히 유사하기 때문에 입문 및 웹 개발자들에게 배우기 편하다는 점이 있습니다.
Why React-Native?
그러면 리액트로 개발하면되지 궂이 리액트 네이티브를 배울 필요가 있느냐?라는 의문이 생기는데 리액트는 웹 기반으로 작성되었기 때문에 네이티브 앱에서 사용가능한 여러기능(휴대폰 인앱 캘린더, 전화, 카메라 앱 등)들을 개발한 앱에서 사용할 수 없는 경우가 많습니다. 그러한 기능들을 가져와 성능을 100% 끌어낼 수는 없지만 어느정도 사용할 수 있도록 해주는 것이 크로스 플랫폼인 리액트 네이티브입니다.
또 다른 크로스 플랫폼 프레임워크로 Google의 Flutter가 있는데 궂이 리액트 네이티브를 쓰느냐?고 물을 수 있는데, 저는 궂이 Dart라는 언어를 배울 필요 없이 기존에 알고있던 JavaScript/Typescript를 사용한 어플리케이션을 제작하고 싶었습니다.
#여담으로 저는 Meta보다는 Google을 더 좋아합니다.
React-Native 환경 설정하기
다른것은 필요 없고 공식 페이지에 가서 하라는대로 따라하면 됩니다.
Setting up the development environment · React Native
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
웹이 친숙하시다면 Expo, 실제 안드로이드, IOS 가상환경을 만들어서 앱을 개발하고 싶다면 CLI를 통한 설치방법이 있습니다.
이 중에서 저는 CLI환경, 윈도우즈, 그리고 안드로이드를 기준으로 설치하겠습니다.
1. Node.JS를 설치하기
리액트 네이티브는 자바스크립트 기반의 프레임워크이기때문에 Node.js가 있어야 합니다.
저는 19.3.0을 설치하였지만 LTS버전을 추천드립니다. 최신 버전보다 좀 더 안정적이고, 노드 모듈 패키지들이 안정적으로 작동하거든요
노드버전은 14.1.0이상이면 됩니다.
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
노드를 설치하실때 한가지 주의할 점이 있는데 Next를 계속 누르다가 체크박스가 하나 나올겁니다 꼭 체크해주세요.
Chocolatey라는것을 어차피 깔아야 하는데 체크하면 알아서 설치해줄겁니다.
Chocolatey는 Windows PowerShell이라는 퍼런 창이 나와서 깔아주는데 설치가 다 됫다고 자동으로 꺼지거나 하지 않으니까 적당히 멈춰잇는거 같다 싶으면 엔터 한 5번 눌러보고서 1분쯤 기다려보고 그래도 반응이 없으면 다 설치된 것이니 창을 꺼주시면 됩니다.
모든 설치가 완료된 후에는 CMD(명령 프롬프트)창을 열어서 node -v를 쳐서 제대로 버전이 설치되었는지 확인해주세요
2. JAVA Development Kit 설치하기
우리는 리액트 네이티브를 할건데 왜 JDK가 필요하냐? 하신다면 안드로이드 스튜디오의 에뮬레이터(가상머신)을 사용해야 하기 때문입니다.
2023.01.18일 기준으로 최신 버전을 사용하면 react-native가 제대로 작동하지 않습니다. 이것을 해결하기 위해 저는 JDK18버전을 사용했습니다.
※JDK11이상부터 JDK18버전까지만 사용해주세요 JDK19를 설치하시면 메트로 명령어가 작동안합니다.
Java Archive Downloads - Java SE 18 (oracle.com)
Java Archive Downloads - Java SE 18
WARNING: These older versions of the JDK are provided to help developers debug issues in older systems. They are not updated with the latest security patches and are not recommended for use in production. For production use Oracle recommends downloading th
www.oracle.com
자바가 다 설치되면 노드와 마찬가지로 CMD에 Java-version을 쳐서 제대로 설치되었는지 확인해주세요.
3. 안드로이드 스튜디오 설치하기/
안드로이드는 할것이 많습니다. 우선 최신버전의 안드로이드 스튜디오를 설치합니다.
Download Android Studio & App Tools - Android Developers
Download Android Studio & App Tools - Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
developer.android.com
설치가 완료되고 나면 more actions안에 SDK manager와 Virtual Device Manager가 있습니다. 저 두개를 추가적으로 설정 할겁니다.
3-1 SDK Manager설정하기
SDK Manager를 열어보면 Platfroms하위의 Android 종속성을 설치할 수 있습니다.
너무 높은 수준의 버전을 사용하거나 너무 낮은 버전을 사용하면 호환성 문제가 생기기 때문에 적당한 수준의 버전을 사용하는것이 중요합니다. 하지만 리액트 네이티브는 31버전 이상부터 지원되기 때문에 오른쪽 하단의 show pakage details눌러서 아래의 패키지를 apply해주시면 됩니다.
- Android SDK Platform 31
- Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image
저는 SDK 31(S)를 설치하였습니다.
또 SDK Tools로 넘어가서 Android SDK Build-Tools 31.0.0을 선택하여 apply하고 설치해 주시면 됩니다.
3-2 Android Vitual Device(가상 기기)만들기
리액트 네이티브를 통해 만든 앱을 구동시켜볼 가상 에뮬레이터가 필요합니다. 실제 휴대폰을 USB드라이버에 연결하여 사용하는 방법(포팅/Porting)도 있지만 이것은 안쓰는 휴대폰이 있는 경우에 사용하면 좋기 때문에 가상환경처럼 격리된 공간을 만들어서 사용할 것입니다.
Create device를 눌러 에뮬레이터를 만듭니다.
처음 나오는것은 휴대폰 외형입니다. 적당히 원하는 기기를 선택해주고 Next를 누르면 안드로이드 OS버전을 선택해야 합니다. 이것은 아까 sdk에서 설정햇던 31(S)를 다운로드 받아서 사용해야 합니다. 하위버전을 사용할 경우 호환성문제가 생길 수 있어요.
다음으로 넘기면 이것저것 설정할 수 있는데 건드리지 않고 그냥 Finish를 눌러주세요.
그러고나면 짜잔! 가상 디바이스가 하나 만들어졌습니다.
3-3 시스템 환경 변수 편집하기
다음으로 할것은 시스템 환경 변수 편집입니다. 윈도우 검색창에 환경 변수를 검색하여 관리자 권한으로 실행시켜주세요
그러면 시스템 속성-고급 창이 뜰텐데 오른쪽 하단의 환경 변수를 눌러주시면
이런창이 뜰텐데 새로만들기를 눌러 변수명을 ANDROID_HOME, 값은 안드로이드가 설치된 경로를 찾아가서 SDK폴더를 입력해 주어야 합니다. 디렉토리 찾아보기를 통해 폴더 경로를 찾으면 됩니다. 보통 기본 값으로 c:\user\username\AppData\Local\Android\Sdk로 지정되어 있습니다. 여기서 user는 사용자, username은 윈도우즈 설치시 사용하신 로그온 유저 이름입니다.
※ 만약 AppData폴더가 보이지 않는다면 숨김항목이라서 안보이는 것이니 아무 폴더나 열어서 보기-표시-숨김항목보기를 체크해주면 나타날겁니다.
그리고 나서는 path설정을 해줘야 하는데 이번에는 새로 만들지 않고 기존에 있는 변수에 추가할 겁니다. 사용자변수 목록에 있는 Path를 편집해주세요 추가할 내용은 %LOCALAPPDATA%\Android\Sdk\platform-tools입니다.
이제 환경변수까지 모두 설정을 마쳤습니다. 마지막으로 남은 것은 프로젝트를 만드는 것입니다.
4. React-native Cli로 프로젝트 생성하기
맨 먼저 주의사항은 절대로 폴더 경로에 한글넣지마세요 영어로만 쓰셔야합니다. 만약 한글이 있으면 yarn, npx명령어가 제대로 작동하지 않을 수 있습니다.
4-1 프로젝트 폴더 생성하기
원하는 드라이브안에 빈 폴더를 하나 만듭니다. 저는 Project로 만들겠습니다. 그 다음 비주얼 스튜디오 Code를 켜고 방금 만든 Project폴더를 엽니다.
도구모음창(비주얼 코드 창 맨 위)를 보면 터미널이 있습니다. 터미널-새 터미널-프로젝트명을 눌러 터미널창을 열어주세요
저 터미널창에 명령어를 쓸겁니다. 첫 명령어로 npm uninstall -g react-native-cli @react-native-community/cli를 입력해주세요. 해당 명령어는 리액트 네이티브 관련 cli명령어를 초기화시켜주는 역할을 합니다.
※ cli관련해서 오류가 날때마다 사용하는 명령어이니까 기억해주면 좋습니다.
같이쓰는 명령어는 npm install -g react-native-cli, npm install --force가 있습니다.
다음 명령어로는 npx react-native init First를 입력해주세요 firstProject는 원하시는 프로젝트명로 바꾸셔도 됩니다. 그러면 Metro라는 node 번들러가 실행되면서 프로젝트가 생성될 것입니다. 리액트 아이콘(원자)이 나와야 하는데 저는 그림이 짤렷네요.
4-2 프로젝트 실행해보기
프로젝트가 생성되었으면 안드로이드 스튜디오를 열고 open project에서 방금 만든 리엑트네이티브 프로젝트-android프로젝트를 열어주세요 이작업을 하는 이유는 안드로이드 빌드를 위해서 Gradle을 안드로이드 스튜디오가 자동으로 빌드해주기 때문에 하는것 입니다. 아마도요..
아무튼 프로젝트를 오픈하고나면 한참을 빨간 원 안에만 바뀌면서 로딩을 해올것입니다.
로딩이 끝나면 오른쪽 상단에 있는 Device Manager를 통해서 아까 생성한 가상머신을 한번 켜지는지 확인하고서 안드로이드 스튜디오를 종료해주세요. 만약 Device Manager가 안보인다면 도구모음탭의 Tools에 있습니다.
안드로이드 스튜디오는 이제 쓸일이 없습니다. 다시 비주얼 코드로 돌아가서 터미널창에 cd 생성된 리액트 네이티브 프로젝트명 == cd first을 실행한 뒤 npx react-native start를 입력해 메트로가 정상작동되는지 확인해주세요
만약 정상작동되지 않는다면 위에 서술한 오류가 났을때 사용하는 명령어를 사용해보거나 환경 변수 편집을 잘못 하셧을 가능성이 높으니 확인해주세요. a를 치고서 엔터를 누르면 android device가 실행됩니다.
명령어를 실행시키고 나면 뭔가 알수없는 내용들이 주르륵 올라올 텐데 가상 디바이스에 프로젝트 앱을 설치하고 있는겁니다. 제대로 설치가 된다면 build successful이 나타나면서 앱이 켜질것 입니다.
터미널 창에 ctrl+c를 눌러 명령을 종료시켜 주시고 가상디바이스를 꺼준 다음 npx react-native run-android를 사용해보세요
그러면 아까와는 다르게 메트로가 Node창이 실행되면서 켜질것입니다.
자 이제 프로젝트 생성이 끝났습니다. 다음에는 기본적인 버그 수정과 JSX-React Native문법, yarn에 대해 알아보겠습니다.