TigerCow.Door


안녕하세요. 문범우입니다.

우리가 지금까지 두 차례의 포스팅에 거쳐서, 리액트 네이티브 개발 환경을 구성하는 방법과 리액트 네이티브에서의 아주 기본적인 내용에 대해서 알아보았습니다.

이번 포스팅부터는 실제로 프로젝트를 시작하여 코드를 작성해도록 하겠습니다.


1. 프로젝트 시작하기


먼저 우리는 첫번째 포스팅에서 Expo 를 설치하였습니다.

설치한 Expo를 실행합니다.



위와 같은 기본 화면에서 Create new project를 누릅니다.




위와 같이 둘 중 하나를 고르는 화면과 함께 프로젝트 이름 및 경로를 설정할 수 있는 창이 나옵니다.

일단 우리는 Blank를 선택하여 진행합니다.

Tab Navigation은 추후에 다뤄보도록 하겠습니다.

그리고 적절한 프로젝트 이름과 경로를 설정하여 Create를 누릅니다.


그럼 이제 Expo가 알아서 리액트 네이티브 환경을 가지는 프로젝트를 만들어 줍니다.

프로젝트를 만드는데에는 약간의 시간이 소요되니 잠시 기다리시면 됩니다.



프로젝트가 만들어진 뒤에 위와 같은 창이 뜨면 좌측 창에 아래와 같은 문구가 뜰때까지 대기합니다.



맨 아래에 써진 문구 처럼 이제 우리는 해당 프로젝트를 Device에서 실행시키거나 share를 할 수 있습니다.


일단 실제 핸드폰을 사용하기보다, 우리가 첫번째 포스팅에서 설치했던 시뮬레이터를 사용해보도록 하겠습니다.

저는 iOS를 기본으로 진행하지만, 안드로이드분들께서는 안드로이드 스튜디오를 통해 에뮬레이터를 켜주시면 됩니다.

iOS분들께서는 따로 시뮬레이터를 킬 필요없이 따라오시면 됩니다.


우측상단의 Device 버튼을 눌러서 자신이 키고자 하는 운영체제를 맞게 클릭하시면 됩니다. (안드로이드 분들께서는 스튜디오를 통해 에뮬레이터를 켜놔야 합니다.)



그럼 위와 같이 시뮬레이터가 켜지면서 좌측 창에 무언가 다시 진행되고 있는 것을 보실 수 있습니다. 우리의 프로젝트를 시뮬레이터에 빌드하고 있는 정도의 작업이니, 약간 기다리시면 됩니다.


기다리다 보면, 빌드가 끝나고 시뮬레이터가 아래와 같은 화면을 띄웁니다.


너무나 간편하지 않나요?

단순히 몇번의 클릭만으로 이렇게 프로젝트를 시작하였습니다!



2. 프로젝트 다루기


그럼 이제 실제로 코드를 짜보면서 놀아보도록 하죠!

먼저 자신이 선호하는, 사용하는 텍스트 에디터를 켜서 프로젝트를 만든 경로를 열어봅니다.



저는 위와 같이 VS코드를 이용합니다.

우리가 만든 프로젝트이름의 폴더 안에 App.js 라는 파일이 있습니다.

해당 파일을 열어보도록 하겠습니다.



기본적인 어플이 코드가 작성되어 있습니다.

가운데에 Text태그로 묶인 곳에는 우리가 아까 시뮬레이터에서 봤던 문구가 적혀있네요.

그럼 해당 문구를 약간 바꿔보도록 하겠습니다.



위와 같이 코드를 수정하고 저장을 해보고, 시뮬레이터를 확인해보면!



위와 같이 바로 반영이 된 모습을 볼 수 있습니다.

너무 편리하지 않나요?

이렇게 Expo를 사용하면, 우리가 코드를 수정하고 저장했을 때 이를 인지하여 바로 프로젝트를 다시 불러와줍니다.

이러한 기능을 Expo의 Live Reloading 이라고 합니다.


그런데, 이보다 더 멋있는 기능이 있습니다.

Live Reload는 우리가 프로젝트를 새롭게 저장했을 때, 프로젝트 전체를 시뮬레이터에 새로 불러오는 기능인데, 이와 달리 Hot Reload 기능은, 우리가 수정한, 또는 새롭게 추가한 코드만을 인지하여 그 부분만 새롭게 불러옵니다.


쉽게말해서 Live Reload 보다 빠르게 결과를 확인할 수 있게 되는 것입니다.


이러한 Hot Reload 기능을 사용하기 위해서는, 시뮬레이터 창을 클릭하고, 커맨드+D 를 눌러 아래와 같은 창을 띄우면 됩니다.



위와 같은 창에서, 먼저 Disable Live Reload 를 눌러 Live Reload 기능을 끄고, 다시 커맨드+D로 들어가서, Enable Hot Reloading 을 눌러서 실행시킵니다.


이제 정말로 프로젝트를 좀 더 신나게 다뤄볼 준비가 끝났습니다.!



3. FlexBox


첫 번째로 우리가 프로젝트에서 다뤄볼 내용은 FlexBox입니다.

CSS 등에서 Flex에 대해 배우신분들도 있겠지만 리액트 네이티브에서 사용되는 Flex는 약간 다릅니다.

물론, 개념적으로는 같지만 사용하는 속성이나 값에 있어서 차이가 존재하기 때문에 꼭 한번쯤은 공부해보시는 것이 좋고, 만약 내가 CSS 등을 공부한적이 없어서 Flex가 무엇인지 전혀 모른다는 분들께서는, 간단하게 구글에 검색하여 기본적인 개념정도만 알아보시면 좋을 것 같습니다.


그럼 Flex에 대한 최소의 개념이 있다는 전제하에, 리액트 네이티브에서 제공하는 Flex를 사용해보도록 하겠습니다.


먼저 아래 코드와 같이, 원래 있던 Text를 없애고 두개의 View 컴포넌트를 만들고, 각각 redBox, blackBox 스타일을 만들어서 지정해줍니다.

이때 각 박스의 flex는 1로 설정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}/>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 1
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  }
});
 
cs


이렇게 코드를 작성하고 저장하면 아래와 같이 화면이 변하게 됩니다.



화면에서 볼 수 있듯이, 빨간색 박스와 검은색 박스가 서로 1:1 비율로 화면을 차지하고 있는 것을 볼 수 있습니다.

이처럼 flex 속성에 int 값을 넣어줌으로써 화면에서 얼마만큼을 차지할지 비율적으로 설정할 수 있습니다.

예를 들어, 위의 상태에서 빨간색 화면의 flex를 6으로 설정하면 다음과 같습니다.




- flexDirection, justifyContent, alignItems

( https://facebook.github.io/react-native/docs/flexbox.html#docsNav )


우리가 flex와 관련되어 다뤄볼 속성은 위의 3가지 입니다.

아래의 링크는 공식문서이니 참고하시면 좋을 것 같습니다.


먼저 flexDirection은 말그대로 flex의 방향을 설정해줍니다.

우리가 위에서 두개의 박스로 테스트 해보면서 느낌이 오는 것과 같이, 리액트 네이티브에서 flexDirection의 기본 값을 column 입니다. 즉, 컴포넌트들을 기본적으로 세로로 배치합니다.

만약, 가로로 배치하고 싶다면 flexDirection을 row 로 설정해줍니다.


저는 빨간색 박스내부에 흰색박스와 노란색 박스를 가로로 만들어 보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}>
          <View style={styles.whiteBox}/>
          <View style={styles.yellowBox}/>
        </View>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 6,
    flexDirection: 'row',
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  },
  whiteBox: {
    backgroundColor: 'white',
    flex: 1
  },
  yellowBox: {
    backgroundColor: 'yellow',
    flex: 1
  }
});
 
cs


위의 코드와 같이, 레드박스에 flexDirection을 row로 설정하고, 그 안에 화이트박스와 옐로우박스를 만들어서 넣었습니다.


그리고 결과는 아래와 같습니다.




그리고 justifyContent는 내부에 있는 컴포넌트들의 기본 축을 중심으로 위치를 잡아주는 것으로써, 아래와 같은 값들을 가질 수 있습니다.


설명

flex-start

flex의 축을 중심으로 처음부터 차례대로 요소를 배치합니다.

center

flex의 축을 중심으로 요소들을 가운데로 배치합니다.

flex-end

flex의 축을 중심으로 요소들을 맨 끝에 배치합니다.

space-around

화면 모서리를 포함한 요소들 서로의 간격을 동일하게 배치합니다.

space-between

화면 모서리를 제외한 요소들 서로의 간격을 동일하게 배치합니다.


실제로 화면에서 View컴포넌트를 만들고, 배경색을 달리해서 확인해보시면 좋을 것 같습니다.


마지막으로 alignItems는 기본 축과 직교되는 위치에 대해 설정하는 속성입니다.

이는 아래와 같은 값들을 가질 수 있습니다.


설명

flex-start

기본 축과 직교되는 축을 중심으로 처음부터 요소들을 배치합니다.

center

기본 축과 직교되는 축을 중심으로 가운데에 요소들을 배치합니다.

flex-end

기본 축과 직교되는 축을 중심으로 맨 끝에 요소들을 배치합니다.

stretch

기본 축과 직교되는 축을 중심으로 요소들을 늘어뜨립니다.


justifyContent와 alignItems 는 매우 비슷하지만, 현재 flexDirection을 어떻게 설정했냐에 따라서 서로 입장이 바뀌게 됩니다.


설명을 쓰다보니, 말이 좀 어렵게 되었는데 생각보다 어려운 개념이 아닙니다.

추후에 헷갈리지 않게 꼭 한번씩 값들을 넣어가며 테스트해보시길 바랍니다.


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요.

해당 카테고리에서는 리액트 네이티브(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 를 들어갑니다.



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

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



블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc