이온의 일상

개발영역은 크게 두 부분으로 나뉘어 지는데,

Front End(Client Side)와 Back End(Server Side)이다.

Front End에서는 정보를 실제 입력하고 확인하는 부분을 다루고,

Back End는 정보 저장 처리를 만튼 서버 부분을 다룹니다.

React Native부분은 Front End를 담당하는 부분입니다.

요즘에는 각종 API(Application Programming Interface; 응용프로그래밍 인터페이스)들이 제공되고 있어,

Back End를 만들지 않아도 Front End에 붙여서 적용할 수 있는 기능들도 많이 있습니다.

(예를 들어 구글맵을 직접 만들고, 서버에 저장할 필요 없이 그냥 불러와서 쓸 수 있는거죠.)

저의 경우, Web와 App을 동시에 개발하는 것을 목표로 하기에,

Web부터 익히기로 결정했습니다.

만들어진 Web 기능을 바로 App으로 출시하기는 매우 쉽게 가능하다는 것을 알게 되었기 때문입니다.

*이미지 출처 : http://frontend.diffthink.kr/2018/09/web-development-front-end-vs-back-end.html

Visual Studio Code를 실행하여 본격적으로 시작을 해보자.

Open Folder..를 통해, 생성한 프로젝트를 열고, Terminal>New Terminal을 눌러 터미널 창 함께 띄우자.

터미널에서 해야 할 일은 npm start 를 눌러 테스트 대기 상태로 두고, 

안드로이드 스튜디오를 켜서 셋팅해둔 안드로이드 에뮬레이터를 , xCode를 실행해서 iOS 에뮬레이터

이렇게 2개를 띄워놓으면, 실시간으로 확인하며 코딩이 가능한 환경 구축 완료!!!

이제 App.js내에 코딩되는 부분들을 살펴볼 텐데, 본문을 보면 StyleSheet, Text, View 라는 Component들을 import하여 쓰고있다.

그럼 React Native에서 지원하는 Component들은 어떤 것이 있을까?

https://reactnative.dev/docs/components-and-apis

에서 각종 컴포넌트들을 확인 할 수 있다. 기본적인 것부터 잘 정리해 두었으니, 각각에 대해 공부하여,

사용할 수 있는 전반적인 기능들을 훑어보고, 어떻게 사용하는지 대충 파악해둘 필요가 있다.

그 다음에는 본인이 어떤 기능들을 활용하여 시스템을 만들수 있을까 고민한 후,

API를 보면서 코딩을 진행해 나가면 될 것이다. 익숙해 지면 안보고도 쓸 수 있게 되는것일테고... 

참고로 API 메뉴를 쭉 내려보면, 공통으로 사용하는 API가 있는 반면,

각 OS에서 서로 다르게 지원되는 Component들도 있어, 구분해 두었다. 

여기까지 구축하고 문제가 생겼다.

현재 셋팅한 윈도우PC, 그리고 맥북프로 모두 i5에 RAM 8G인데, 

윈도우PC에서는 안드로이드 에뮬을 돌리면 CPU사용량이 100%가 되면서 버벅거려 작업이 불가능했다.

에뮬만 CPU사용율 70%에 육박한다...

우선은 맥북프로는 문제가 없어서 맥북프로로 진행은 하지만, 뭔가 해결법이 필요할듯 보인다.

맥에서 아이폰 에뮬레이터 구축은 매우 간단합니다.

자사에서 만든 기기들만 지원하는 시스템이다보니 그런것 같네요.

1. 앱 스토어에서 Xcode를 검색하여 설치합니다.

2. 실행 후 상태창에서 preferences...를 선택 후, components에 필요한 iOS 버젼을 설치합니다(오래걸림).

위 과정을 수행하지 않아도  Xcode만 깔아도 시뮬레이터는 실행은 되는데, 4처럼 기기 종류를 선택할 수 없어짐

3. Xcode > Open Developer Tool > Simulator 를 누르면 시뮬레이터가 실행된다.

4. 시뮬레이터 실행 후, File > Open Device > iOS버젼을 선택하면 각종 장비를 선택할 수 있다. 

앱 테스트를 위해 맥북에어에 안드로이드 스튜디오를 설치하고 에뮬레이터 생성하였는데, 실행오류가 발생했다.

For app testing, I installed an Android studio in MacBook Air and created an emulator.

However, an OS X error message appeared without being executed.

이런 경우는 OS의 버젼문제로 발생하는 것으로, macOS를 업그레이드 해주면 해결된다.

In this case, it is caused by the OS version problem, and it can be solved by upgrading macOS.

나의 경우, 앱스토어에서 macOS Catalina를 검색하여 업데이트를 통해 해결하였다.

In my case, I could solve the problem by searching macOS Catalina in the app store and updating it.

If my article was helpful, please tap ♡공감 at the bottom.~

It's a huge boost to the blogger.  : )

안드로이드 에뮬레이터 환경 구축

에뮬레이터 환경을 구축하는 것은, 개발한 앱이 다양한 사이즈의 폰에서 정상적으로 보이는지 테스트해보기 위해 매우 중요합니다.

1) Android studio 설치 ▶ https://developer.android.com/studio?hl=ko

2) 실행 후 Configure ▶ SDK Manager 선택

 ① SDK Platforms 탭에서는 설치할 안드로이드 버젼을 선택합니다.

  제가 가지고 있는 업그레이드 한 삼성 갤럭시S4는 7.0을, LG V20는 9.0을 사용하고 있네요.
  (개발된 앱이 더 옛날폰까지 지원되는지 테스트 하려면 해당 버젼까지 체크합니다.)

 ② SDK Tools 탭에서는 아래와 같이 체크한 후, [Apply]버튼을 눌러 받아줍니다. (오래걸림)

3) Configure ▶ AVD Manager를 선택 후, Create Virtual Device를 해줍니다.

① 테스트 할 기기의 스크린 사이즈를 선택한 후 [ Next ]

② 안드로이드 버젼을 다운로드 및 선택 후 [ Next ]

③ 가로 또는 세로 기본설정을 선택 후(나중에 돌릴 수 있음) [ Finish ]를 누르면, 가상 기기가 만들어지며,

④ 우측의 ▶ 버튼을 누르면 에뮬레이터가 실행됨.

4) 이제 생성한 Expo 프로젝트를 실행한 후, 좌측의 Run on Android device/emulator 를 눌러주면,

시뮬레이터에서 실행이 됩니다. (혹시 한번 눌러서 반응이 없는경우, 한번 더 눌러주면 되기도 함)

맥에서 OS X에 대해 에러가 나면서 에뮬레이터가 실행되지 않는 경우가 발생했다.

이런 경우 맥 OS를 업데이트 하면 해결된다. 앱스토어에서 Catalina를 검색하여 업데이트로 해결완료!!

*안드로이드 스튜디오 사이트에서 맥용 파일을 제공하기는 하지만, 맥OS에서는 앱스토어를 통해 받은 프로그램이 아니면 앱이 설치되지 않고, Disk Image라 하여 윈도우의 가상CD처럼 동작한다.  따라서 매번 실행할 때,  다운로드에 가서 받은 파일을 실행시켜줘야 한다. 

*참고자료 : https://docs.expo.io/versions/v37.0.0/workflow/android-studio-emulator/