[React Native] 프로젝트 생성 및 초기 세팅 (Typescript)

1. 개발환경 준비

1-1. Node.js, npm 설치

-Node.js: 공식 홈페이지에서 최신 LTS 버전을 설치합니다. (v22.13.1)

 node -v

-npm: Node.js 설치 시 기본 제공됩니다.

 

1-2. React Native CLI 설치

npm install react-native-cli

2. React Native 프로젝트 생성

2-1. 프로젝트 생성 명령어 실행

npx @react-native-community/cli init 자신이 원하는 프로젝트 이름

 

2-2. 생성된 디렉토리 구조 개요

 

3. TypeScript 및 타입 관련 패키지 설치

3-1. TypeScript 컴파일러와 React, React Native에 대한 타입 정의 파일 설치

npm install --save-dev typescript @types/react @types/react-native

 

3-2. 프로젝트 루트에 tsconfig.json가 없다면 생성, 있다면 수정하기

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

 

4. 프로젝트 실행 확인 (iOS/Android)

4-1. iOS (Mac 필요)

npx pod-install
npm run ios

4-2. Android

npm run android

 

5. Xcode에서 React Native 프로젝트 열어서 iPhone에서 실행하기

5-1. iOS 폴더로 이동 후 Pod 설치

cd ios
pod install
cd ..

 

5-2. Xcode에서 프로젝트 열기

open ios/자신의프로젝트이름.xcworkspace

 

5-3. iPhone에서 실행하기

(1) 실제 iPhone을 Mac에 연결

• USB 케이블을 사용해서 iPhone을 Mac에 연결
• iPhone에서 "이 Mac을 신뢰하시겠습니까?" 메시지가 뜨면 신뢰를 선택

(2) Xcode에서 실행할 기기 선택

• Xcode 상단의 Devices 목록에서 연결된 iPhone을 선택

(3) 개발자 계정 설정

• Xcode → Preferences → Accounts 에서 Apple ID 로그인
• 프로젝트 좌측 Targets → MyApp → Signing & Capabilities 로 이동
• Automatically manage signing을 체크하고, Team에 본인 Apple ID 선택

(4) 실행 (Build & Run)

• 왼쪽 상단 ▶️ Run 버튼을 눌러 실행
• 빌드가 완료되면 iPhone에서 앱이 실행

 

[ios 빌드 시, 키 체인 입력하라고 하면]

https://choi-hee-yeon.tistory.com/228

[React Native] ios 빌드시 키 체인 입력하라는 창 뜰 때