2021. 9. 23. 00:20ㆍMobile App
react-native로 앱을 개발할 계획이다.
react-native로 웹을 개발하고 안드로이드 앱이면 android studio를 이용해 apk파일로 감싸고, ios앱이면 맥북을 이용해 감싸면 된다. 아마도
<환경설정 목록>
- chocolatey 설치
- Nodejs 설치
- python 설치
- React Native CLI 설치
- JDK설치
- 안드로이드 스튜디오 설치
- 안드로이드 스튜디오 SDK 설정
- 안드로이드 스튜디오 환경 변수 설정
- react-native 프로젝트 생성 및 확인
- 완성!
react-native 환경 설정 시작하자!
chocolatey 설치
chocolatey: 윈도우즈용 패키지 설치삭제 관리 프로그램이다.
cmd를 관리자 권한으로 실행한 뒤 아래 명령어를 실행하고
@"%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
잘 설치되었으면 아래 사진처럼 출력된다.
Nodejs 설치
chocolatey를 이용해 Nodejs를 설치해보자
아래 명령어로 설치하고 버전을 확인명령어로 설치가 잘 되었는지 확인하자.
choco install -y nodejs.install
node -–version
nodejs가 설치되면 nodejs의 패키지매니저인 npm도 설치된다고 한다.
npm --version
python 설치
아래 명령어를 통해 파이썬을 설치할 수 있다.
choco install -y python2
나는 이미 파이썬3으로 설치되어있어서 설치과정은 진행하지 않았다.
React Native CLI 설치
리액트 네이티브로 앱을 개발하기 위해 필요함
npm명령어로 React Native CLI를 설치하자.
npm install -g react-native-cli
아래는 버전확인 명령어
npx react-native --version
문제없이 설치완료 ~
JDK설치
리액트네이티브로 안드로이드앱을 개발할 때 필요함
아래 명령어로 jdk를 설치하자
choco install -y jdk8
잘 설치되었는지 확인하자. javac는 자바 컴파일러를 의미한다. 자동으로 설치된다.
java -version
javac -version
'java'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.라는 에러가 발생했다.
설치가 잘 안된줄 알았는데 choco install -y jdk8를 입력해보니 이미 설치는 완료되었다고 나온다.
환경변수를 설정해서 해결했다!
시스템 환경변수 편집에 들어가서
환경변수 버튼을 클릭하고
사용자변수의 Path를 더블클릭해서 java.exe가 있는 위치를 추가해주면 된다.
C:\Program Files\Java\jdk1.8.0_211\bin 위치를 입력하면 해결될 것이다.
cmd창을 새로 열어서 확인해보면 아래그림처럼 java, javac버전 모두 확인할 수 있다.
안드로이드 스튜디오 설치
안드로이스 스튜디오 사이트에서 설치파일을 다운로드하자.
https://developer.android.com/studio
나는 이미 설치되어있어서 위 과정은 생략했다.
안드로이드 스튜디오 SDK 설정
More Actions를 클릭하여 SDK Manager를 선택하자
- Android SDK Platform 29
- Intel x86 Atom System Image
- Google APIs Intel x86 Atom System Image
- Google APIs Intel x86 Atom_64 System Image
show package details를 선택해서 위 4개를 선택해 ok를 누르면 선택한 내용을 설치할 수 있다.
안드로이드 스튜디오 환경 변수 설정
ANDROID_HOME이라는 이름을 가진 사용자변수를 추가해준다.
변수 값은 안드로이드 SDK 위치를 넣어주면 된다.
위치는 location에서 확인할 수 있다.
그다음은 안드로이드 스튜디오의 platform-tools를 설정해주어야한다.
사용자변수 리스트에서 path를 선택하여 환경변수 편집 화면으로 이동한다.
제일 하단에 C:\Users\[사용자 이름]\AppData\Local\Android\Sdk\platform-tools
을 추가해준다.
잘 설정이 되었다면 cmd 창에 아래 명령어를 입력하면 아래 사진처럼 결과를 확인할 수 있다.
adb
react-native 프로젝트 생성 및 확인
여기부터는 cmd 관리자권한으로 하지말기 ^^~!
왜냐 ~ 에러남~ 못고침 ~ㅠㅠ 수지가 도와줘서 고쳤다 ㅠㅠ! 관리자권한 아님!! ㅠㅠ
안드로이드 키고 할 필요 없었음!
npx react-native init SampleApp
위 명령어를 입력해서 react-native 프로젝트를 생성할 수 있다.
cd SampleApp
npm run android
이 코드까지 입력하면..................
아래와 같은 화면이 나온다 !
이제 앱개발 준비 끝 !!
'Mobile App' 카테고리의 다른 글
react-native 앱 따라만들기2 (0) | 2021.09.23 |
---|---|
react native 앱 따라 만들기 (0) | 2021.09.23 |
인증 (0) | 2021.08.24 |
API와 HTTP의 관계 (0) | 2021.08.09 |
2-3.모델로 데이터 처리하기 (0) | 2021.08.06 |