[RN] 앱을 만들어보자, React Native! - 시작하기 앞서 .00

안녕하세요! RyuWoong입니다.

제가 근 2년간 React Native를 다뤄왔는데요. React Native를 다루면서 익힌 여러가지 방법이나, 생각 등을 정리해보고자 합니다.

React 생태계를 많이 사용하지만, Web과는 다른 부분 때문에 어떻게 처리해야 좋을지 마땅한 자료가 없어 어려움을 겪고 계신 분들이 제 글을 읽으시고 많은 도움이 되셨으면 좋겠네요.

 

Why React Native?

먼저 React Native가 왜 핫한지 설명하자면, 기존에 AOS, iOS, (+ 웹, 데스크탑까지) 각각 다른 언어로 만들고 유지보수 한다는 것은 비용과 생산성 문제가 발생하게 됩니다.  이에 Meta(전 FaceBook)에서 React로 Native앱을 만들 수 있는 프레임워크인 React Native를 개발 했습니다. 참고로 React Native는 아직 정식버전이 나오지 않은 프레임워크로 큰 변경점이 생길 수 있고 혹은 Android나 Apple정책에 맞추기 위한 변경점이 발생할 수 있어 큰 변경점이 발생 했을 때 유지보수가 조금 어려운 점은 있습니다. 하지만 2개를 React로 개발할 수 있다는 것이 엄청난 메리트이기도 하지요.

 

환경설정.

이제 React Native(이하 RN) 설치 부터 시작하도록 하겠습니다.

RN는 크게 Expo와 React Native Cli로 개발 할 수 있는데, 무조건 실 개발은 React Native Cli로 하면 된다고 생각하시면 됩니다.

 

Web과는 다르게 RN은 환경설정이 참 중요합니다. 환경설정이 잘못되면 에러와 함께 그냥 실행이 안되기 때문입니다.

우선 실행 시키는 것이 반이라고 할 수 있겠네요! 가끔 실행은 되는데 Archive가 안되는 경우를 만나면..이런 젠장.

 

따라서 환경설정을 조심해서 만져야합니다. 웬만하면 Clean한 상태에서 시작하는 것이 좋습니다.

환경설정에서 꼬여서 제대로 동작하지 않는다면 RN을 실행 시키기 위해 필요한 도구들 (Node, Ruby, Cocoapods,...) 중에서 무엇이 문제인지 해결하다가 진이 다 빠지기 때문입니다.

 

그럼 아래 링크에 설명되어 있는대로 RN 환경설정을 해봅시다.

👉 https://reactnative.dev/docs/environment-setup

 

오류 해결.

Ruby Version

Mac 환경에서 RN 0.71버전에서는 2.7.6버전을 요구합니다. 따라서 아래와 같이 설치하여 설정하는 것을 추천합니다.

// brew로 rbenv 설치 이후 ruby 2.7.6 버전을 설치하고 버전을 설정합니다.
brew install rbenv
rbenv install 2.7.6
rbenv global 2.7.6

// 환경 변수로 적용합니다. 저는 zsh를 사용하기에 zshrc에 적용했습니다.
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc

//터미널을 껏다 켜거나 아래 명령어를 입력합니다.
source ~/.zshrc

warn Multiple Podfiles were found

Mac 환경에서 위와 같은 오류를 뱉는다면 아래를 점검해주세요.

1. xcode가 설치되어 있나요?

2. 만약 설치 되어 있다면 xcode -> Settings -> Locations 내에 Commad Line Tools 가 적용 되어 있나요? 여기서 적용 되었다의 의미는 아래 사진과 같이 경로가 정확하게 표시되어야 합니다. 아니라면 우측 선택자를 눌러 버전을 선택해주세요.

 

프로젝트 생성.

환경설정을 완료한 후 아래 명령어를 입력하면, 해당 폴더에 HelloApp 폴더가 생성되고 안에 React Native 프로젝트가 생성됩니다. 

npx react-native init HelloApp

 // 0.71 버전부터 React Native는 TypeScript를 Default로 사용합니다.

 

그 다음 프로젝트 생성이 완료되면, HelloApp폴더 경로로 진입하여, 아래 코드를 입력하여 RN프로젝트를 실행해봅시다.

// Window 환경인 경우 Android만 실행 할 수 있습니다.
npm run android

// Mac 환경인 경우 iOS로 개발하는 것을 추천합니다.
npm run ios

 

짜잔! 위 사진처럼 실행 된다면 무사히 RN프로젝트를 실행 하게 된 것입니다.

이제 RN을 한번 제대로 다뤄보도록 하겠습니다.