이 글은 Do it 리액트 네이티브 앱 프로그래밍 교재와 React.dev 공식문서를 참고하여 작성했습니다.
1. Scoop 설치
1. 윈도우 버튼을 우클릭, 관리자 파워쉘 실행
2. 다음 명령어 입력
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
그러면 다음과 같은 화면이 나타남. A 입력하고 엔터
파워쉘은 일단 끄지 맙시다.
3. 시스템 환경 변수 설정
윈도우 설정에 들어가서, 시스템 환경 변수 편집 실행
환경 변수 클릭
사용자 변수의 새로 만들기 클릭
변수이름 : SCOOP
변수 값 : C:\Scoop
입력
입력후 확인 - 확인을 눌러 환경변수 저장
파워쉘에 다음 명령어 입력
iex "& {$(irm get.scoop.sh)} -RunAsAdmin"
이 화면이 나타난다면 성공
파워쉘은 끄지말고 계속 켜놓자 일단
Scoop 사용법
Scoop은 Windows PowerShell을 통해 소프트웨어를 설치하고 삭제할 수 있게 해준다. 1. Scoop 설치하기. PowerShell에서 아래의 명령어를 실행하면 기본 설치 경로(C:\Users\\scoop)에 Scoop을 설치할 수 있다. PS C:\
leeted.tistory.com
추가로 scoop에 대한 간단한 사용법은 위 홈페이지에서 확인 가능
2. Node.js 설치
이제 scoop 명령어를 사용할 수 있다.
scoop install nodejs-lts
다음과 같이 설치가 진행된다.
node -v정상적으로 설치되었다면 node -v 명령어로 확인 가능하다.
3. JDK 설치
이제 JDK를 설치하자.
0.76 React Native에서 권장하는 JDK 버전은 17이다.
scoop search jdk위 코드를 통해 설치 가능한 jdk를 확인할 수 있다. 조회에 오래 걸릴 수도 있음
zulu17-jdk를 설치하도록 하겠다.
scoop bucket add javascoop install zulu17-jdk
java --version을 입력했을 때, zulu17버전이 나온다면 잘 수행한 것이다.
4. VScode, Android Studio 설치
Scoop을 통해서 설치하는 과정도 있지만, 그냥 웹에서 다운 받아 일반적인 방법으로 설치해도 된다.
Visual Studio Code는 이미 설치되어 있으므로,
Android Studio 설치법을 알아보자
Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
developer.android.com
다운로드 하자
대충 설치하면 된다.
설치가 다 되면,
실행후, 설정에서 SDK Manager를 누르자.
0.76 React Native에서 권장하는 SDK 버전은 Android 14 (upsidedown cake)이다.
api 레벨이 그냥 34인 것을 체크해주자
그 후, 우측 하단의 Show Package Details를 누르자.
(다른 버전의 Android가 깔려있어 스크롤 해야할 것임)
Android 14.0 (upsidedowncake)의
Intel x86 Atom_64 System Image 이나 Google APIs Intel x86 Atom System Image
둘 중 하나를 체크해줘야 한다.
그 후 SDK Tools 탭을 눌러주자
마찬가지로 "Show Package Details" 을 누른다.
SDK Build-Tools에 34.0.0인 것을 체크하고
Apply해준다.
다운로드 OK 해준다.
다운로드가 전부 완료 되었다면,
다시 환경변수 실행
사용자 변수의 새로 만들기 클릭
변수이름 : ANDROID_HOME
변수 값 : %LOCALAPPDATA%\Android\Sdk
입력
이번엔 Path에도 값을 추가해준다.
환경 변수에서 Path 선택, 편집
새로 만들기 클릭
%ANDROID_HOME%\Android\Sdk\platform-tools
입력후, 확인 - 확인으로 종료한다.
/* 주의 사항 */ 시스템 환경변수
기존에 깔려있던 jdk가 이미 있던 경우에, 시스템 환경 변수의 JAVA_HOME의 주소가 사용자 환경 변수의 JAVA_HOME과 다를 수도 있다.
만약 두개의 JAVA_HOME의 값이 다르다면 같도록 편집해주자!
이제 모든 설정이 끝났다.
5. 리액트 네이티브 실행하기.
vscode를 켜준다.
상단의 탭에서, 터미널을 열어주자
터미널이 열릴텐데, powershell임을 확인하자.
일단 난 삽질을 많이해서, 기존의 react-native-cli 글로벌 패키지를 삭제할 것이다.
npm uninstall -g react-native-cli @react-native-community/cli
그 후,
npx @react-native-community/cli@latest init AwesomeProject로 AwesomeProject 프로젝트를 만들어보자 (마지막에 들어가는 단어가 프로젝트 명)
뭐 진행 동의 나오면 대충 y 누르고 엔터
실행이 잘 된다 !
ls를 통해 목록을 확인해봐도,
프로젝트가 생성된 것을 확인할 수가 있다.
cd .\AwesomeProject\를 통해 해당 프로젝트 폴더에 들어가자
npm start를 통해 실행시키자
액세스 허용해준다
잘 실행되었다...
윈도우의 경우 안드로이드만 에뮬레이팅 가능하기 때문에,
키보드 a를 눌러 안드로이드를 실행시켜주면 된다.
초기 빌드는 조금 오래 걸린다...
이 글은 Do it 리액트 네이티브 앱 프로그래밍 교재와 React.dev 공식문서를 참고하여 작성했습니다.
1. Scoop 설치
1. 윈도우 버튼을 우클릭, 관리자 파워쉘 실행
2. 다음 명령어 입력
Set-ExecutionPolicy RemoteSigned -scope CurrentUser그러면 다음과 같은 화면이 나타남. A 입력하고 엔터
파워쉘은 일단 끄지 맙시다.
3. 시스템 환경 변수 설정
윈도우 설정에 들어가서, 시스템 환경 변수 편집 실행
환경 변수 클릭
사용자 변수의 새로 만들기 클릭
변수이름 : SCOOP
변수 값 : C:\Scoop
입력
입력후 확인 - 확인을 눌러 환경변수 저장
파워쉘에 다음 명령어 입력
iex "& {$(irm get.scoop.sh)} -RunAsAdmin"이 화면이 나타난다면 성공
파워쉘은 끄지말고 계속 켜놓자 일단
Scoop 사용법
Scoop은 Windows PowerShell을 통해 소프트웨어를 설치하고 삭제할 수 있게 해준다. 1. Scoop 설치하기. PowerShell에서 아래의 명령어를 실행하면 기본 설치 경로(C:\Users\\scoop)에 Scoop을 설치할 수 있다. PS C:\
leeted.tistory.com
추가로 scoop에 대한 간단한 사용법은 위 홈페이지에서 확인 가능
2. Node.js 설치
이제 scoop 명령어를 사용할 수 있다.
scoop install nodejs-lts다음과 같이 설치가 진행된다.
node -v정상적으로 설치되었다면 node -v 명령어로 확인 가능하다.
3. JDK 설치
이제 JDK를 설치하자.
0.76 React Native에서 권장하는 JDK 버전은 17이다.
scoop search jdk위 코드를 통해 설치 가능한 jdk를 확인할 수 있다. 조회에 오래 걸릴 수도 있음
zulu17-jdk를 설치하도록 하겠다.
scoop bucket add javascoop install zulu17-jdkjava --version을 입력했을 때, zulu17버전이 나온다면 잘 수행한 것이다.
4. VScode, Android Studio 설치
Scoop을 통해서 설치하는 과정도 있지만, 그냥 웹에서 다운 받아 일반적인 방법으로 설치해도 된다.
Visual Studio Code는 이미 설치되어 있으므로,
Android Studio 설치법을 알아보자
Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
developer.android.com
다운로드 하자
대충 설치하면 된다.
설치가 다 되면,
실행후, 설정에서 SDK Manager를 누르자.
0.76 React Native에서 권장하는 SDK 버전은 Android 14 (upsidedown cake)이다.
api 레벨이 그냥 34인 것을 체크해주자
그 후, 우측 하단의 Show Package Details를 누르자.
(다른 버전의 Android가 깔려있어 스크롤 해야할 것임)
Android 14.0 (upsidedowncake)의
Intel x86 Atom_64 System Image 이나 Google APIs Intel x86 Atom System Image
둘 중 하나를 체크해줘야 한다.
그 후 SDK Tools 탭을 눌러주자
마찬가지로 "Show Package Details" 을 누른다.
SDK Build-Tools에 34.0.0인 것을 체크하고
Apply해준다.
다운로드 OK 해준다.
다운로드가 전부 완료 되었다면,
다시 환경변수 실행
사용자 변수의 새로 만들기 클릭
변수이름 : ANDROID_HOME
변수 값 : %LOCALAPPDATA%\Android\Sdk
입력
이번엔 Path에도 값을 추가해준다.
환경 변수에서 Path 선택, 편집
새로 만들기 클릭
%ANDROID_HOME%\Android\Sdk\platform-tools
입력후, 확인 - 확인으로 종료한다.
/* 주의 사항 */ 시스템 환경변수
기존에 깔려있던 jdk가 이미 있던 경우에, 시스템 환경 변수의 JAVA_HOME의 주소가 사용자 환경 변수의 JAVA_HOME과 다를 수도 있다.
만약 두개의 JAVA_HOME의 값이 다르다면 같도록 편집해주자!
이제 모든 설정이 끝났다.
5. 리액트 네이티브 실행하기.
vscode를 켜준다.
상단의 탭에서, 터미널을 열어주자
터미널이 열릴텐데, powershell임을 확인하자.
일단 난 삽질을 많이해서, 기존의 react-native-cli 글로벌 패키지를 삭제할 것이다.
npm uninstall -g react-native-cli @react-native-community/cli
그 후,
npx @react-native-community/cli@latest init AwesomeProject로 AwesomeProject 프로젝트를 만들어보자 (마지막에 들어가는 단어가 프로젝트 명)
뭐 진행 동의 나오면 대충 y 누르고 엔터
실행이 잘 된다 !
ls를 통해 목록을 확인해봐도,
프로젝트가 생성된 것을 확인할 수가 있다.
cd .\AwesomeProject\를 통해 해당 프로젝트 폴더에 들어가자
npm start를 통해 실행시키자
액세스 허용해준다
잘 실행되었다...
윈도우의 경우 안드로이드만 에뮬레이팅 가능하기 때문에,
키보드 a를 눌러 안드로이드를 실행시켜주면 된다.
초기 빌드는 조금 오래 걸린다...