React Native 설치 및 로컬환경 작업부터 배포까지

설치 전 사전작업

- https://expo.dev/ 가입하기

- 휴대폰에 Expo Go 어플 설치하기

 

설치하기

1. https://expo.dev/ 접속

2. 처음 프로젝트를 만든다면 왼쪽 메뉴에서 Create Project 버튼을 클릭, 프로젝트를 생성한 적이 있다면 아래 버튼 클릭

 

 

3. 프로젝트 이름 작성 후 Create 버튼 클릭

 

 

 

4. 터미널에 아래 명령어 순서대로 입력

중요! 3번의 id 뒤에 3538d55d.... 이 부분은 변경이 되는 부분이니 저장해놓고 쓰지 말고 그때그때 확인해서 입력하기.

4-1. 맥북의 경우 1번 설치에서 Error가 발생한다면, 아래 명령어로 입력

sudo npm install --global eas-cli

4-2. 3번은 파일 경로로 들어가서 expo랑 연결해주는 작업이기 때문에, 2번에서 설치한 todoList 파일로 들어가서 입력하기.

이렇게 successfully linked 나오면 된다.

 

 

 

5. npm start 명령어 입력 

이런 QR이 생기는데, 본인 휴대폰 카메라로 찍으면 아까 설치된 Expo Go 어플을 통하여 내가 만든 로컬 화면을 내 휴대폰에서 볼 수 있다.

로컬 환경에서 수정하면 바로바로 적용된 것을 확인할 수 있다.

 

------- 여기까지는 로컬환경에서 작업한 것을 연결해서 볼 수 있는 방법, 밑에서는 배포 -------

 

1. vscode에서 터미널 하나를 추가로 연다.

2. eas update 명령어 입력

3. 엔터엔터 치면 아래와 같은 화면이 터미널에 출력된다.

4. 저 빨간색 표시해놓은 주소 링크를 cmd+마우스 클릭 으로 열어준다.

 

이런 화면이 나올텐데, 본인 휴대폰이 아이폰이면 IOS쪽의 Preview, 안드로이드면 Android쪽의 Preview 버튼을 클릭, 

 

 

5. QR을 다시 찍어보면, 그건 배포된 화면을 볼 수 있다.

무분별한 배포는 좋지 않으니 로컬환경에서 작업을 다 하고 완성되면 배포를 하자.