[FN] React Native cli 개발 환경 구축 / 윈도우, 안드로이드 스튜디오

1. Visual Studio Code 설치

아래 링크에서 Visual Studio Code 설치하기

이미 설치되어 있으니까 PASS

Visual Studio Code - Code Editing. Redefined

 

2. Node.js 설치

터미널에서 node -v 입력해서 버전 확인하기

나는 v20.18.0 인데 나랑 버전 다르면 말해주기

Node.js — Run JavaScript Everywhere

 

3. JDK 설치

설치하기전에 터미널에서 java -version 입력해서 자바 환경 변수 등록되어 있는지 버전 확인하기

이건 내 JDK 버전

 

버전이 다를 경우 아래 링크에서 설치

Java Downloads | Oracle 대한민국

Download the Latest Java LTS Free

 

x64 Installer로 설치하면 될걸..? (오래돼서 기억이 가물가물한데 맞을거임....)

 

4. JDK 17.0.13로 설치했으면 환경 변수 설정하기

1. 윈도우 검색창에 '환경 변수' 입력해서 환경 변수 들어가기

 

사용자 변수에서 새로만들기 : 이름은 JAVA_HOME으로 하고 변수 값에는 아까 설치했던 jdk-17 폴더 경로 넣기

 

다음은 시스템 변수에서 Path 변수 누르고 편집 들어가서 새로 만들기를 눌러 %JAVA_HOME%\bin 을 추가해준다.

 

여기까지 했으면 아까 위에서 했던 거처럼 터미널 열어서 java -version 입력하면 자바 버전이 17.0.13으로 바뀌었을 것이다~

 

5. Android Studio 설치

아래 링크에서 안드로이드 스튜디오 최신 버전으로 설치

이미 안드로이드 스튜디오가 설치되어있으면 버전을 맞춰야 할 수도 있어서  나한테 말하기 

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

Android Studio Ladybug Feature Drop ❘ 2024.2.2

 

안드로이드 스튜디오가 설치됐으면 첫 화면에서 SDK Manager > Android SDK에서 Android SDK 경로를 복사해준다.

OR 메뉴에서 Tools - SDK Manager 들어가서 경로를 넣어도 된다.

 

내 경로는 이렇다리

 

그리고 다시 아까 했던 환경 변수 들어가서 시스템 변수 ANDROID_HOME의 변수 값을 동일하게 설정하기

 

그리고 시스템 변수에서 Path 편집 - 새로만들기 - %ANDROID_HOME%\platfom-tools를 추가하기 - 이거로 adb 인식안되면

시스템 변수에 C ------ \Sdk\platfom-tools 경로 추가하기

 

잘 설치되었나 확인하기 위해 터미널에 adb --version 입력하기

 

5. 깃허브 프로젝트 내려받기

이제 절반 완료 ... C드라이브에 프로젝트를 받아보자

• 터미널을 킨다
• cd C:\ 입력해서 C드라이브로 경로 바꾸고
• git clone 내가 보내준 깃허브 프로젝트 링크
• 파일들이 잘 받아와졌다면 터미널에 "cd 프로젝트 폴더명" 입력
• 터미널 경로가 프로젝트 폴더로 바뀌었다면 npm install을 입력해서 종속성 설치하기

 

7. 안드로이드 스튜디오 에뮬레이터 설정

프로젝트 폴더를 보면 android 폴더가 있는데 안드로이드 스튜디오에서 android 폴더 경로를 열기

그럼 오른쪽 사진처럼 열린다

 

메뉴에서 Tools - Device Manager 누르고 + 모양 Add a new device 선택

사진처럼 Pixel 4, R 선택해서 에뮬레이터 추가해주면 된다

6. 프로젝트 실행

이제 드디어 프로젝트를 실행한다... 다 끝났다...

1. Visual Studio Code에서 프로젝트 폴더 열고 npx react-native start 입력

이렇게 나타나면 정상!

2. 안드로이드 스튜디오에서 Run 'app' 버튼 누르기 

화살표 눌러서 실행

 

3. 에뮬레이터에서 정상적으로 앱이 실행되어야 한다... 안되면 머리 아파짐