React Native란?
리액트 네이티브(React Native)는 자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술입니다. 리액트 네이티브를 사용해 만든 앱은 iOS환경, Android환경에서 모두 구동할 수 있습니다.
작업 환경 준비하기
💡 본 개발환경 설정 글은 MacOS 환경을 바탕으로 작성하였습니다!1. Node.js와 npm 설치하기
Node.js는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는
Chrome V8 JavaScript 엔진으로 빌드된 런타임입니다.1.1 MacOS에서 설치하기
https://github.com/nvm-sh/nvm
위 링크로 들어가서 Installing and Updating 부분을 보면
$ curl -o- https://raw.githubsercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash다음과 같은 스크릅트가 있습니다.
이 명령어를 입력하고 나서 터미널을 재실행해주세요.
$ nvm install --lts위 명령어를 입력하여 Node.js LTS 버전을 설치할 수 있습니다.
$ node -v
v.16.14.2 (실행 결과)
$ npm -v
8.5.0 (실행 결과)위 두 명령어를 실행해 노드와 노드를 설치할 때 함께 설치된 npm의 버전을 확인해볼 수 있습니다.
1.2 yarn
yarn은 npm과 같은 패키지 관리 도구입니다.
npm과 역할은 동일하지만, 선응이 개선되어 npm보다 패키지를 더 빨리 설치합니다.
$ npm install --global yarn위 명령어를 터미널에 입력하여 yarn을 설치할 수 있습니다.
1.3 Java Development Kit
JDK(Java Development Kit)은 안드로이드 앱 개발을 위해 필요한 도구입니다.
homebrew가 설치되어 있지 않다면 Homebrew를 설치해야합니다.
homebrew 설치 과정은 추후에 따로 작성할 예정입니다.
Homebrew 설치과정
1.4 안드로이드 스튜디오 설치 및 환경변수 설정
https://developer.android.com/studio/index.html
위 링크에서 안드로이드 스튜디오를 설치합니다.
MacOS에서는 $HOME/.zprofile 또는 $HOME/.zshrc 파일을 수정해 환경 변수를 설정합니다. 파일을 열어 최하단에 다음 코드를 삽입합니다.
$ vim $HOME/.zprofile터미널 환경에서 파일을 수정할 때는 vim이라는 명령어를 사용하면 됩니다.
export ANDROID_HOME=$ HOME/Library/Android/sdk
export PATH=$ PATH:$ ANDROID_HOME/emulator
export PATH=$ PATH:$ ANDROID_HOME/tools
export PATH=$ PATH:$ ANDROID_HOME/tools/bin
export PATH=$ PATH:$ ANDROID_HOME/platform-tools
vim사용이 어렵다면nano를 사용하면 수월하게 편집할 수 있습니다.
1.5 VS Code 설치하기
React Native 프로젝트를 편집할 Visual Studio Code를 설치합니다.
1.6 Xcode와 CocoaPods 설치하기
Xcode와 CocoaPods는 iOS 프로젝트를 만들기 위해 설치하는 도구입니다.
Xcode는 앱 스토어에서 설치하거나 https://bit.ly/install-xcode에서 설치할 수 있습니다.
CocoaPods는 터미널에서 아래 명령어를 입력해 설치할 수 있습니다.
$ sudo gem install cocoapodsReact Native를 공부하면서 그냥 실습하고 잊지 않고 기억하기 위해 정리하면서 개발하기 위해 작성한 글 입니다. 😀
역시 개발 환경 설정하는 일이 가장 오래 걸리고 번거로운 작업인 것 같습니다.
개발 환경을 설정하며 겪었던 문제들은 추후에 따로 정리할 예정입니다!
