React Native Expo Visual Studio에서 활용하기

전에 작성한 글에서는 Expo 홈페이지에서 개발 후, 바로 확인할 수 있는 방식을 사용했다.

https://ohrora-developer.tistory.com/6

React Native Expo 활용하기

이 방식도 편하긴 했지만 git에 올려 나만의 코드로 형상 관리할 수 있지는 않다는 점이 단점이였다.

 

코드 관리를 위해서 Visual Stuido 애플리케이션에서 Expo를 활용해 작동 해보는 방법에 대한 내용이다.

 

전에 작성한 글을 읽었다면 핸드폰에 Expo Go 애플리케이션은 깔아져있을 것이다.

깔아져 있지 않다면 Expo Go 애플리케이션을 실행시키고 싶은 모바일 폰에 까는 것이 우선이다.

 

Node.js도 설치되어있다는 가정하에 시작된다. 

1. Visual Stduio 에서 좌측에 위치하고 있는 바에서 Extensions 을 클릭한 후, Expo Tools를 다운받는다.   

 

2. 그 다음은 프로젝트를 만들어준다. expo 기반의 프로젝트를 만드는 명령어는 아래와 같다.
(터미널에 입력해주면 된다)

expo init reactNative_expo

해당 명령어를 입력해주면 아래와 같이 프로젝트가 생성될 것이다.

 

3. 만들어진 프로젝트 하위로 명령어가 작동할 수 있게 위치를 옮긴 다음, 실행 명령어를 입력해준다. 

npm start
expo start

둘 중 어떤 실행 명령어를 상관하든 상관없다. 

 

명령어 실행 후, 터미널에 QR code가 뜰 것이다.

해당 QR로 인식해서 Expo Go 애플리케이션으로 연동해서 결과를 확인하면 끝이다.