본문 바로가기

Framework & Library/React-native

React-native 개발 환경 구축 [Windows]

 

++ 서론

더보기

 

 첫 번째 개인플젝ㄱㄱㄱ

나는 프로젝트와 해당 프로젝트에 투자금을 관리하고,

배당금을 배포하는 식의 펀딩 앱을 만들게 되었다ㅏㅏ



어플 제작을 위해

어플 개발 툴인 리액트 네이티브 환경 구축을 시작해보자ㅏㅏ

인터넷 상에 많은 환경 구축법들이 있지만,

나는 이사님께서 주신 도서에 나와있는 방법을 택했다!

내가 개발 환경 설정에 참고한 책은 글 가장 하단에 있으니 참고하자ㅏㅏㅏ

환경구축 요약

  1. Power Shell 관리자 권한으로 열기

  2. Scoop 설치

  3. Node.js 설치
    현재 날짜 (21/07/22)기준 설치버전:  v14.17.3

  4. 자바 8 JDK 설치
    현재 날짜 (21/07/22)기준 설치버전:  openjdk version "1.8.0_292"
  5. 비주얼 스튜디오 코드 설치

  6. 본인 컴퓨터의 AMD CPU 장착 유무 확인 후,
    안드로이드 에뮬레이터 실행을 위해, Hyper-V 를 활성 상태로 만들기

  7. 안드로이드 스튜디오 및 SDK 설치
    현재 날짜 (21/07/22)기준 설치버전: Android API 31

 

리액트 네이티브 환경구축에는 두가지 옵션이 있다 ( Scoop과 Chocolatey )

저 둘은 모두 Windows PC에서 소프트웨어 설치를 자동화해주는 프로그램이다

이 둘을 비교하는 글도 아래에 링크로 남겨놓았다ㅏㅏ

그중에서 나는 아래 링크의 도서에서 추천한 Scoop이란 프로그램을 사용했다ㅏㅏ!


이제 개발환경 구축을 찬찬히 따라해보자ㅏㅏ


1. 윈도우에 기본적으로 깔려있는 PowerShell관리자 모드로 열어준다


아래를 입력한 후 엔터,

Set-ExecutionPolicy RemoteSigned -scope CurrentUser


A를 눌러 모두 예를 해준다

  • 파워셀 환경변수 설정하기

아래를 입력 한 후 엔터,

$env:SCOOP='C:Scoop'

이렇게 해주면,  Scoop으로 설치한 모든 프로그램들이 저 경로에 저장된다

 

  • 위의 방법은 프로그램 하나를 설치할 때마다 해주어야 하므로,
    윈도우의 환경변수를 직접 변경해주자

    내컴퓨터 우클릭 -> 속성 -> 고급 시스템 설정 -> 환경변수(N) -> 새로 만들기(N)

    해주면 새 사용자 변수 박스가 뜬다!

    그곳에서

    변수이름 : SCOOP
    변수 값(V) : C:\Scoop

    을 적어주고 확인 -> 확인 -> 확인 해서 저장해주자

 

2. 계속해서, 파워셀에 다음 명령을 실행해서 우리가 설정한 경로에 Scoop을 다운받자

iex (new-dbject net.webclient).downloadstring('https://get.scoop.sh')

 

3. Node.js 설치

scoop install nodejs-lts

node -v

 

4. 자바 8 JDK 설치

scoop install git
scoop bucket add java
scoop install adopt8-hotspot
java -version

 

5. VScode 설치 ( 이미 있다면 있는걸 쓰면 될 듯! )

scoop bucket add extras
scoop install vscode

 

 6. 안드로이드 에뮬레이터 실행을 위해, Hyper-V 를 활성 상태로 만들기


만약, 내 컴퓨터에 AMD CPU가 장착되어있다면,
'윈도우 10 버전의 2004 기능 업데이트' 가 되어있어야 하고, ( 환경설정 -> 업데이트 기록보기 에서 확인가능 )

파워셀에서 아래 명령을 실행했을 때,

emulator-check hyper-v


아래의 메시지가 나타나야 안드로이드 에뮬레이터 실행이 가능하다ㅏㅏ!!!

Hyper-V is enabled


hyper-v가 비활성이라면, ( 명령을 실행해도 메시지가 뜨지 않았다면, )

아래의 명령어를 쳐서 활성화 시켜주자

Enable-WindowsOptionalFeature -Online -FeatureName MicroSoft-Hyper-V -All​

 

 7. 안드로이드 스튜디오 설치 ( 구글이 제공 )

아래의 명령어로 설치

scoop install android-studio android-sdk


이렇게까지 해주면 환경설정은 끝이다ㅏㅏㅏ!!!

 

 

참고한 도서 및 링크 : 

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=270532747 ( 해당 링크에서 구입하진 않았습니당!! 광고아님** )

 

[전자책] Do it! 리액트 네이티브 앱 프로그래밍

크로스플랫폼 방식의 모바일 앱 개발 프레임워크인 리액트 네이티브를 다룬다. 리액트 네이티브로 개발한 앱을 플랫폼별 코드로 빌드하면 안드로이드와 iOS 앱을 한 번에 만들 수 있어 시간과

www.aladin.co.kr

 

https://www.onmsft.com/feature/scoop-or-chocolatey-which-windows-10-package-manager-should-you-use

 

Scoop or Chocolatey? Which Windows 10 package manager should you use? - OnMSFT.com

Over the past couple of weeks, we've published overview guides for two of the most prominent third-party package managers for Windows 10: Scoop and Chocolatey.

www.onmsft.com

 

'Framework & Library > React-native' 카테고리의 다른 글

Render error  (0) 2021.09.02
React-native 그라데이션 배경화면 [UI]  (0) 2021.08.04
text style props  (0) 2021.08.03
react-navigation 라이브러리 적용 에러  (0) 2021.08.02
React-Native 프로젝트 실행  (0) 2021.07.27