[taxpass 프로젝트] Expo로 개발 환경 세팅하기 (웹 + 모바일)

Expo는 React Native 기반의 개발 플랫폼으로, 별도 네이티브 설정 없이 앱 개발을 시작할 수 있습니다.
React Native와 함께 웹까지 지원하며, 모바일 앱과 웹앱을 동시에 개발할 수 있습니다.

자, 그러면 이제 프로젝트 개발에 필요한 환경을 한번 차근차근 구축해볼게요.

참고로, mac 환경 기준입니다.

Visual Studio 설치

brew install --cask visual-studio-code

 

Node.js 설치

brew install node

 

버전 확인

sohyeonjeon@Sohyeonui-MacBookPro Projects % node -v
v23.10.0
sohyeonjeon@Sohyeonui-MacBookPro Projects % npm -v
10.9.2
sohyeonjeon@Sohyeonui-MacBookPro Projects % npx -v
10.9.2

React Native + Expo 설치

npx create-expo-app taxpass-app
cd taxpass-app
git init

 

git repository 연결

git remote add origin https://github.com/sohyeon-jeon/taxpass-app.git
git add .
git commit -m "initial commit"
git branch -M main
git push -u origin main

git branch 생성

브랜치는 다음과 같은 방식으로 운영할 계획입니다.

 

• main ← 안정된 코드(배포용)
• dev ← 여러 기능 브랜치들이 합쳐지는 곳
• feature/something ← 여기서 실질적인 작업 진행

git checkout -b dev # 로컬 브랜치 생성 및 이동
git push -u origin dev   # 원격에 푸시
git branch -a # 로컬,원격 브랜치 확인

 

실행

npm start

위 명령어를 실행하면 QR 코드가 제공되며, Expo Go 앱에서 해당 QR 코드를 스캔하면 앱을 모바일에서 바로 테스트해볼 수 있습니다.
또한 웹 환경에서는 http://localhost:8081(또는 Expo 기본 포트)에 접속하여 브라우저에서도 앱을 확인할 수 있습니다.
결론적으로, Expo 하나로 Android, iOS, Web 모두에서 동시에 개발 및 테스트가 가능합니다.

모바일 환경

웹 환경

오늘은 여기까지! 이제 환경 세팅은 끝났습니다~