React Native Expo 개발 환경설정

react native로 프로젝트를 만들려면 expo-cli, react native cli 2가지 방법이 있습니다.

- expo는 결과물을 내기 쉽고 개발을 하기 쉽다는 장점이 있지만, 제공해주는 라이브러리가 한정적이라는 단점이 있습니다.

- react native cli는 타언어를 추가로 사용하는 등 개발의 자유도가 높지만 처음 개발환경 구축이 까다롭다는 단점이 있습니다.

 

그렇기 때문에 저처럼 입문자 분의 경우 expo를 먼저 경험해보시는 걸 추천합니다.

 

저는 window 기준으로 개발 환경설정을 해보겠습니다.

※ 가급적이면 vs나 node.js 전부 설치 시 기본으로 지정된 경로에 설치해주세요! 그래야 에러가 발생해도 검색했을 때 수정하기 쉬워요.

 

1. Visual Studio Code 설치(https://code.visualstudio.com/)

Visual Studio Code 홈페이지에 들어가서 설치합니다.

 

2. Node.js 설치(https://nodejs.org/ko)

node 홈페이지에서 파일을 다운받아서 설치합니다.

안정된 버전이나 최신버전이나 상관없이 다운해주세요!

 

3.설정 변경

Windows PowerShell을 관리자 권한으로 실행해주세요.(우클릭하면 관리자로 실행이 있어요)

get-ExecutionPolicy을 실행해서 설정이 어떤지 확인해주시고, 해당 설정을 변경해주세요.(RemoteSigned으로 나온다면 해당 설정은 생략하세요!)

//스크립트 관련 설정 확인 명령어(RemoteSigned으로 되어있다면 생략!)
get-ExecutionPolicy

//스크립트 설정을 RemoteSigned으로 변경하는 명령어
Set-ExecutionPolicy RemoteSigned

이 이미지와 같이 나온다면 설정이 잘 변경된거예요.

 

4. expo cli 설치

파워쉘에서 아래 명령어를 입력해서 expo를 설치해주세요.

//-g는 글로벌 옵션으로 해당 조건을 넣어주시면 다른 폴더에서도 expo-cli를 사용할 수 있습니다.
npm install -g expo-cli

 

5. expo 프로젝트 만들기

상위 폴더를 만들어줍니다.

미리 만들어둔 폴더로 이동한 뒤에 아래 명령어를 통해서 expo 프로젝트를 입력합니다.(https://docs.expo.dev/ 참조)

//프로젝트를 생성할 상위폴더로 이동
cd C:\Users\....\Desktop\dev\expo
//npx create-expo-app [프로젝트명]
npx create-expo-app firstProject

폴더를 확인해보면 firstProject가 잘 생성되었습니다.

 

 

6. 프로젝트 실행해보기

vs를 실행하고 '폴더' - '폴더 열기'에서 아까 만들었던 프로젝트를 열어줍니다.

메인으로 실행되는 App.js 코드입니다.

상단 메뉴의 '터미널'-'새 터미널'을 클릭해 새 터미널을 생성합니다.

새 터미널을 누르면 아래와 같이 터미널이 생겨요.

터미널에서 npm start를 명령어를 실행합니다.

//버전이 업데이트 되면서 expo start에서 변경되었습니다.
npm start

실행이 되었다면 해당 QR코드를 핸드폰에 실행해도 괜찮고 각 에뮬레이터를 실행하시면 됩니다.

기본으로 프로젝트를 생성하고 실행하면 이렇게 보여요!

 

저는 그냥 BlueStack에서 ExpoGo 앱을 설치해서 사용하는 편이예요. 실행해보니 잘 되네요.

 

만약에 Expo 프로젝트를 실행할 다른 방법도 확인해보고 싶으시다면 더 자세하게 정리한 내용을 통해서 확인해주세요.

2023.05.09 - [리액트네이티브] - React Native Expo 프로젝트 실행방법