0038. 실전 FE 개발 배우기1 - 리액트, 윈도우-안드로이드 환경 설정하기(Feat. 안드로이드 스튜디오)

이번에 필자가 듣는 강의는 이거다.

인프런의 배달앱 클론코딩 [with React Native]이다.

 

섹션 0. 강의 소개

1강. 리액트 네이티브 시작하기

React Native

Learn once, Write anywhere : 한번 배워서 여러 군데 써먹어라!

 

Expo CLI vs React Native CLI
- React Native CLI 추천

 

2강. 에러질문법

라이브러리, 프레임워크를 끌어다 쓰다 에러가 나면 어디서 에러가 났는지 찾기가 어려운 경우가 많다.

그래서 질문이 굉장히 중요한데 질문을 하는 기본이 안되어 있는 경우가 많다.

 

이런 질문법으로는 스택오버플로우 같이 엄격한 곳에서 질문을 제대로 하지 않으면 엄청난 비난과 글삭제가 될 것이다.

아래는 질문을 잘하는 법이다.

 

<질문 잘하는 법>

1. 에러를 질문하기 전에 에러메시지를 스스로 번역한다. 번역기를 사용해도 된다. 
2. 에러 메시지를 잘라서 올리면 안 된다. 질문 길게 써도 괜찮다. 다 올리는 게 좋다.
3. 코드도 같이 올리되, 코드 전체를 올리거나 깃헙 주소만 던지지 말아라. 의심스러운 부분을 체크해라.
4. 막히는 부분, 강사의 경험이 궁금한 부분, 여러 개의 선택지 중에서 조언이 필요한 부분의 질문은 환영이지만, 회사 일을 질문하는 건 아니다.
5. (인프런) 강좌 - 커뮤니티 - 글 작성하기에 올려야 어떤 진도에서 질문하는지 정보가 뜬다.

 

3강. 윈도우-안드로이드 환경 설정하기

https://reactnative.dev/docs/environment-setup?guide=native

Setting up the development environment · React Native

여기서 필요한 것을 깔아야 한다.

 

1) Node.js, VScode 설치

기본적인 설치프로그램은 예전에 써놓은 블로그 글의 중앙 하단부를 참고하면 된다.

https://coder-chobo.tistory.com/10

0010. Front-end 공부하기1 - 강의선정/준비하기(Feat. 인프런, 처음 만난 리액트(React))

 

 

2) React Native CLI 설치

 

여기서 Windows, Android를 클릭하고 Chocolatey를 설치한다.

 

그런데 Node.js를 설치하다가 체크박스에 체크해서 자동으로 설치되거나, 이미 windows에 설치되어 있는 경우가 있다.

설치 전에 powershell을 실행해서 choco를 쳐보면 확인이 가능하다.

 

이렇게 나오면 설치가 되어있는 것이다.

 

그 뒤에 해당 코드를 카피해서 VScode terminal에 붙여 넣으면 된다.

 

choco install -y nodejs-lts microsoft-openjdk17

 

하지만 어림없게도 에러가 발생해서 찾아보니, 관리자 권한으로 실행(Run as Administrator) 하지 않으면 엑세스가 거부되는 것 같았다. 

 

그래서 관리자 권한으로 실행하고

 

코드를 넣어주었더니 됐다.

그런데 경로가 저 경로가 맞나 싶긴 한데... 찝찝하지만 경로를 바꾸는 방법을 모르니 일단 실행했다.

안되면 다시 하든지 하지 뭐..

 

뭔지 몰라도 뭔가 되고 있는 느낌이 든다.

 

 

해당 경로에 설치가 잘 된 것 같다.

 

 

3) Android Studio 설치

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

강사님의 버전과 달라서 매우 불안하다. 이러면 문제가 발생했을 때 해결하기가 매우 어렵다. 하지만 어쩔 수 없긴 하다.

 

설치한다.

난 세팅이 없으므로 Do not import settings.

 

License Agreement에서 모두 Accept 해준다.

좌측의 큰 항목들(android-sdk-license, android-sdk-arm-dbt-license, intel-android-extra-license) 모두 Accept 해야 한다.

 

그럼 또 뭔가 설치하는데 시간이 꽤 걸린다.

 

드디어 설치 완료

설정을 위해 New Project에서 아무 프로젝트나 생성해 준다.

 

File → Settings...

 

Android SDK에서 SDK Platrorms

 

여기서 API Level이 30 버전이 되는 것을 받는다(Android 11).

이게 React Native와 호환이 안되기 때문에 낮은 버전을 쓰는 것이다.

 

강의를 찍은 시점과 React의 버전이 업데이트된 시점이 다를 수 있는데, 최대한 강의와 맞춰보려고 한다.

강의와 다르게 했다가 피 본 경험이 많기 때문에...

 

SDK Tools의 아래 Tools도 설치해야 한다.

• Android SDK Platform-Tools
• Intel x86 Emulator Accelerator
  - intel cpu가 아닌 경우에는 amd나 다른 cpu의 것을 선택한다.

 

C:\Users\사용자\AppData\Local\Android\Sdk\platform-tools

(경로 : Appdata > Local > Android > Sdk)

폴더에 adb 파일이 꼭 있어야 한다.

 

 

중간에 이게 한번 꼬이면 답이 없다.

안되면 지웠다가 다시 까는 것을 추천한다.

 

작성일 기준으로 현재는 SDK 버전을 33까지 깔아도 된다고 한다.

하지만 원활한 강의 수강을 위해 30 버전을 깔아서 진행하였다.

 

 

4) 환경 변수 설정(환경 변수 편집)

 

시스템 속성 > 고급 > 환경 변수

 

 

변수 이름 : ANDROID_HOME

변수 값 : 디렉터리 찾아보기를 눌러서 C:\Users\사용자\AppData\Local\Android\Sdk 여기 경로로 설정한다.

 

Git Bash에서 where choco라고 치든지

 

PowerShell에서 Get-Command choco를 쳐서 Source를 얻는다.

 

변수 이름 : JAVA_HOME

변수 값 : 디렉토리 찾아보기를 눌러서 C:\ProgramData\chocolatey 를 경로로 설정한다. 위에서 조회한 값의 bin 앞까지만 써주면 된다.

 

path에 adb 파일 위치를 써준다.

(위에서 확인했던 파일)

 

GitBash에서 which adb를 치면 위치를 알려준다.

 

그리고 adb 를 치면 위와 같은 뭔가가 실행되어야 한다.

이게 path에 경로가 제대로 저장되어 있어야 해당 위치에서 파일을 실행하는 것이다.

 

마찬가지로 javac 도 실행해 본다.

 

실행이 되지 않으면 path에서 경로를 다시 설정해야 한다.

만약에 경로를 추가했는데도 변화가 없다면 GitBash를 껐다가 켜서 다시 해본다.

생각보다 단순하다.