React Native 설치 및 설정하기

🚨 해당 내용은 맥북 m1 환경에서 진행이 됩니다.

📌 목차

• react native 설치
• react native 초기 파일 설정하기
• 디버거 설치하기 및 디버깅 환경 설정하기

📌 react native 설치

먼저 두가지 기본 파일을 설치해줍니다.

brew install node
brew install watchman

📌 react native 초기 파일 설정하기

AwsomProject 명칭으로 react-native 템플릿 코드를 만들어 봅니다.

npx react-native init AwesomeProject // javascript
npx react-native init AwesomeProject --template react-native-template-typescript // typescript

먼저 모듈을 실행 시켜줍니다.

yarn start

그런 뒤에 어떤 시뮬레이터로 돌릴지 결정 합니다.

yarn ios // or yarn android

📌 디버거 설치하기 및 디버깅 환경 설정하기

react-devtools를 설치해주고

yarn add react-devtools -D // 전역으로 설치해도 좋아요.

pacakge.json에 넣어줍니다.

// package.json
"scripts": {
  "devtool": "react-devtools"
}

그리고 이아일 포함시켜줘요.

// index.js
if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true);
}

이 아이가 포함이 된다면 http://localhost:8081/debugger-ui/ 여기서 이제 console을 볼 수 있습니다.