[RN/IOS] typescript 신규 프로젝트 생성하기! - 1 프로젝트 생성 및 IOS 빌드&실행하기

시작하기

크로스 플랫폼 앱의 단점중 하나인

버튼 위치 1px만 옮겨도 앱을 업데이트 해야하는 굉장히 불편한 부분을 보완하고자

Code push 라는 어마어마한 서비스가 나왔는데, 이를 적용하고 테스트해보려면 실제로 스토어에 업데이트 된 앱이 있어야 하므로

사이드 프로젝트 겸 code push 테스트를 위한 앱을 만들어보고자 한다.

 

새로 만들어보는 김에, 이전 Private Box는 윈도우 환경에서만 개발했기에 RN으로 만들었음에도 안드로이드만 배포했었는데, 이번엔 Android/IOS 둘다 배포해보고자 한다.

 

개발 프레임워크 : React Native v0.72.1

사용 언어 : Typescript v4.8.4

---

프로젝트 생성

RN 타입스크립트 프로젝트를 간단한 명령어로 생성할 수 있다.

프로젝트를 생성하고자 하는 경로에서 아래 명령어를 입력하여 프로젝트를 생성해보자.

npx react-native init 프로젝트명 --template react-native-template-typescript

 

혹 react native 의 버전을 특정 버전으로 지정하여 생성하고 싶다면

npx react-native init 프로젝트명 --template react-native-template-typescript --version 0.xx.x

위와 같이 뒤에 --version 0.XX.X 로 특정 버전을 지정해주자.

 

IOS 빌드 세팅

생성된 프로젝트를 IOS에서 빌드하려면 빌드 도구인 pod을 먼저 생성해주고, npm 라이브러리들과 호환시켜주기 위해 pod install 해주는 작업이 필요하다. 하지만 생성하자마자 cd ios && pod install 명령어를 사용하게 된다면 에러가 나게 되는데, 

초기 한번은 pod을 init 해주는 작업이 필요하다.

 

 프로젝트 경로/ios 폴더에서

pod repo update

명령어로 pod을 생성해주자. 혹 intel칩이 아닌 m1칩 이상의 환경에서 개발한다면

아래와 같은 메시지와 함께 에러가 날텐데,

### Command

```
/usr/local/bin/pod repo update
```

### Report

* What did you do?

* What did you expect to happen?

* What happened instead?


### Stack

```
   CocoaPods : 1.12.0
....................................................................

이럴 때는 당황하지 않고 

arch -x86_64 pod repo update

위와 같이 arch -x86_64 pod 명령어 형식으로 터미널에 입력해주면 해결된다.

IOS 앱을 개발하다보면 pod 명령어를 자주 사용하게 될텐데 arch -x86_64 정도는 외워두면 편하다.

 

정상적으로 pod이 init 되었다면

arch -x86_64 pod install

해주면 터미널에서 해주어야 할 초기작업은 끝난다.

 

앱 빌드&실행하기

앞서 말했듯 iOS 앱은 반드시 XCode 프로그램을 통해 빌드해야 한다.



Xcode 를 실행하면 초기에 위와 같은 화면이 나올텐데,

Open a project or file 을 선택한 후에

 

프로젝트 경로 > ios > 프로젝트명.xcworkspace 를 선택하여 open 해주자.

 

이후 실행을 위해서는 Signing 작업이 필요한데, 



 

1. 좌측 제일 위에 있는 프로젝트명 클릭

2. Signing&Capabilities 클릭

3. Signing 탭 - Team 드롭다운 클릭하여 선택

 

회사 프로젝트를 할 때에는 사내 팀을 선택하였으나 지금은 혼자 하는 사이드 프로젝트 이므로 변경해주었다 ㅎㅎ

 

Signing 까지 완료하고 좌측 위 플레이 버튼을 누르면 정상적으로 아래와 같이 앱이 실행될 것이다.

빌드 성공시 나오는 RN 앱 기본 화면. 언제 봐도 기분이 좋다 ㅎㅎ