React Native CLi 를 이용한 강의 환경과 똑같은 환경을 만드는 것이 목적입니다.
제가 듣는 React Native 강의는 버전 0.70 버전으로 하더군요.
그래서 해당 버전으로 윈도우 세팅을 하는 것을 목적으로 글을 정리합니다.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
우선은 CMD 를 관리자 모드로 열어주세요.
그리고 위 명령어를 입력해서 chocolatey 를 설치합니다.
choco install -y nodejs-lts openjdk17
chocolatey 를 설치한 경로 그 자리에서 위 명령어를 통해서 node.js 와 openjdk17 을 설치합니다.
위 링크를 통해서 접속하고 안드로이드 스튜디오를 다운로드 및 실행해주세요.
다운로드를 하고 실행하면 왼쪽 사진처럼 나타날 겁니다.
다른 프로그램 설치하듯 Next 쭉 누르면 됩니다.
넘기다 보면 마지막 페이지에 Finish 가 있는데, 이게 약관 같은 부분에서 Accept 눌렀는데 활성화가 안 된다 싶었는데요.
저 다운로드 아이콘 있는 약관 하나하나 다 Accept가 되어 있어야 Finish 버튼 눌러집니다.
여하튼 이렇게 실행되면 설치할 거는 다 설치된 겁니다.
여기서 More Actions 를 눌러줍니다. 그리고 SDK Manager 를 열어줄 겁니다.
그럼 오른쪽과 같은 화면이 나타납니다.
이 화면에서 기억해야 할 중요한 정보가 있습니다.
“Android SDK Loaction” 으로 화면 상단 중앙에 있는 경로를 복사합시다.
설정 >> 정보 >> 고급 시스템 설정 >> 환경변수
위 경로를 통해서 환경변수 설정이 가능합니다.
시작창에 “고급 시스템” 정도만 쳐도 열리더군요.
왼쪽 화면에서 “환경 변수” 클릭하면 새로운 창에서 오른쪽 화면과 같은 창이 나타날 겁니다.
오른쪽 화면에서는 위와 아래로 섹션이 구분이 되어 있지요?
위쪽 섹션에서 새로 만들기를 눌러줍시다.
새로운 변수를 만들어 주는 거지요.
변수 이름은 “ANDROID_HOME” 이라고 하겠습니다.
이어서 변수 값은 아까 기억했던 SDK 매니저에서 저장한 경로를 넣어주세요.
그리고 확인 누르면 됩니다.
이번에는 위쪽 섹션에서 변수 “Path” 라고 되어 있는 부분을 찾아 클릭합니다.
이후 “편집” 을 눌러주세요. 그럼 오른쪽 화면처럼 여러분이 지정했던 여러 path 가 있을 겁니다.
여기 “새로 만들기” 버튼으로 하나 더 늘려주는 겁니다.
%LOCALAPPDATA\Android\Sdk\platform-tools
새로 만들기 누르고 위 내용을 복사해서 붙여 넣어주면 됩니다.
그리고 확인 누르면 환경 변수는 세팅 끝입니다.
npx react-native init FirstProject
CMD 창 열어주고 위 명령어를 입력하고 실행합시다.
FirstProject 부분에는 내가 원하는 프로젝트 이름을 적으면 됩니다.
그런데, 이때 오류가 나타날 수 있습니다.
내 컴퓨터에 설치된 Node.js 는 최신인데, 지금 강의를 듣기 위해 다운로드 한 환경 자체가 좀 구식이라 호환이 안 맞아 그런 건데요.
npx @react-native-community/cli init FirstProject
이렇게 하면 최신 버전으로 알아서 만들어 줍니다.
저는 위 명령어를 통해서 정상적으로 프로젝트 생성이 가능했습니다.
npx react-native run-android
우리가 FirstProject 라는 프로젝트를 생성했지요?
그럼 이 이름과 똑같은 폴더가 경로 상에 생겼을 겁니다.
CMD 에서 해당 경로로 이동을 해주고, 위 명령어를 작동합니다.
명령어를 작동하면 Android Emulator 가 작동됩니다.
방화벽 허용을 다 해주시구요.
그럼 왼쪽 창이 먼저 나타날 겁니다. 거기서 크롬 들어가주시면 됩니다.
조금 기다리면 오른쪽과 같이 프로젝트 내부에 있는 App.tsx 가 나타나는 것을 볼 수 있습니다.
npx react-native run-android
위 명령어 실행 단계에서 막히는 경우가 있을 수 있습니다.
java -version
현재 내 java -version 이 몇인지 확인을 해줍니다.
이게 최신 버전으로 호환이 되지 않으면 문제가 발생할 수 있습니다.
이 글은 지금 17을 기준으로 하고 있지만, 나중에 보실 때에는 그렇지 않을 수 있는 거죠.
이 경우 최신 버전으로 java 를 업데이트 하시면 될 겁니다.