[React native] 리액트 네이티브 개발환경셋팅 간단하게 해보기

리액트/React native

Colin Kim 2022. 9. 2. 23:02

리액트 네이티브를 개발하기 위한 개발환경셋팅

리액트 네이티브를 개발하기 위해서는 필요한 설치 프로그램들이 몇가지 존재합니다.

Scoop을 왜 사용하는가!? 이유는 간단합니다. 개발 환경을 세팅하기 위해서는 각각 필요한 프로그램들이 있는데요.

Scoop을 설치하지 않고 개발을 세팅할 경우 각각의 프로그램들을 웹사이트에 접속하여 직접 내려 받아야 합니다.

또한! 설치한 프로그램들이 업데이트 되었을시 다시 웹사이트 접속하여 내려받아야합니다.

이런 과정들을 한번에 해결할수 있는것이 Scoop이에요. Scoop으로 설치한 프로그램들은 scoop update * 명령어로 한꺼번에 최신 버전으로 업데이트를 할수 있습니다.

Windows PowerShell을 관리자모드로 실행해주세요.

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

입력하여 모두 예(A) 권한을 부여하고,

$env:SCOOP='C:\Scoop'

C드라이브 밑에 Scoop폴더를 설정해줍니다.

윈도우에서 시스템 환경 변수 편집 > 환경변수 > 사용자 변수 > 새로만들기를 클릭하여 아래와 같이 입력해 줍니다.

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

만약 위에 코드가 오류가 발생할시, 아래 코드로 실행해주세요.

irm get.scoop.sh -outfile 'install.ps1'
.\install.ps1 -RunAsAdmin [-OtherParameters ...]
iex "& {$(irm get.scoop.sh)} -RunAsAdmin"

JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램으로 nodejs를 사용하여 서버를 구성할수 있다.

nodejs-lts를 설치하는 이유는 최신버전이 아닌, 검증된 버전을 가져오는거에요.

scoop install nodejs-lts
node -v

GIT은 소스를 관리하기 위한 프로그램이고,

자바8 JDK는 안드로이드 앱을 구동하기 위해 필요한 프로그램이에요.

scoop install git
scoop bucket add java
java -version

비주얼 스튜디오 코드는 소스 편집기로 리액트 네이티브와 같은 Javascript나 기타 소스를 편집하기에 좋은 프로그램이에요.

scoop bucket add extras
scoop install vscode

리액트 네이티브로 만든 소스를 안드로이드 앱으로 만들려면 안드로이드 스튜디오가 필요해요.

scoop install android-studio android-sdk

비주얼 스튜디오 코드를 실행하세요. 하지만 메뉴가 전부 영어라 힘들수도 있기 때문에, 우리는 비주얼 스튜디오 코드를 한글판으로 바꿔줄꺼에요.

korean이라고 입력하고 캡쳐와 동일한 항목을 설치해주세요.

다음으로는 javascript를 웹이 아닌 콘솔에서 실행가능하게 하는 typescript를 설치 할거에요.

비주얼 스튜디오 코드에서 터미널 > 새 터미널을 클릭하고 아래와 같은 코드를 입력해주세요.

npm i -g typescript ts-node

맥이나 리눅스의 기본 명령 프로그램인 touch를

윈도우일 경우 파일 생성하는 유틸리티인 touch를 사용을 못하기 때문에, touch를 사용할수 있게 설치를 해줍시다.

scoop install touch

설치가 완료 되면 src라는 폴더를 생성후 index.ts라는 파일을 생성해줄게요.

mkdir src
touch src/index.ts
code src/index.ts

code src/index.ts를 입력하면 비주얼 스튜디오 코드에서 파일이 열립니다.

index.ts파일에 내용을 입력해줍니다.

console.log("Hello world!");

그리고 터미널에서 아래 코드를 입력해서 터미널에서 typescript로 javascript소스가 실행되는걸 확인해보세요.

ts-node src/index.ts

이제 비주얼 스튜디오 코드에서 소스를 입력시! 큰 따옴표(") > 작은 따옴표(')로 세미콜론(;)을 삭제하는 것을 해볼게요.

위와 같이 설치를 해주시고, 비주얼 스튜디오 코드의 파일 > 기본 설정 > 설정을 눌러줍니다. 그리고 오른쪽 상단에 아래와같은 아이콘을 눌러주세요.

그리고 아래와 같이 입력하고, 저장해주세요.

터미널에서 아래 코드를 입력하여, 파일을 생성하고, 아래와 같은 소스를 입력해주세요.

touch src/prettierrc.js

module.exports = {
    singleQuote: true,
    semi: false
}

자! 이제부터 src에 있는 모든 파일들은 큰 따옴표(") > 작은 따옴표(')로 세미콜론(;)을 삭제될꺼에요

이번시간에는 리액트 네이티브에 필요한 각종 프로그램과 설정을 해보았습니다. 다음시간에는 리액트 네이티브 프로젝트를 생성하고, 실제로 안드로이드화면에 띄워보겠습니다.