RN iOS 개발공부 - CLI와 Expo 의 차이

EXPO는 RN을 편하게 사용할 수 있도록 미리 여러가지 설정이 되어있는 툴이다. expo 웹사이트에서 회원가입을 하지 않아도 프로젝트를 만들 수 있다. 처음 접근이 쉽고, 완성된 프로젝트르 쉽게 배포 및 관리할 수 있다. 햐지만 Expo에서 제공하는 api만 사용할 수 있어서 모듈을 자체적으로 만들어 사용하는 것이 불가능하다는 것이 단점이다. 그리고 RN CLI를 이용했을 때 빌드 파일의 크기가 크다.

 

나의 경우 CLI를 통해 프로젝트를 만들어보고 Expo를 통해 또 만들어보아 그 둘의 차이점을 몸소 느낄 수 있었다. 일단 기본적으로 제공되는 파일 구성들이 다르다(당연한 것인가..). 그리고 Expo의 경우 npm start를 입력하여 실행하면 웹페이지와 터미널에서 모바일에서 시뮬레이션을 할 수 있는 QR코드가 나온다. 이것은 각각 모바일에 Expo 앱을 깔으면 그 앱에서 내가 만든 프로젝트의 시뮬레이션을 직접 볼 수 있어고 앱 내에서 메뉴를 제공해서 초기 입문으로 아주 편리한것같다. 앱이라서 그런지 Expo 프로젝트를 실행하고 있는 기기의 목록을 개발자 도구에서 확인할 수도 있다. 그리고 해당 기기의 로그도 확인가능하다. Expo를 CLI 프로젝트로 변경할 수도 있다. eject 명령어를 사용하면 되는데, 이렇게 하면 Expo 프로젝트가 감추고 있던 것들이 드러나며 제약들도 사라진다. 하지만 다시 CLI -> Expo로 돌아올 수는 없다.!

그리고 CLI에 비해 ios/android로 나뉘어있지 않다. 그리고 앞서 말했듯 시뮬레이터가 터미널창에서 명령어를 입력했을 때 expo를 통하니 정상적으로 실행이 잘 되므로 별도로 XCode를 번거롭게 실행시킬 필요가 없다! ㅎㅎ 첫 프로젝트로는 Expo를 활용하기로 했다.  

// Expo로 생성한 App.js 파일

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

이에 비해 CLI는 조금 더 까다롭다. 나는 CLI로 프로젝트를 생성했는데, 프로젝트를 확인하려고 한 처음부터 빌드가 되지 않는 문제때문에 애를 먹었었다. 하지만 자체적으로 모듈을 만들려고 한다면 CLI를 써야하며 Expo에 비해 자유도가 더 높다. CLI를 빌드하면 Metro가 실행된다는것이 차이점이다.Metro는 RN을 위한 JS 번들러로, RN이 실행될 때마다 JS파일들을 단일 파일로 컴파일하는 컴파일러이다.

+ 이상하게도.. VS code 터미널에서 아이폰 시뮬레이션을 돌리면 아무것도 나타나지 않고 빌드 실패가 뜬다. 그래서 시뮬레이션을 확인하려면 XCode에서 실행해야한다.