React Native : 시작하기

 

앱을 만들어 보고 싶었고, 리액트를 사용했던 경험이 있다보니 자연스레 리액트 네이티브를 배웠다. 검색해본 결과로는 리액트 개발 경험이 리액트 네이티브를 사용할 때에도 꽤나 많은 도움이 되는 걸로 보인다. 공식문서를 기반으로 인강과 함께 정리한 내용을 적어둘 생각이다. 

 

 

1) 리액트 네이티브 시작하는 방법

리액트 네이티브 자체로도 시작할 수 있지만, 공식문서에서는 프로젝트를 시작할 때 Expo 라는 프레임워크를 제안한다. 

 

'Expo' provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.

 

위의 설명만 봐도 Expo의 기능은 매우 강력하며 필수적인 요소로 보인다. 그럼에도 불구하고 framework가 없이 리액트 네이티브 앱을 만들고 싶다면 시작하는 방법을 공식 사이트에서 제공하고 있다. 

 

작업 환경 만들기 : https://reactnative.dev/docs/set-up-your-environment  

Expo 프레임워크 없이 시작 : https://reactnative.dev/docs/getting-started-without-a-framework

 

 

2) Expo를 통해 리액트 네이티브 시작하기

npx create-expo-app@latest

 

위 명령어를 통해 expo 프로젝트를 만들 수 있다. 원하는 폴더에 프로젝트를 만들고 진행한다. 

이후 부터는 리액트 네이티브 사이트가 아닌 expo로 넘어가서 추가 세팅이 진행된다. 

 

expo 세팅하기 : https://docs.expo.dev/get-started/set-up-your-environment/

 

사이트에 드어가면 먼저 어디에서 개발을 하고 싶은지와, 어떻게 개발을 하고 싶은지를 체크하게 된다. 

여기서 체크하는 것에 따라 앞으로 설정하는 값들이 다르다.

 

첫번째 체크의 경우 문서에서는 실제 모바일 기기를 권유했지만 나는 시뮬레이터를 써본 경험도 있고 해서 시뮬레이터로 설정하였다.  

 

두번째 체크는 처음에 Expo GO를 통을 체크하였는데 뭘 잘못했는지 물 흐르듯이 진행이 되지 않았다. 그래서 개발자 build를 체크하고 진행하였다. 추후에 어떤 차이점이 있는지 알게 되면 덧붙여야 겠다. 

 

 

 

- Expo에서 제공하는 EAS 서비스를 이용할지 말지에 대한 체크이다. 체크하지 않으면 Watchman을 통해 진행된다. 

 

- App스토에서 Xcode를 설치하고 설정 - Location 에 들어가서 Command Line Tools 중 가장 최근 버전의 것을 설정한다. 

 

 

 

 

 

 

 

- brew 업데이트 이후 brew를 통해 watchman을 설치한다. 

brew update
brew install watchman

 

 

 

- EAS client를 설치한다. 

npm install -g eas-cli

 

 

- Expo 계정을 만들고 로그인을 한다.  (회원가입 사이트 : https://expo.dev/signup)

 

위 사이트에 들어가 계정을 만든 뒤, 아래 명령어를 통해 로그인을 진행한다. 

eas login

 

 

- Configure을 진행한다. 

eas build:configure

 

 

- 아래는 Simulator로 진행을 했을 때 필요한 과정이다.

프로젝트를 만들었을 때 생긴 파일 중 eas.json 이라는 파일에 들어가 아래와 같이 'ios' 부분을 추가한다.

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    }
  }
}

 

 

- 개발자 빌드를 생성한다. 이 때 생각보다 시간이 오래 걸렸다. 

eas build --platform ios --profile development

 

 

 

- 완료가 되면 아래 명령어를 통해 실행한다. 

npx expo start

 

 

터미널에 아래와 같은 명령어들이 나온다. 나는 w를 눌러서 웹으로 확인하였다. 

 

 

- 아래와 같은 시작화면이 나오는 것을 확인할 수 있다.