Expo-cli 설치방법

React-Native를 하면서 가장 좋았던 점이 Expo를 사용하여 실시간 빌드를 할 수 있다는 점이 가장 좋았습니다.

그래서 React-Native를 입문하거나 혹은 React-Native를 Expo를 사용하지 않고 개발을 하고 있으신 분들에게 도움이 될 게시물 입니다.

 

왜 Expo를 사용하는 것이 React Native CLI Quickstart보다 효율적인가?

- 자신의 스마트폰에서 실시간으로 코드가 적용되는 모습이 보인다.

- 쉽게 자신의 프로젝트를 확인할 수 있다.

- Expo Documentation에 API 문서 저리가 깔끔하게 잘 되어있다.

- React Native CLI Quickstart는 수동으로 설치해야하지만, Expo는 자동으로 다 설치해준다.

- 이 외에 다른 장점들이 짱짱 많음.

 

Expo를 사용했을 때 단점?

- native files들을 크게 제어 할 수 없다.

   - 그러나 Expo로 실제 SNS를 개발했을 때 Expo를 사용함으로써 나오는 문제는 없었다.

 

주의

- Node.js와 Npm(Version 6 이상) 혹은 Yarn을 사전설치 하셔야 합니다.

- 윈도우 버전으로 게시글을 작성하겠습니다. Mac버전은 추 후 올리겠습니다.

- Code Editor는 Visual Studio Code를 사용하였습니다.

 

1. 구글 Play Store에서 Expo를 설치합니다.

Google PlayStore에 검색하면 이렇게 나옵니다.

 

2. Expo 계정을 만듭니다.

   Why? 

   - 계정을 만들어 연결하면 자신의 계정에 자기가 한 프로젝트가 남아 포트폴리오로 쓸 수도 있습니다.

 

3. Cmd창에서 Expo-Cli를 설치합니다.

   명령어

   - npm install -g expo-cli

Cmd창에서 커맨드를 입력한 모습.

4. 자신이 프로젝트를 생성하고 싶은 곳으로 이동한다.

   윈도우 명령어 - cd (경로)

   Ex) 바탕화면으로 이동 -> cd Documents

cd Documents 명령어 입력 후 경로가 바탕화면으로 바뀌었습니다.

   자신이 원하는 경로를 파일탐색기에서 복사한 후 Cmd에 오른쪽 클릭 혹은 Ctrl + V를 누르시면 붙여넣기가 됩니다.

 

5. 자신이 원하는 경로로 이동 하면 프로젝트를 생성합니다.

   윈도우 명령어 - expo init (프로젝트 명)

실제 명령이 입력 모습.

6. 자신이 원하는 프로젝트 형태 설정.

   위와같은 명령어를 입력하면 아래와 같은 선택창이 나옵니다.

Project 선택창

- blank는 처음부터 시작하고 싶을 때 선택합니다.

- blank(TypeScript)는 경험자라면 이것을 선택합니다.

- tabs는 navigation tab과 같은 tab을 사용하고싶으면 선택합니다.

 

선택을 하면 아래와 같은 이름 입력창이 나옵니다.

Project Name 선택창

- name에 자신이 원하는 프로젝트 명을 입력하고 enter를 칩니다.

 

그러면 만약 Yarn이 설치되어있다면, Yarn v0.--.- found. Use Yarn to install dependencies? (Y/n)라는 문장이 나옵니다.

- Yarn이 설치되어있지 않다면 이 문장이 나오지 않습니다. 그래도 걱정하지마세요 Npm = Yarn입니다. 그냥 계속 Npm    을 사용하면 됩니다.

- Yarn을 설치한 분이라면 Y를 입력하고 엔터를 누르면 Yarn으로 프로젝트가 생성됩니다.

 

7. Visual Studio Code에서 프로젝트를 실행합니다.

- 프로젝트가 생성되면 Visual Studio Code에서 프로젝트를 만든 폴더를 선택합니다.

 

- 보기(View)에서 에서 터미널(Terminal)을 클릭합니다.

 

- 아래에 터미널 창이 뜨면 expo start를 입력하고 엔터를 치면 프로젝트가 시작됩니다.

 

8. Expo 앱과 연결하기.

- 자신의 스마트폰에 Expo 계정으로 로그인합니다.

 

- 중요!! 노트북 혹은 데스크톱과 똑같은 인터넷 망이여야 합니다.

  데스크톱이라면 데스크톱에서 와이파이공유기를 설치해 핸드폰에서 와이파이를 잡아야합니다.

  노트북이라면 노트북과 스마트폰이 같은 와이파이에 연결되어 있으면 됩니다.

 

- Projects tab에서 현재 실행되고 있는 프로젝트가 뜹니다.

실제 스마트폰에 뜨는 화면.

- 프로젝트를 선택하여 연결하면 javascript가 빌딩되며 연결됩니다.

 

위에 있는 주의사항을 따르며 하나하나 차근차근 설치하시면 Expo로 행복한 코딩을 할 수 있을거에요 ㅎㅎ.

이 글을 포스팅 하면서 Expo에 대한 기본 이론과 방법들을 한번 더 상기시키는 좋은 기회가 된 거같아요.

이 글을 보고 많은 분들이 도움이 되었으면 좋겠습니다.

 

혹시 따라하셨는데 오류가 나면 댓글 달아주세요!! 바로바로 확인하여 답글 달겠습니다.

 

감사합니다 ㅎㅎ

 

이상 포스팅을 마치겠습니다.

 

도움

- Expo 공식 홈페이지 : https://expo.io/?doNotRedirect=true

Expo

- 노마드 코더 React Native로 날씨앱 만들기 : https://youtu.be/v1vE7G6YQCc