Archive

뒤로가기

React Native

React Native 시작하기(iOS)

2024년 8월 8일 18:06

프로젝트 생성부터 기본 설정까지~!

1. 프로젝트 생성하기

터미널에서 프로젝트를 생성하고자 하는 디렉토리로 들어갑니다.

터미널에서 아래의 명령어를 입력해줍니다.

npx react-native init BlogApp

설치 중간에 CocoaPods를 설치할 것이냐는 질문이 나오는데 iOS를 사용할 예정이라면 꼭 설치해줍니다.

2. 프로젝트 실행하기

프로젝트가 생성되었습니다. VSCode에서 프로젝트에 들어가주세요.

🟢 애뮬레이터에서 실행하기

터미널 창에 아래의 명령어를 입력해 실행해줍니다.

npx react-native run-ios

저는 특정 기기의 애뮬레이터를 사용할 예정이기 때문에 아래의 명령어를 입력해 실행합니다.

npx react-native run-ios --simulator="iPhone 15"

🟢 디바이스에서 실행하기

디바이스에서 실행하려면 몇 가지 설정을 거쳐야합니다.

먼저 애플 개발자 계정을 생성해주세요.

애플 개발자 계정 생성하기

XCode에서 프로젝트.xcworkspace 파일을 실행합니다.

프로젝트의 Signing & Capability 탭에서 Team 항목 옆에 Add Account... 를 눌러 개발자 계정을 추가합니다.

다음으로 Bundle Identifier 항목의 example을 unique한 값으로 변경해주세요.

설정이 완료되었다면 맥에 유선으로 디바이스를 연결한 후 프로젝트 터미널에서 아래의 명령어를 입력해주세요.

npx react-native run-ios --device="디바이스 명"

디바이스에서 설정 -> 일반 -> VPN 및 기기 관리 -> 신뢰할 수 있는 개발자 설정

위의 단계를 완료하면 앱이 성공적으로 실행됩니다.

3. 프로젝트 실행 중 만난 에러들

🔴 Could not connect to development server

React Native 개발 서버에 연결할 수 없다는 내용입니다.

프로젝트 터미널에 아래의 명령어를 입력해 개발 서버를 다시 실행시켜주세요.

npx react-native start

🔴 address already in use :::8081.

이미 8081 포트에 다른 개발 서버가 실행중이라는 것을 뜻합니다.

터미널에 아래의 명령어를 입력해 실행중인 프로세스를 중단시켜주세요.

lsof -i :8081
kill -9 [pid]

React Native 카테고리와 관련된 최신 글

React Native 카카오 로그인(iOS)

React Native 시작하기(iOS)

React Native HealthKit 데이터 불러오기

React Native Xcode 실행시 Hot Reload 방법