React Native로 PDF Viewer 앱 만들기; 1. React Native 개발 환경 설치

React Native로 PDF Viewer 앱 만들기

1. React Native 개발 환경 설치

2. react-native-pdf 테스트 앱

3. 화면 개발 - JSX 컴포넌트

4. 화면 개발 - Context API

5. 화면 개발- 팝업 창 (Modal)

6. TypeScript 전환, Jest 추가

7. React Navigation - 1

8. React Navigation - 2

1. React Native

React Native는 X (메타)가 만들어 오픈 소스로 공개한 Cross-Platform 모바일 프레임워크이다. Javascript기반의 React과 같은 구조로 개발할 수 있어 React을 사용할 수 있는 개발자들이 쉽게 사용할 수 있도록 만들어져 있지만 Javascript 가성머신에서 실행되는 것이 아니라 Native 코드로 컴파일된다는 점이 다른 점이다. 그런 이유로 React Native에 사용되는 컴포넌트는 React과 달리 Native 컴포넌트와 유사한 성격을 가지고 있는 특성이 있다. 또한, Android OS용 컴포넌트와 iOS 컴포넌트가 조금씩 달라 각 해당 플랫폼에 맞게 튜닝하는 작업도 필요하다.

2. Android 개발환경 설치

안드로이드 개발환경을 만들기 위해서는 Native코드로 컴파일할 때 사용할 안드로이드 스튜디오 (Android Studio)가 필요하며, 설치를 위해서는 JDK의 설치가 먼저 필요하다.

 

winget install Microsoft.OpenJDK.17

 

설치가 완료되면 Android Studio를 다운로드하고 설치한다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

먼저 다운로드한 설치프로그램을 실행하면 아래와 같이 "Next"를 선택해서 설치할 수 있다.

 

설치가 끝나면 안드로이드 스튜디오가 실행된다. 만일 한 번도 설치한 적이 없으면 위저드가 뜨면서 SDK부터 AVD까지 한 번에 설치해 주지만, 이전에 설치한 적이 있다면 아래와 같은 절차를 거쳐야 한다.

 

먼저 1, 2 화면에서와 같이 SDK를 선택해서 설치하고 나면 안드로이드 스튜디오의 메인화면이 나타나는데, 다시 "SDK Manager"를 선택하고, 아래와 같이 두 번째 탭인 "SDK Tools"를 선택하고 "Android Emulator hypervisor driver (installer)"와 "Intel x86 Emulator Accelerator (HAXM installer) - Deprecated"를 선택해서 설치하면 위의 화면과 같이 진행된다.

 

 

SDK 설치가 끝나면 "Windows PowerShell"을 열고, "ANDROID_HOME"을 등록하고

 

[System.Environment]::SetEnvironmentVariable('ANDROID_HOME',$env:LOCALAPPDATA + "\Android\Sdk", "User")

 

 "PATH"에 추가한다.

 

[System.Environment]::SetEnvironmentVariable('path', $env:LOCALAPPDATA + "\Android\Sdk\platform-tools;" + [System.Environment]::GetEnvironmentVariable('path', "User"),"User")

 

다시 메인 화면으로 돌아가서 "More Action"을 선택하고 "Virtual Device Manager"을 선택해서 윈도우에서 실행할 수 있는 안드로이드 가상머신을 아래와 같이 만든다. 처음 선택할 경우 가상머신이 없기 때문에 아래 화살표를 선택해서 가상며쉰을 먼저 다운로드한다.

 

가상머신이 만들어지면 실행 아이콘으로 가상머신을 실행할 수 있다. 하지만 가끔은 내 경우와 같이 실행되지 않는 경우도 발생한다.

 

이 경우 emulator가 있는 곳(%LOCALAPPDATA%\Android\Sdk\emulator)으로 이동하고 콘솔에서 가상머신을 실행해 보면 원일을 알 수 있거나, 가벼운 경고인 경우 메인화면에서는 실행되지 않지만 CLI에서는 실행되는 경우도 있다.

 

cd %LOCALAPPDATA%\Android\Sdk\emulator
emulator -list-avds
emulator -avd [list 결과로 나온 이름]

 

내 경우는 처음에 실행되는 adb server가 종료되는 현상이 발생해서 연결이 되지 않는 경우가 종종 발생하는데, 

adb server를 다시 시작하면 정상적으로 작동되었다.

 

adb kill-server
adb start-server

 

안드로이드 가상머신이 실행되면 "Google Play Store"로 로그인해서 "Expo go"를 설치하고 로그인한다. 아직 가입하지 않았으면 "Signup"을 선택하고 Expo에 가입한다. 한 달에 50개 앱까지는 무료로 사용할 수 있다. Expo를 사용하지 않고 개발해도 되지만 처음 시작할 때는 Expo를 사용하는 것이 개발속도가 빠르기 때문에 Expo로 개발하고 나중에 Expo를 분리하는 것이 더 효율적인 것 같다.

 

3. React Native 프로젝트 생성

이제 React Native개발에 필요한 Nodejs를 설치한다. Nodejs가 이미 설치되어 있으면 건너뛰면 된다.

 

winget get install CoreyButler.NVMforWindows

 

설치가 완료되면 콘솔을 다시 실행하거나 윈도우를 다시 실행해서 nvm이 실행되도록 PATH를 적용한 다음 Nodejs를 설치한다. 현재 LTS버전이 22이기 때문에 나는 22 버전을 설치했다.

 

nvm install 22
nvm on

 

다음으로 expo 프로젝트를 생성한다. 예전에 사용하던 expo-cli는 이제 사용할 수 없기 때문에 create-expo-app을 사용하여 프로젝트를 만든다.

 

npx create-expo-app

 

프로젝트 이름을 넣고 프로젝트를 생성하면 React Native 앱을 안드로이드 가상머신에 있는 Expo go에서 실행할 수 있다.

 

cd my-app
npm run android

 

마지막으로 Expo go가 자동으로 연결이 되지 않는다면 npm run실행하면 콘솔에 나오는 URL을 Expo go에 넣고 실행하면 앱이 실행되는 것을 확인할 수 있다.