💻[React Native] React Native CLI 시작하기

✔️ 배경

학교 수업으로 React Native Expo 수준으로 개발을 해 온 나는,,, 현재 같이 프로젝트를 하는 팀의 어플 개발을 맡게 되었다. 아직 기획 단계에서도 (다들 일단 현생을 챙기는 스타일+가벼운 거 좋아함) 작은 수준의 프로젝트이지만,, 걱정+완벽주의 성격으로는 생각만 해도 울렁거리고 탈모도 왔다(이것때문은 아니고 여러가지 합쳐지긴함)
아무튼... Expo까지는 괜찮았던 React Native가 CLI로 넘어오면서 설치 과정에서부터 삐그덕거리기 시작했고... 자잘한 ISSUE를 만난 나로는 이건 기록해야해! 라는 생각이 들어 끄적거리기로 한다...

✔️ 설치

📌 Chocolatey 설치

Chocolatey 설치를 위해 명령 프롬포트 또는 PowerShell을 관리자 관한으로 실행한다.
이후 아래의 명령어를 입력하고 설치를 진행한다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

설치가 완료되면 choco --version 명령어를 통해 확인!

📌 Node.js 설치

이미 설치되어 있던 Node.js... 이것때문에 또 애를 많이 먹었다.
앞서 설치했던 Choco를 명령 프롬포트 등을 이용하여 설치하면 완료

choco install -y nodejs.install

설치가 완료되면 node와 함께 자동으로 설치되는 npm의 버전도 확인하여 준다
Node.js 가 17.~ 버전을 넘기면 안드로이드 애뮬레이터 실행에 애를 먹을 수 있으니 무조건 16~ 버전으로 설치하거나 nvm을 통해 버전을 변경해주면 된다

📌 Python 설치

내 노트북을 산 것과 동시에 설치되어 있던 파이썬... 버전 확인만 해주었다

choco install -y python2

📌 React Native CLI 설치

또 애를 먹었던 부분인데, 나는 일단 npm을 이용해 global로 설치하는 방식을 택하였다.

npm install -g react-native-cli

그리고 에러가 떴다...진짜 멘붕 TypeError: cli.init is not a function
이에 대한 해결책은 추후에 설명하겠다.

📌 JDK 설치

choco install -y jdk8

마찬가지로 설치 후 java 버전 등을 확인해준다.

📌 안드로이드 스튜디오 설치

개인적으로 가장 많이 애를 먹었던 부분
참고 블로그1
참고블로그 2
두 분의 블로그를 계속해서 참고해서 진행하였다.

✔️ 프로젝트 생성

프로젝트 생성 명령어는

npx react-native init AppName

하지만 그에 따른 에러는

cli.init(root, projectName);
      ^
TypeError: cli.init is not a function

그리고 생성한 프로젝트의 폴더를 열면 계속해서
node_modules/ package.json, yarn.lock 만 생성되었다... 개멘붕
React-Native TypeError
같은 Issue를 겪고 있는 사람들이 보였고,
npx react-native init ProjectName --version 0.68.2로 하면 해결된다고 한다.
이를 맞춰서 진행한 결과,

모두 파일이 제대로 나타났고,
npx react-native run-android 입력하니,

다음과 같은 화면이 나타났다... (감격)
설치부터 머리가 아픈 과정이 많았는데, 다행히 모두 해결하였다...
이제 다시 CLI로 플젝 공부하러...
프로젝트 화이팅...