[React Native] React Native(Expo CLI) 설치하기!

728x90

오늘은 React Native(Expo CLI)를 설치해보겠습니다!

일단, editor를 아직 설치하시지 않은 분들은 editor를 설치해주세요!

(editor는 개발을 위한 메모장(?)이라고 생각하시면 됩니다)

제가 추천하는 editor는 Visual Studio Code입니다!

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

홈페이지에 들어가시면 위와 같이 나오는데, 여기서 파란색 박스 안의 Download [운영체제] 로 되어있는 버튼을 눌러 설치파일을 다운받아주시면 됩니다!

그리고 다음으로는 Node.js를 설치해 주겠습니다!

NodeJS는 맥 기준으로 크게 두가지 설치 방법이 있는데, 하나는 공식 홈페이지에서 설치 프로그램으로 다운받는것과,

Homebrew를 통해 설치하는 방법이 있습니다!

1. 설치 프로그램을 이용하여 다운받기(Mac, Windows 상관X)

설치 프로그램을 이용하시려면

공식 홈페이지를 들어가셔서 다운로드 해주시면 됩니다!

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

이 화면에서 두 개의 큰 초록색 버튼이 나오는데, 원하시는 버전을 다운받으시면 됩니다!

저는 LTS(Long Term Support) 버전을 다운받으시는 걸 추천드립니다 :)

2. Homebrew를 사용하여 다운받기(Mac, Linux에서만 가능)

맥 또는 리눅스를 사용중이시라면 Homebrew를 설치하셔서 다운받으시는 걸 추천드립니다!

Homebrew는 패키지 관리자인데요, 이걸 설치하시면 터미널(윈도우의 CMD)에서

명령어 한 줄 만으로 프로그램을 설치하실 수 있습니다!

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

터미널을 여시고,

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

위 명령어를 입력해주세요!

그럼 이렇게 암호를 입력하라고 나오는데요, 사용자 암호를 입력하시고 계속 진행하시면 됩니다!

(암호 입력하셔도 **** 같은 표시가 없어요! 그래도 입력중인 거니 다 누르시고 Enter 해주시면 됩니다!)

Homebrew를 다 설치하셨다면,

이제 아주 간단한 방법으로 NodeJS를 설치하실 수 있습니다!

이제 터미널에

brew install node

이 명령어만 치시면 nodeJS 설치가 시작됩니다!

nodeJS를 설치하시면 npm이라는 것도 같이 설치되는데, npm은 React Native 개발하면서 패키지를 다운할 때 유용합니다!

그래도 전 yarn을 좋아하기 때문에 yarn도 설치해주겠습니다!

yarn 설치(필수 X)

아까 nodeJS를 설치하시면 npm도 같이 설치된다고 했었죠?

이제 npm으로 yarn을 설치할겁니다! :)

터미널(또는 CMD)에

npm install --global yarn

위 명령어를 입력하시면 자동으로 yarn이 설치됩니다!

expo-cli 설치

이제! (시뮬레이터가 필요하지 않으시다면)마지막으로 expo를 설치해 주겠습니다!

expo를 설치하기 위해서, 아래 코드 중 하나를 입력해주시면 됩니다!

(npm 이용)

npm install --global expo-cli

또는

(yarn 이용)

yarn global add expo-cli

Xcode 또는 Android Studio 설치(선택)

이제, 개발하면서 iOS, Android 시뮬레이터를 이용하여 테스트하기 위해

Xcode(iOS 시뮬레이터를 이용하기 위함), Android Studio를 설치하겠습니다 :D

또는 그냥 Web으로 테스트하시거나 실제 기기로 테스트하셔도 됩니다!

(Web은 프로젝트를 만들고 터미널에서 yarn start 후 w 입력, 실제 기기는 expo앱을 설치 후 QR코드 스캔)

Xcode 설치

Xcode는 우선 맥에서만 설치가 가능해요!

(그래도 다른 시뮬레이터들이 있으니 윈도우이셔도 상관없어요! 윈도우를 사용중이시라면 XCode 부분은 넘어가주세요 :)

Xcode는 설치가 간단합니다!

맥 App Store에서 Xcode를 치시고 설치해주시면 됩니다!

다 다운 받으시고 Preferences > Locations > Command Line Tools에서 Xcode OO.O.O (O 부분은 버전입니다 :) 선택해주시면 됩니다!

Android Studio

Download Android Studio and SDK tools | Android Developers

developer.android.com

안드로이드 스튜디오는 위 홈페이지에서 설치해주시면 됩니다!

https://docs.expo.dev/workflow/android-studio-emulator/

자세한 설명은 expo 공식 문서를 참고해주시면 좋을 것 같아요 :)

Expo 모바일 앱 설치(선택)

마지막으로, 실제 기기에서 테스트해보시려면,

-안드로이드-

Expo - Google Play 앱

Expo는 JavaScript 및 React를 사용하여 앱을 제작하는 무료 및 오픈 소스 플랫폼입니다.

play.google.com

-아이폰-

‎Expo Go

‎Start building projects using web technologies with just your iOS device and your computer. Expo is a developer tool for creating experiences with interactive gestures and graphics using JavaScript and React. Note: some programming experience is recomme

apps.apple.com

위 링크들에서 앱을 다운받으시고,

Scan QR Code 또는 카메라에서 QR 코드를 스캔하시면 됩니다!

자, 여기까지 오셨다면 이제 React Native를 사용할 준비가 다 되셨습니다!!! :D :D :D

혹시라도 잘못된 부분이나 추가해야 할 부분이 있으시면 언제든지 댓글로 말씀해주세요 :)