리액트 네이티브 expo 설치후 실행까지
이번 글에서는 리액트 네이티브로 앱 개발을 위한 개발환경을 구축해보겠습니다.
설치할 프로그램 순서로는
- Visual studio code
- Node js
- Expo
순으로 설치할 예정입니다.
1. Visual studio code설치
먼저, visual studio code를 설치해 보도록 하겠습니다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
구글에 visual studio code를 검색해서 들어가고 되고, 위 링크를 눌러 비주얼 스튜디오 코드의 사이트로 들어갑니다.
사이트로 들어가서 Download for Windows를 선택해 설치 프로그램을 다운로드합니다.
다운로드가 완료되면 설치 프로그램을 실행합니다.
설치 프로그램을 실행하면 다음과 같은 창이 나옵니다.
계약에 동의함에 체크를 하고 다음을 누릅니다.
다음을 누르면 위 화면과 같이 나오는데, 저는 여기서 '바탕 화면 바로 가기 만들기'를 선택하고 다음을 누릅니다.
꼭 안 누르고 그냥 넘겨도 상관없습니다.
다음을 누르면 위와 같은 화면이 뜨고 설치를 누르면 됩니다.
설치가 끝나면 Visual Studio Code 시작 체크박스를 해제하고 마침을 누릅니다.
해제 안 하면 visual studio code가 켜지는데 그냥 끄면 됩니다.
여기까지 Visual studio code 설치였고, 다음은 Node js를 설치해 봅시다.
2. Node.js 설치
이번에는 Node.js를 설치해 보도록 하겠습니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
위 링크를 눌러 Node.js사이트로 이동합니다.
Node.js 사이트로 이동해서 10.16.3(19년 8월 기준) "LTS" 버전으로 다운로드합니다.
다운로드가 완료되면 프로그램을 실행합니다.
설치 화면입니다. Next를 누릅니다.
동의함 체크 후 Next를 누릅니다.
본인이 원하는 폴더 위치를 정한 후 다음을 누릅니다.
여기도 그냥 Next버튼을 눌러서 다음으로 넘어가시면 됩니다.
그다음으로는 계속 Next, Next, install 버튼을 누르면 되기 때문에 사진은 생략하겠습니다.
설치가 모두 완료되면 시작 버튼을 눌러서 Node.js command prompt가 나와 있으면 잘 설치가 된 것입니다.
3. Expo 설치
expo 같은 경우는 설치 파일은 없고, 방금 node.js설치 후, https://expo.io/를 이용해서 설치를 해야 합니다.
Expo
A free and open source toolchain built around React Native to help you build native iOS and Android apps using JavaScript and React.
expo.io
Expo 사이트에 들어가서
파란색의 Get started를 누르면
위 사진과 같이 설치 방법이 나옵니다.
그중에서 저희는 02번인 Node.js는 이미 설치를 하였고,
Expo를 설치하기 위해선 03번만 수행하면 됩니다.
먼저, 시작 버튼을 눌러 Node.js command prompt를 실행합니다.
그리고 npm install expo-cli --global 명령어를 입력합니다.
그러면 아래 사진과 같이 설치를 시작합니다.
수많은 WARN과 함께 설치가 완료되었습니다. WARN은 크게 신경 안 써도 됩니다.(아마도....?)
설치가 완료되었으니 프로젝트를 한번 만들어 보도록 하겠습니다.
저는 프로젝트 만들기 전에 바탕화면에 expo라는 이름의 폴더를 만든 후,
해당 폴더 내에 프로젝트를 만들어 보도록 하겠습니다.
프로젝트를 만들기 위해 Node.js의 커맨드 위치를 내가 프로젝트를 만드려고 하는 위치에 두고,
expo init first-project(프로젝트 이름)을 입력 후 엔터를 누릅니다.
여기서 어떤 타입으로 만들 것인지 물어봅니다.
저는 blank 아무것도 없는 빈칸으로 만들겠습니다.
엔터를 누르면, 이름을 입력하라고 나옵니다.
저는 처음과 똑같이 first-project라고 입력 후 엔터를 누릅니다.
조금 기다리면 프로젝트가 생성 완료되고, 아래 사진과 같이 화면이 나타납니다.
그 후, 저희가 만들었던 프로젝트 폴더로 가서
npm start 또는 expo start를 입력합니다.
위 사진과 같이 웹사이트가 하나 켜지고, 왼쪽 아래에 QR코드가 나오면 프로젝트가 실행되고 있다는 표시입니다.
마지막으로 프로젝트가 잘 돌아가는지 한 번 스마트폰에서 확인해 보도록 하겠습니다.
**** 본인의 스마트폰에서 프로젝트를 실행시키기 위해선 ****
**** 컴퓨터와 같은 인터넷 혹은 와이파이를 연결하고 있어야 합니다. *****
아이폰의 경우 앱스토어, 안드로이드의 경우 플레이 스토어에 들어가서 Expo를 검색해 앱을 다운로드합니다.
앱을 실행한 후, Scan QR Code를 선택해서 웹사이트에 있는 QR코드를 스캔합니다.
로딩이 끝나면
위 사진과 같은 화면이 나오면 프로젝트 생성이 잘 이루어진 것입니다. 고생하셨습니다!
이제 프로젝트에 파일을 만들고 소스코드를 수정하기 위해선
- Visual Studio code 실행
- File탭에서 Open Folder... 선택
- 프로젝트가 생성된 폴더 선택
- App.js파일이 시작
끝!
여기까지 잘 따라오셨으면 이젠 리액트 네이티브 코딩을 시작하시면 됩니다!!
긴 글 읽어주셔서 감사합니다.
다음번에는 안드로이드 스튜디오를 설치해서, 가상 스마트폰에 저희 프로젝트를 실행해보는 포스트를 작성해 보도록 하겠습니다.
다시 한번 감사합니다!!