서버 개발자의 RN 세팅기 (1)

이정현·2023년 1월 8일
RNfrontend
0

React-native

목록 보기
1/1

첫번째 포스트를 RN 세팅기로 시작하게 되었습니다. 원래는 단순히 지인과 함께 토이프로젝트로 리액트 네이티브를 해보자였는데, 회사에서 충동적으로 개발 블로그 글쓰기 챌린지에 참여하게 되면서 반강제(?) 적으로 블로그 포스팅을 처음하게 되었네요🥲.
끝까지 잘 할 수 있을까..

주의 : 프론트엔드 개발엔 완전 무식한 개발자가 쓴 글입니다. 어쩌다가 보시게 된 클라이언트 개발자 분들은 따뜻한 마음으로 읽어주세요🙏

Dependencies setting

우선 익숙한 iOS 개발 환경 세팅부터 시작해보도록 하겠습니다.
iOS 환경 세팅에는 아래 리스트를 설치해주어야 합니다.

  • nodejs
  • watchman
  • Ruby version manager
  • Xcode
  • CocoaPods

Nodejs, watchman

nodejs는 여러번 접해봤지만 watchman은 처음 봐서 찾아봤더니,

Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.

라고합니다. 이게 왜 필요할까 했는데, 우리가 코드를 고쳤을 때 고친 코드를 바로 반영해서 앱에서 확인하기 위해서인 것 같습니다. 아직 클라이언트 사이드 개발은 모르는게 너무 많네요😢

Ruby version manager

여기서 뜬금없이 루비가 튀어나와서 좀 많이 당황스러웠습니다. 찾아보니, iOS 앱 개발에 사용되는 외부 라이브러리들의 의존성 관리는 cocoapods가 하는데, cocoapods가 루비로 작성되었기 때문에 루비가 필요한 것으로 보여집니다. (안드로이드로 따지면 gradle의 역할을 하는 셈)

curl -sSL https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 2.7.6

현재 react-native에서는 2.7.6 버전을 사용하고 있기에 2.7.6 버전을 설치해주었습니다.

Xcode

iOS 앱 빌드를 위해 꼭 필요한 툴입니다.

CocoaPods

Xcode 프로젝트에 사용되는 라이브러리들의 의존성을 관리하는 프로젝트 매니저입니다. Podfile이라고 불리는 단 하나의 텍스트 파일 내에 의존성들이 모두 정의되어 관리됩니다.
위에서 rvm이 필요한 이유가 이 cocoapod 때문이었습니다. 그래서 cocoapod도 gem으로 설치해줍니다.

sudo gem install cocoapods

Make project

드디어 필요한 모든 설치가 끝난 것 같습니다! 이제 샘플 프로젝트를 만들어볼까요.
그 이전에, react-native-cli 패키지가 전역적으로 설치된게 있다면 지워줘야 합니다.(이유는 잘 모르겠지만 공식 문서에서 의도하지 않은 오류가 있다고 하니 우선 따라줍시다..)

npm uninstall -g react-native-cli @react-native-community/cli

SampleProject라는 이름으로 프로젝트를 생성해봅시다.

npx react-native init SampleProject

Start Project

만든 프로젝트를 실행해봅시다!
먼저 metro를 실행해야 합니다. metro란 react-native를 위한 자바스크립트 번들러로 쉽게 react에서 웹팩이라고 생각하면 될 것 같습니다.

npx react-native start

마지막으로 ios 앱을 실행합니다.

npx react-native run-ios

드디어 첫번째 앱을 빌드하는데 성공했습니다!👏
생각보다 수월하게 되어서 다행이네요...

앞으로도 꾸준히 한번 공부해보도록 하겠습니다!
감사합니다.

진행 중 아래와 같은 오류를 경험했습니다.

✖ Installing Bundler
error Your Ruby version is 2.7.6, but your Gemfile specified 2.7.5

✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
    at createFromTemplate (/Users/jhlee/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:169:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.initialize [as func] (/Users/jhlee/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:222:3)
    at async Command.handleAction (/Users/jhlee/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/index.js:140:9)
info Run CLI with --verbose flag for more details.
_출처 : https://reactnative.dev/docs/environment-setup_

아무래도 공식 문서의 버전과 설치한 react-native 버전이 맞지 않아 ruby 버전을 잘못 설치한 것 같아 2.7.5로 설치 후 정상 동작을 확인했습니다.

profile
이정현
안녕하세요!

0개의 댓글