리액트 네이티브 #1_ 리액트 네이티브 개발 환경 구성하기

안녕하세요.

해당 카테고리에서는 리액트 네이티브(React Native)를 이용한 모바일 어플리케이션 만들기에 대한 내용을 이야기해볼까 합니다.

과거에 약간 해보다가 다른 공부를 하느라 놓게 되었는데, 최근 모바일 어플리케이션을 개발해야 할 일이 생겨서 다시 공부하게 되었습니다.

무엇보다 리액트 네이티브는 iOS와 Android 어플을 동시개발할 수 있다는 점 때문에 유명하기도 하고, 인기가 좋기도 합니다.

facebook에서 개발하였고, 실제로 facebook iOS어플리케이션을 비롯해, 인스타그램, 에어비앤비, 우버 등이 리액트 네이티브를 이용해 어플리케이션을 제작한 것으로 알고 있습니다.

리액트 네이티브에 대한 자세한 점은 직접 구현해보면서 체험하는 걸로 내려놓고.. :)
이번 포스팅에서는 그 시작으로, 리액트 네이티브를 통한 어플리케이션 개발을 위해 기본적인 환경셋팅을 해보도록 하겠습니다.

---

1. Expo

기본적으로 우리는 Expo를 이용합니다.

뭐랄까, 엑스포는 리액트 네이티브를 기반으로 만들어진 플랫폼인데 우리가 리액트 네이티브로 어플리케이션을 개발하면서 테스팅 해볼때 iOS와 Android 시뮬레이터 모두를 지원해줍니다.

또한 실제로 핸드폰에서 단순히 QR코드를 인식시켜주면 우리가 개발하고 있는 어플리케이션을 테스트 해볼 수 있고, 로컬에서 코드를 수정하면 그것이 실시간으로 업데이트 되면서 반영됩니다.

저는 현재 맥OS를 사용중이기에 윈도우보다는 맥OS에 초점을 둘 것 같지만, 윈도우를 사용하시는 분들은 설치할 때 자신의 운영체제에만 잘 맞춰서 따라오시면 될 것 같습니다.

Expo xde

먼저 Expo xde를 아래사이트에서 다운받습니다.

https://docs.expo.io/versions/latest/introduction/installation

위의 사이트에 들어가서, 빨간색 밑줄친 부분을 확인하고 자신의 운영체제에 맞는 것을 다운받아서 Expo xde를 설치합니다.

Expo xde란 쉽게말해서, 그냥 우리가 Expo를 사용하게 해주는 툴? 정도로 생각하시면 됩니다.

설치받은 Expo xde를 실행시키고 expo에 가입해서 로그인하면 위와 같은 화면이 나옵니다.

2. Text aditor

두번째로 설치해야하는 것은 텍스트 에디터입니다.

VS code, atom, sublime 무엇이든 여러분이 좋아하고, 익숙한 것을 고르시면 될 것 같고 선택을 못하겠다 하시는 분들께서는 제가 앞으로 사용할 VS code를 설치해주시면 됩니다.

VS code는 아래 사이트에서 설치가 가능합니다.

https://code.visualstudio.com/

3. iOS simulator (선택 사항)

우리가 앞으로 어플을 개발하면, 중간중간 실제로 잘 동작하는지 눈으로 확인해봐야 하는데, 그럴때 사용하는 것이 simulator입니다.

꼭 simulator를 설치하지 않더라도 여러분이 갖고 계신 핸드폰에 Expo 어플리케이션을 설치하여 이후 QR코드를 인식시켜주면서 확인할 수도 있습니다.

그래도 컴퓨터로 바로바로 코드를 작성하면서 확인하는 것이 제 생각에는 편리하기 때문에 시뮬레이터 설치를 추천드립니다...만..

iOS 시뮬레이터는 윈도우 환경에서 설치 및 구동이 불가능 합니다.

맥을 이용하시는 분들께서는 Xcode를 최신버전으로 업그레이드 해주시고 아래 명령어를 터미널에 입력합니다.

sudo xcode-select -s /Applications/Xcode.app

그리고 xcode 를 실행시키면 무언가 설치해야 된다고 뜰텐데 그걸 설치해주시면 됩니다.

4. Android simulator (선택 사항)

하지만! 안드로이드 시뮬레이터는 맥, 윈도우 상관없이 설치하고 구동이 가능합니다. 다만 몇가지 설치해야할 것들이 있는데 천천히 설명드리도록 하겠습니다.

먼저 아래 사이트에서 안드로이드 스튜디오를 설치합니다.

https://developer.android.com/studio/index.html?hl=ko

설치파일을 실행하면 처음에, standard말고 custom으로 선택해주시고 이후에는 체크되어 있는 그대로 진행하시면 됩니다.

이후 설치가 완료되면 안드로이드 스튜디오를 실행하여 새로운 프로젝트를 만듭니다. 추가적으로 설정할 것은 없습니다.

이후 프로젝트가 생성되면 상단 메뉴들 중에서

Tools > AVD manager 를 들어갑니다.

그럼 위와 같은 화면이 뜰텐데 위와 같이 기본적으로 가상 기기가 있으신 분들은 그대로 두시면 되고, 없으신 분들은 좌측하단에서 새로운 디바이스를 추가해줘야 합니다.

이후 안드로이드 에뮬레이터를 사용할때는 위와 같은 창을 띄우고 기기의 오른쪽에 있는 재생버튼을 눌러서 에뮬레이터를 실행시키고 난 후에 사용하시면 됩니다.