[React Native] EXPO Mac 개발환경 구축 , Hello world

이번 포스팅에선 Expo Cli 개발을 위한 환경세팅 작업을 하려고 합니다.

제 개발환경인 Mac을 기준으로 설명드리는데

혹시 Window 개발환경 설정이 필요하시다면 댓글로 작성해주세요!

 

개발환경 설정하고 제가 제일 좋아하는! 

hello world

를 만들어보겠습니다!

새로운 걸 시작하면서 Hello World를 해보는 건 너무 설레는 것 같아요. (저만 그런가요..)

 

포스팅 관련된 모든 코드는 아래 Github Repository에서 확인할 수 있습니다

GitHub - choseungyoon/ReactNative_Study_Chapter_1: ReactNatvie Chapter 1 학습 자료입니다.

 

사전 작업 

본격적인 설정 들어가기 전에

EXPO 개발을 하기 위해서 사전에 다운로드/설치해야 되는 SW가 있어요. 이거 먼저 시작해볼게요

 

EXPO GO 다운로드

우선 시작하기전에 사용하고 계신 스마트폰에서 "EXPO GO" 라는 앱을 다운받아주세요

Expo Go 앱 다운받기

 

Node JS 설치

아래 주소 접속해서 다운로드 해주세요! 전 LTS 버전으로 설치했습니다

Node.js

 

잘 설치되었는지 확인해보려면 Terminal을 열어서 아래 명령어를 실행하면 됩니다. 

node -v

Node JS 설치 확인

설치하면 Version 정보가 나오면 정상적으로 설치된거에요

 

Git 설치

Source 버전 관리를 위해 Git설치를 해보겠습니다. 아래 링크에서 접속 후 Download에 가시면 여러 다운로드 방법이 있어요

Git

 

저희는 아래 설치 방법 중 Homebrew를 사용해볼게요

Terminal에 아래 명령어를 입력합니다

# Homebrew 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Git 설치
brew install git

Homebrew는 macOS용 패키지 관리자에요.

GIt뿐만 아니라 다양한 소프트웨어와 도구를 쉽게 설치하고 관리할 수 있게 해줍니다.

macOS에 없는 많은 터미널 기반 도구나 애플리케이션, 라이브러리 등을 간편하게 설치하는 데 많이 사용되니 앞으로 자주 보실거에요

 

Watchman 설치

Watchman은 Facebook, 지금의 Meta가 만든 File 모니터링 도구입니다.

Mac OS에서만 사용할 수 있고 파일을 모니터링 하면서 변경이 있을 때 특정 작업을 처리하는 용도로 활용되고 있어요

Installation | Watchman

 

Watchman도 Homebrew를 사용해서 설치해볼게요

# Watchman 설치
brew install watchman

 

Visual Studio code for Mac 설치

이제 개발 IDE를 설치해볼게요.

전 VS Code를 사용하고 있어서 이걸 기준으로 진행하겠습니다!

아래 링크에서 환경에 맞는 VS Code를 다운받고 설치해주세요. 전 Mac을 받겠습니다.

Download Visual Studio Code - Mac, Linux, Windows

 

Yarn 설치

Package Manager로 사용할 Yarn를 설치하겠습니다. 

Yarn은 Javascript 개발 시 필요한 Package를 설치하는데 사용되고 npm보다 속도가 빠르고 여러 추가 기능들이 많아서 개발 시 많이 활용되고 있어요

Terminal에 아래 명령어를 입력합니다. 

# yarn 설치
npm install --global yarn

# 설치 확인
yarn --version

 

이제 필요한 세팅이 끝났습니다! 수고하셨어요

 

EXPO 설정

이제  Expo 관련 명령어를 사용해보겠습니다. 

# Expo help 명령어
npx expo -h

expo 명령어는 간단하게 expo라고 명시해주면 됩니다. -h는 help의 약자로 expo 관련 여러 명령어를 도움주는(help..?) , 설명해주는 명령어입니다. 

npx가 생소하실것 같아요.

원래 npx 없이 "expo -h" 이렇게 사용할 수 있어요. 

근데 expo가 설치되어 있지않다면 그 전에 "brew install expo" 와 같이 설치를 먼저 해야 될거에요.

npx를 사용하면 아직 설치되지 않은 패키지는 다운받은 후 설치 , 이미 설치된건 최신버전으로 업데이트 후 실행 하는 등 조금 더 Package 관리를 쉽게할 수 있어요. 디스크 공간도 절약되구요!

npx expo -h 실행결과

 

EXPO 프로젝트 만들기

이제 프로젝트를 만들고 스마트폰에 다운받았던 EXPO GO 앱으로 실행까지 한번 해볼게요

공식 문서 링크도 첨부할테니 한번 읽어보시면 좋아요

Create your first app

 

아래 명령어를 실행하면 Expo 프로젝트를 생성할 수 있어요

# Expo Project 생성
npx create-expo-app MyFirstExpo

cd MyFirstExpo

MyFirstExpo는 제가 임의로 적은 Project Name입니다. 각자 원하시는걸로 변경하셔도 됩니다

Project 생성 후 cd 명령어로 폴더에 들어가면 아래와 같은 파일들이 생성되었을거에요

 

이제 거의 다 끝났어요! 

프로젝트 실행을 해보겠습니다. 아래 명령어를 입력해주세요

# Expo 프로젝트 실행
npx expo start

 

실행하면 아래와 같은 결과가 나올거에요

 

QR코드가 하나 보일거에요! 

자 이제 각자 스마트폰에서 안드로이드폰은 Expo Go 앱을 실행하면 QR 코드 촬영 버튼을 누르고

아이폰이라면 카메라 앱에서 위 QR코드 촬영해주세요!

이렇게 iOS  , Android Bundling complete 라고 나오면 됩니다. 

그리고 스마트폰 화면을 확인해보세요! 

Project 초기 화면

 

앱이 실행된것을 확인할 수 있습니다! 너무 쉽고 빠르지 않나요? 

VS Code에서 프로젝트를 열고 App.js의 코드를 아래와 같이 수정해볼게요.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Text 부분을 Helloworld로 변경했습니다.

저장하면 바로 스마트폰에도 반영되는걸! 확인할 수 있습니다.

너무 신기하네요

Hello world 화면

 

 

자 이렇게 Expo 설정과 프로젝트 시작을 같이 해봤습니다. 

생각보다 간편하고 쉽지 않나요? 

다음 포스팅에선 화면구성에 기초적인 Core Component에 대해 알아볼게요! 

[React Native] Core Component 만들기 - Text, Image, ScrollView, Button , Switch