이온의 일상

iOS 및 안드로이드 에뮬레이터 환경을 구축하기위해 공부하던 중

안드로이드 에뮬레이터 윈도우나 맥 모두 구축 가능하지만,

iOS 에뮬레이터는 맥이 있어야 구축 가능하다는 점을 알게 되었다.

지금까지 윈도우 환경에서 진행하다가 ios 에뮬레이터를 동시 구축하기 위해 맥북에어 중고를 구매하고, 다시한번 설치를 진행하였다. 진행하면서 다른 부분이 있어 요약해 보았다.

1. https://expo.io/learn에서 node.js다운로드

2. Terminal(맥에서 윈도우의 cmd와 같은 시스템)에서 npm설치 진행

*맥북을 처음 써보느라 Terminal이 어디에 있는지도 헤메었다.
  상태창 우측 끝쪽에 위치한 검색 기능을 눌러 terminal을 검색하면 된다.

Terminal을 연 후, 아래 설치과정을 수행한다.

  3. https://code.visualstudio.com/에서 Visual Studio Code 다운로드 및 설치

*이번에 맥북 세팅을 하면서 맥OS에 대해 다시 알게 되었다. 윈도우 버젼에서는 각각의 실행되는 윈도우 상단에 메뉴창이 있다.

 그런데 맥은 시스템을 실행시키면, 항상 있는 상단 메뉴바가 해당 프로그램에 맞게 뜬다.

코딩에 들어가기 위해 코딩 툴인 Visual Studio Code를 설치하자.

https://code.visualstudio.com/

설치 후 실행한 다음 젤 난감한 것이 어떻게 기본환경을 만드느냐일 것이다.

최 상단의 File을 클릭하던, 화면 내의 퀵 메뉴의

Open folder... 를 선택하자.

그리고, 일반적으로 cmd를 수행하고 프로젝트를 생성한 위치인

C:\Users\(사용자명)\에서

npm 설치 시 만든 프로젝트 폴더를 선택 후, [Add]버튼을 누르면, 기본 환경의 화면이 나온다.

약간의 편의성 커스터마이징으로 View > Extensions에서 "materal icon"을 검색하여 설치해 주자.

설치 후 에디터 화면으로 가면, 각 영역이 아이콘 모양으로 보이게 된다.

이제 실행해 봅시다. 코드를 저장하고, cmd창을 열어,

지난번 만든 project 폴더로 이동 후, npm을 실행합니다.

이후, Run in web browser를 클릭하면 웹에서 실행한 결과를 볼 수 있고,

스마트폰에서 Expo앱을 실행 후, QR코드를 읽어주면, 앱에서 실행된 화면을 볼 수 있습니다.

신기한점은 이렇게 실행화면을 켜 둔 뒤, 코드를 수정 후 저장하면,

실행화면이 Refresh되면서 실시간으로 변경됩니다.

*앱 실행화면이 잘 동작하지 않는경우

웹 환경 실행은 되는데, 스마트폰 Expo에서 실행이 안된다면, 커넥션 설정을 변경해 보시기 바랍니다.

처음에는 LAN환경으로 잘 동작하는데, 재시작 과정에서 LAN IP가 localhost:19000 에서 1씩 올라가는데,

QR코드는 계속 19000으로만 생성하는 오류가 있다보니, Tunnel로 확인하는 것이 잘 동작합니다.

이제 React Native 개발을 위해 Expo를 설치해 봅시다.

사이트(https://expo.io/learn)에 방문하여,

STEP02 항목의 [Download Node.js]버튼을 눌러 

Node.js를 설치합니다(최신 버젼이던 범용버젼이던 관계없음).

Node.js는 JS기반의 프로그램을 개발할 수 있는 플랫폼인데, 상세한 사용법은 패스하고,

Expo 설치과정 설명 위주로 포스팅 하겠다.

Expo는 Node에 패키지 형태로 구성되어 구동되는 시스템인거 같다.

설치는 굉장히 오래 걸립니다(전 20분 이상 걸린 것 같네요).

도중에 Enter도 눌러줘야 하고, 멈춘것 같지만, 그냥 오래 걸리는 화면에서 딴일 하다보니

어느새 설치화면 창이 사라져 있더군요.

Node가 다 설치되었으면 Expo를 설치해 봅시다.

STEP03

CMD화면에 npm install expo-cli --global  를 입력해주면 Expo가 설치됩니다.

설치가 끝나면, 다음과 같이 표기되면서, 설치가 종료됩니다.

STEP 04

역시 CMD창에서 expo init my_project 를 입력하여 프로젝트를 생성해 줍니다.

그러면 아래와 같은 선택화면이 뜨는데, blank 선택 그대로 Enter를 누르면 됩니다.

잠시 시간이 소요된 후 프로젝트가 생성되었다고 뜹니다.

STEP 04의 나머지 문구를 입력하여 실행 가능하다는 안내도 해주는 군요.

cd my_project

npm start

를 입력하면, 개발환경 화면이 브라우져에 뜨게 됩니다.

개발환경에서 코딩 후, 여기서 "Run in web browser"를 누르면

웹 환경에서 실행 결과를 볼 수 있다(다음 포스팅에서 테스트).

또한 코딩한 결과를 폰에서 보기 위해서는 OS에 맞게 expo 앱을 설치합니다.

설치 및 실행환경 구축편은 여기까지.

다음 글에서는 코딩환경 구축 및 실행을 해보도록 하겠습니다.

참고자료 

*전반 컨텐츠 : https://expo.io/
*Node, npm관련 설명 : https://kdydesign.github.io/2017/07/15/nodejs-npm-tutorial/

React Native개발을 하기위해 어떻게 설치해야 할까요?
(이번 포스팅은 상황만 설명하고, 실제 설치과정은 다음 포스팅을 보시면 됩니다.)

공식 홈의 설명을 좀 따라가 보도록 하죠.(https://reactnative.dev/).

첫 난관에 봉착!

두 가지가 있다고 하는데, 어느 방향으로 개발환경을 구축해야 할까요?

Expo CLI Quickstart는 무료 시스템으로 Expo가 제공하는 범위내에

개발이 편리한 특징들(Features)을 제공합니다.

특징들 이라 함은 아래와 같은 관리 기능들입니다.

React Native CLI는 기존 App개발자가 접근하는 방법으로,

개발환경을 제공하는 것이 아니라, Xcode나 Android Studio가 있어야 합니다.

위와 같은 시스템에 설치되어 돌아가는 형태죠.

Expo처럼 편리한 특징들을 제공하진 않아 초심자에게는 힘들순 있지만

능력에 따라 모든 네이티브 코딩을 할 수 있는것 같습니다.

기존 개발자가 아니므로, 초심자는 Expo로 시작하기로 합니다!!

참고자료

* React Native setup :  https://reactnative.dev/docs/environment-setup

* Expo features : https://expo.io/features

React.js와 React Native관계

React Native는 React.js의 특수한(앱 컨트롤을 위한) 언어로, 네이티브 앱 언어로 변환될 수 있는 언어입니다.

아래와 같이 Web언어체계와도 차이가 있고, 네이티브 앱 언어와도 차이가 있죠.

위에서 보면, Web언어와 App언어, React Native 언어가 다릅니다.
위 상황으로 보면 완전 따로노는 모습인데, 왜 React Native가 생겨났을까요?

Web에서는 <div>를 쓰는데, App에서는 둘다 view라는 형태로 쓰고 있고,
Web에서는 <input>, App에서는 Text라는 형태를 쓰고있죠.

React Native는 App에 직관적인 <View>, <TextInput>을 사용합니다.
그리고 전반적인 문법을 JS(Java Script>체계로 쓰죠(엄밀히 말해서는 JSX).

아마도 Web개발자가 App개발에 접근하기 용이한 형태이기 때문이 아닐까 싶습니다.

App에서 시스템의 로직은 JS를 활용하는 반면,
UI는 App 고유의 문법을 써야 합니다.

React Native는 기존 JS 문법구조로 UI를 구성하기에
Web개발자가 접근이 좀 더 용이한 환경을 제공하기위함 일 것 같네요.

기존 Web개발자가 App개발(심지어 iOS와 Android가 다름)에 쉽게 접근하여
컴파일을 통해 iOS, Android 시스템을 모두 만들 수 있습니다.

그럼 React Native의 문법구조를 좀 더 자세히 볼까요?

React는 web componets를 활용하는 문법이며, native app components를 활용합니다.

따라서 React Native를 이해하기 위해서는 native components 구조를 알아야 하겠죠.

기본 문법은 ES6라고도 하는 ES2015 문법을 사용합니다.

*ES(European Computer Manufacturers Association Script) : 국제 표준 스크립트 프로그래밍 언어

import, from, class, extends 와 같은 것 들이 ES6문법입니다. 

특이한 부분이 <View><Text>Hello world!</Text></View>와 같은 부분이 코드안쪽에 들어가는데, 

JS(Java Script)에 XML이 쓰여진 JSX구조이죠.

이러한 방식으로 HelloworldApp과 같은 native component들을 만들어 사용하게 됩니다.

props(properties)

component를 만들 때, 특성 정보들을 만들어 "props"로 호출할 수 있습니다.

name 이라는 props를 만들어 호출(this.props.name)하는 예시입니다.

이미지에 대한 props는 "source" 라는 명칭으로 사용할 수 있습니다.

아래 예는 pic이라는 props를 만들어 source라는 구문으로 호출했죠.

참고자료

*구조이론 : https://www.youtube.com/watch?v=qSRrxpdMpVc&t=908s

*ES6문법 : https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

*props : https://facebook.github.io/react-native/docs/tutorial