React Native 개발 환경 설정하기 🛠️

안녕하세요! 이번 글에서는 React Native 개발을 시작하기 위한 환경 설정 방법을 자세히 설명드리겠습니다. React Native는 크로스 플랫폼 앱 개발을 위한 강력한 도구이지만, 환경 설정 과정이 처음에는 다소 복잡할 수 있습니다. 이 가이드를 따라 차근차근 설정해보세요!

---

1. 개발 환경 설정을 시작하기 전에

React Native를 시작할 때 가장 어려웠던 부분이 환경 설정이었어요.
React Native는 Expo를 사용하면 쉽게 설치할 수 있지만, React Native CLI를 사용하면 네이티브 환경(Android Studio, Xcode 설정)이 필요합니다.

저는 처음에 Expo를 선택했는데, 이유는 설정이 간단하고 바로 실행할 수 있기 때문이었습니다. 네이티브 개발을 고려한다면 CLI 방식을 선택하는 것도 방법입니다.

---

2. Node.js 및 Expo 설치

📌 Node.js 설치하기

React Native를 사용하려면 Node.js와 npm이 필요합니다.

1. Node.js 공식 사이트에서 LTS(Long-Term Support) 버전을 다운로드합니다.
2. 설치 후, 터미널에서 다음 명령어를 실행하여 설치 확인합니다.

node -v 
npm -v

---

📌 Expo CLI 설치하기

Expo는 초보자에게 가장 추천하는 개발 환경입니다. 터미널에서 다음 명령어를 실행해 주세요.

npm install -g expo-cli

 

설치 후 버전 확인:

expo --version

---

3. React Native 프로젝트 생성 및 실행

✅ 프로젝트 생성

터미널에서 다음 명령어를 입력하세요.

expo init MyFirstApp 
cd MyFirstApp 
expo start

✅ 앱 실행 방법

1. 스마트폰에서 실행
   • Expo Go 앱(Android) 또는 Expo Go 앱(iOS)을 설치합니다.
   • 터미널에서 expo start를 실행한 후, QR 코드를 스캔하여 앱을 실행합니다.
2. 에뮬레이터에서 실행
   • Android Studio 또는 Xcode에서 가상 디바이스를 설정하면 실행할 수 있습니다.

---

4. 개발 환경 설정 시 주의할 점

React Native를 처음 설치할 때 발생할 수 있는 오류 몇 가지를 정리했습니다.

오류 메시지해결 방법

expo command not found	npm install -g expo-cli 다시 실행
Metro Bundler가 멈춰있음	터미널에서 Ctrl + C 후 expo start --clear 실행
앱이 흰 화면에서 멈춤	Expo Go 앱을 재설치하거나, expo start -c 실행

개발하면서 오류가 발생하면 공식 문서나 Stack Overflow를 참고하면 해결이 쉬워집니다.

---

5. 마무리 및 다음 단계

이제 React Native 개발 환경이 정상적으로 설정되었습니다! 🎉
✅ Node.js & Expo 설치
✅ 첫 번째 프로젝트 생성 및 실행
✅ 환경 설정 시 발생할 수 있는 오류 해결 방법 정리

📌 다음 글 미리 보기: React Native 기본 UI 구성하기
📌 앞으로 다룰 내용

• React Native CLI 환경 설정
• Firebase 연동 및 데이터 저장
• React Navigation을 활용한 화면 이동

React Native를 배우고 싶다면, 이 블로그를 통해 함께 성장해 보세요! 🚀
궁금한 점이 있다면 언제든 댓글로 남겨주세요. 😊