Study/ReactNative | 2024

ReactNative | 개발환경

full-stacker 2024. 4. 16. 11:41

1.동기

이제 자바스크립트 딥다이브 스터디가 끝나가니깐 뭔가 새로운걸 해보고 싶어서...

플러터와 리액트 네이티브중 하나를 선택해야했고, 아무래도 연계성이 높은 RN을 선택했다.

(그렇지만 플러터도 궁금 ^^)

https://reactnative.dev/

 

React Native · Learn once, write anywhere

A framework for building native apps using React

reactnative.dev

 

페이스북 그룹에서 개발한 크로스 플랫폼 앱 개발 환경? 도구?인 RN은, 기본적으로 자바스크립트라는 언어로 안드로이드 앱이나 IoS 앱을 동시에 만들수 있다고 해서 호기심이 있었고, 세부 사항은..잘 모르지만? 브릿지(Bridge)로 만든다고 한걸로 기억이 남..

 

자세한건 좀 더 기록하면서 알게된 사실을 추가할 계획임!

 

2. 차이점

플랫폼 LANGUAGE IDE
안드로이드 앱 Java, Kotlin* Eclipse, IntelliJ, etc..
IoS 앱 Objective-C, Swift* XCode

* 이 더 최신인걸로..

 

3. 개발환경

난, 윈도우 사용자이니까....맥이나 리눅스는 집에서 해봐야 함 ㅠ, 일단 리액트 네이티브는 윈도우에서 Node.js와 VSCode를 이용해서 시작할 수 있고 SCOOP이라는 윈도우용 패키지 매니저(?)로 손쉽게 관련 프로그램이나 라이브러리를 설치할수 있다고 해

 

https://scoop.sh/

 

https://scoop.sh/

 

scoop.sh

 

일단 윈도우 사용자라면, 파워쉘(PowerShell)을 이용해 SCOOP(스쿱)이라는 윈도우용 개발환경 설치 도구?(그러니까 NPM 같은)를 설치하고, SCOOP 시스템 환경변수를 등록해주면 된다.

 

2. 시작 - 실행 - power 입력하면, Windows PowerShell 이라고 있는데...오늘보니 ISE 라고 붙은게 또 있음...언제 윈도우 업데이트 하면서 추가된건가??

 

※ 궁금한 사람은 아래의 북마크를 참조해보시고! 대충, 파워쉘 IDE 라고 봐야겠네..

https://learn.microsoft.com/ko-kr/powershell/scripting/windows-powershell/ise/introducing-the-windows-powershell-ise?view=powershell-7.4

 

Windows PowerShell ISE 소개 - PowerShell

PowerShell ISE는 단일 Windows 기반 그래픽 사용자 인터페이스에서 명령을 실행하고 스크립트를 작성, 테스트, 디버그할 수 있는 Windows PowerShell의 호스트 애플리케이션입니다.

learn.microsoft.com

 

근데, 난 그냥 SCOOP 설치명령과 실행 권한에 대한 스크립트를 입력할거라 그냥 Windows PowerShell 을 선택했음

 

아참! 먼저, 시스템 환경변수를 설정해주는 걸 먼저 했지~ 

 

1. 시작 - 환경 이라고 입력하면, 시스템 환경 변수 편집 이라고 나타날건데, 그거 눌르고~! 새로운 환경변수를 하나 등록하면 됨

<1. 시스템 환경 변수 설정>

 

<2. 파워쉘을 이용해 SCOOP 설치>

 

혹시 직접 코드를 입력하려면 아래 코드를 한줄씩 복사&붙이기 하신 뒤 실행(ENTER)하면 

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
$env:SCOOP='c:\Scoop'
iex(new-object net.webclient).downloadstring('https://get.scoop.sh')

 

일단, 중요한건...마지막 문장에 Scoop was installed successfully! 라는 문구인데, 에러없이 설치된거란 뜻이지..궁금해서 C:\Scoop도 살펴봤어

 

추가적으로 Node.js를 설치하려면 가급적 LTS(Long Term Support) 버전을 설치하고, 마침 PowerShell에서 한줄의 명령만으로도 설치 할 수 있지만, 이건 C:\Scoop 이라는 폴더로 저장될것이고...사실, 난 이미 Node.js LTS 버전을 설치한 상태라 추가적인 설치는 하지 않고 해보려고 해, 하지만 설치를 원한다면 아래와 같이 한줄 정도를 입력해보자

 

<nodejs LTS 버전 설치>
<Node.js 설치여부 확인>

 

 

그밖에 git이나 vscode도 설치할 수 있는데..일단 이것도 설치되어 있음

 

그러니까 정리하자면,...

 

윈도우에서 React Native 개발을 위해서 준비할 건 몇가지가 되겠지?

- Java (JDK)

- Node.jS

- AndroidStudio

- Git

- Visual Studio Code

- ...등등..

 

이러니까 개발환경이 어렵다고들 포기하는거 같기도 하고,...처음보면 복잡해 보일것도 같은데 개발환경을 매일 설치하는게 아니니까, 한두번? 쯤은 설치한다고 생각하고..넘어가기로...다시한번 전체 설치 명령어를 기록해야겠네

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
$env:SCOOP='c:\Scoop'
iex(new-object net.webclient).downloadstring('https://get.scoop.sh')
scoop install nodejs-lts
scoop install git
scoop bucket add java
scoop install temurin8-jdk
java -version
scoop bucket extras
scoop install vscode
./install -context.reg
scoop install android-studio android-sdk

 

검색해보니 Scoop이나 Chocolatey 등이 윈도우용 패키지 매니저인 셈인데, 이건 터미널 기반이라 명령어를 쳐야 하고 좀..어렵게 느끼는 분들은 WingetUI 라는 그래픽 기반의 패키지 매니저가 있다고 하니까...이건 알아서들 사용해보기로 하자구

 

https://github.com/marticliment/WingetUI

 

GitHub - marticliment/WingetUI: WingetUI: The Graphical Interface for your package managers

WingetUI: The Graphical Interface for your package managers - marticliment/WingetUI

github.com

 

안드로이드 앱 개발을 위한 JDK(자바 개발 도구)로 JDK와 OpenJDK가 있는데..일단 Temulin으로 설치했으나 예전에는 Azul Zulu를 설치했던 것도 같고...그냥 오라클 JDK SE를 사용하는것도 있지만 라이센스 차이로 알고 있으니 자세한건 아래 북마크를 참조해야할듯?

 

https://adjh54.tistory.com/213

 

[Java] JDK(Java Development Kit), Open JDK 이해하기

해당 글에서는 Java에서 사용되는 JDK(Java Development Kit), Open JDK에 대해 이해를 돕기 위해 작성한 글입니다. 1) Java 1. Java Version 💡 2023년 6월 기준 Java 버전에 대해서 확인해 봅니다. Version LTS 출시 일

adjh54.tistory.com