[RN.개발일지] 1일차. 환경설정과 초기세팅

RN 환경 설정과 초기 세팅

기본설치

 

1. Homebrew 설치

Mac에서 필요한 패키지를 쉽게 설치하도록 도와주는 툴

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

2. Node.js와 npm 설치

리액트는 Node 기반. Node.js를 설치하면 npm 자동 설치. 이것을 통해 리액트네이티브 CLI설치 혹은 라이브러리 설치 가능.

brew install node

 

3. JDK 설치 (Android 개발을 위한 필수 설정)

안드로이드 프로젝트의 컴파일과 관련된 여러 작업에 사용

brew install --cask adoptopenjdk

 

4. React Native CLI 설치

프로젝트를 쉽게 생성하고 실행할 수 있도록 함

npm install -g react-native-cli

 

5. 리액트 네이티브 프로젝트 생성하기

프로젝트 생성하기

npx react-native init MyFirstApp

 

---

 

도구 설치 및 실행

 

6. Android Studio 설치 및 설정

• Android Studio 공식 사이트
• SDK Manager 설정: Android Studio 내에서 SDK Platform과 Emulator를 설정
• 환경 변수 설정: ~/.zshrc 파일에 Android SDK 경로를 추가해 CLI에서 사용할 수 있도록 함
• 터미널에서 환경변수 설정이 익숙치 않았음. 프로젝트의 android/ 폴더에 들어가서 zshrc를 실행해서 아래 코드를 복붙해주니 Android studio와 연결되었고 에뮬레이터가 실행이 됨. 

환경 변수 설정 상세

1. 프로젝트의 android 폴더에 local.properties 파일을 생성

cd [프로젝트명]/android
touch local.properties

 

2. local.properties 파일에 다음 내용 추가

sdk.dir=/Users/[사용자이름]/Library/Android/sdk

 

3. ~/.zshrc 파일에 다음 내용 추가

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

• 에뮬레이터 실행 성공
• VS코드에서 리액트 네이티브 실행
• 디바이스에서 아래와 같은 오류가 지속적으로 발생. 서버도 잘 돌아가고 있었고 무엇이 문제인지 한참 GPT와 고민을 하다가 Node modules를 재 설치 하니 실행이 잘됨. 

실행 실패 ㅠㅠ

실행 성공!!

 

7. Xcode 설치 및 iOS 설정

• Xcode 설치: App Store에서 Xcode를 다운로드 및 실행
• 현재는 Xcode로 컴파일하고 빌드만 한다고 생각하고 있는데 이외에도 디버깅, 성능보기, 코드 서명 및 배포 설정 등 더 많은 기능들이 있다고 한다. 추후 공부 필요.
• Command Line Tools 활성화: Xcode Preferences > Locations > Command Line Tools에서 Xcode를 선택
• CocoaPods 설치: iOS 프로젝트의 종속성 관리를 위해 CocoaPods를 설치

sudo gem install cocoapods

 

• Pod 설치: iOS 프로젝트가 정상 작동하도록 ios 폴더로 이동해서 종속성 설치 (처음 설치시 시간이 좀 걸림)

cd ios
pod install

---
M1/M2사용자의 경우
arch -x86_64 pod install

 

• 설치가 완료되면 .xcworkspace 파일이 생성됨
• 이후 iOS 개발 시에는 반드시 .xcworkspace 파일로 Xcode 실행
• .xcodeproj 파일이 아닌 .xcworkspace 파일을 사용해야 함

 

iOS 빌드 실행

npx react-native run-ios

 

실행 성공!!

4년전에 리액트로 todo list앱을 만들었는데
AI(gpt, perplexity)를 활용해 만들면 혼자 어디까지 만들수 있을지 궁금해서 테스트 삼아 시작! 
잼있긴 하다!