[React-native] Window에서 React native 실행하기!

Visual Studio Code 설치하기!

https://code.visualstudio.com/

사이트 접속 후 Download for Windows 하면 된다!

 

Node js 설치하기!

https://nodejs.org/ko

Node.js

검증된 LTS 로 Download를 진행한다.

 

그 이후 CMD를 열어

node -v

를 입력해 정상적으로 설치되었는지 확인한다.

Expo-Cli 설치하기!

npm install --global expo-cli

해당 코드를 cmd에서 실행하면 설치가 완료된다.

 

난 react native 프로젝트를 위해 설치하였는데 Expo-Cli랑 호환이 될려면 Node.js 버전이 현재는 17 이상이면 오류가 발생하는 것 같다...

 

따라서 다음 글에 Window에서 Node.js 버전을 바꿀 수 있는 게시글을 올리겠다.

 

개인 핸드폰에 Expo를 설치하기!

내 핸드폰이 iOS이다 => 앱스토어에 Expo Go 를 설치한다.

내 핸드폰이 Android이다 => 플레이스토어에 Expo 를 설치한다.

 

설치 후 계정을 만들어 로그인까지 완료하기!

여기서 사용한 계정은 후에 Window에서 내가 만든 프로젝트를 실행한 화면을 보여주기위해 Expo를 활용할 때 사용한다.

 

만들 프로젝트 생성!

expo init [생성할 프로젝트 이름]

해당 코드를 실행하면 해당 위치에 [생성할 프로젝트 이름]으로 react native 프로젝트가 생성된다.

 

Visual Studio Code에서 실행하기

해당 폴더를 실행!

사진처럼 Open Folder... 를 통해 내가 생성한 프로젝트 폴더를 선택해 열어준다!

 

그리고 Visual Studio Code 하단의 TERMINAL을 열어서 expo에 로그인을 해준다.

npx expo login

해당 코드를 TERMINAL에 입력하면 로그인 email을 입력하라고 뜨고, 아까 만들었던 아이디와 비밀번호를 입력하면 로그인이 완료된다.

 

그 후

npm start

를 TERMINAL에 입력하면 Expo에 실행되며, 각 핸드폰에 다운로드 받은 어플을 들어가면 Window에 있는 프로젝트가 핸드폰에도 있는 것을 확인할 수 있다!

그걸 클릭하면 실행결과가 핸드폰에 즉각 반영되며, 만약 Code를 update 했을 시 Visual Studio Code에서 저장을 하면 즉각적으로 핸드폰 화면도 update 된다.