패키지 설치는 yarn 을 사용 하였습니다. 확인해보고 이미 설치 되어있는 부분은 스킵!

1.homebrew 설치

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

설치를 완료 하고

brew --version

을 입력하여 버전을 확인한다.

설치 참고 https://brew.sh/

2.node 설치

brew install node

설치가 완료 되면

node --version and npm --version

을 입력하여 설치 확인.

3.watchman 설치

brew install watchman

설치 완료 후

watchman -version

을 입력하여 설치 확인.

4. react-native-cli 설치

npm install -g react-native-cli

설치 완료 후

 react-native --version

을 입력하여 설치 확인.

5. Xcode 설치

앱스토어에서 xcode 검색후 다운로드.

실행 후 " 커맨드+, "로 설정 탭 진입 후 commend line tools를 아래와 같이 선택한다.

6. cocoapods 설치

sudo gem install cocoapods

설치 완료 후

pod --version

을 입력하여 설치 확인.

7. Java Development Kit (JDK)설치

brew tap AdoptOpenJDK/openjdk

brew install --cask adoptopenjdk

를 차례대로 실행하여 설치 완료 후

java -version

을 입력하여 설치 확인.

자바 개발 킷을 설치하면 자바 이외에도 자바를 컴파일 하기 위한 자바 컴파일러가 함께 설치된다.

자바컴파일러가 잘 설치되었는지 확인하기 위해 다음 명령어를 실행한다.

javac -version

8. android studio 설치

https://developer.android.com/studio?hl=ko

위의 링크로 들어가서 안드로이드 스튜디오를 다운로드 받는다.

다운로드가 완료되면 실행한 후 설치한다.

이후 다음과 같이 안드로이드 스튜디오의 환경변수를 설정한다. @

vi ~/.zshrc

위의 명령어를 사용해 .zshrc파일로 들어가서

export ANDROID_HOME=안드로이드 SDK 위치/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

를 추가해준다.

(복사해서 안된다면 직접 입력해보자!)

안드로이드 SDK 위치는 sdk manager를 실행하면 확인 할 수 있다.(아래 이미지 참고)

안드로이드 스튜디오 실행 > 우측하단 Configure 클릭 > SDK Manager 실행

자신의 안드로이드 위치는 보통 /Users/{USER_NAME}/Library/Android/sdk 이다.

프로젝트 세팅

(typescript, styled-components, babel-plugin-root-import)

1.Init

react-native-cli 설치

npx react-native init <프로젝트명>

버전 고정시키기

npm config set save-exact=true

2. typescript , styled components, babel-plugin-root-import를 추가로 설치.

프로젝트로 진입하여

yarn add styled-components

yarn add --dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import

3. tsconfig.json

tsconfig.json 파일을 최상위에 생성하고

{
    "compilerOptions":{
        "allowJs":true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "isolatedModules":true,
        "jsx":"react",
        "lib":["es6"],
        "moduleResolution":"node",
        "noEmit": true,
        "target":"esnext",
        "baseUrl":"./src",
        "paths":{
            "src/*":["*"]
        }
    },
    "exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js"]
}

을 작성한다.

4. babel.config.js

절대경로 추가를 위해 babel.config.js 파일에 아래의 내용을 추가한다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: 'src',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

ex) 절대경로 사용 예시

이제 절대 경로로 사용이 가능하다

혹시 에러가 나거나 절대경로가 잡히지 않는경우 프로젝트 내부 ios 디렉토리로 이동하여

pod install

을 실행하고

yarn start --reset-cache
and 
yarn ios or yarn android

로 캐시를 삭제하고 다시 실행 해보자.

(config 가 변경되면 캐시를 삭제하고 pod install을 다시 해주는게 좋다.)

5. react-navigaion 설치

yarn add @react-navigation/native

필요한 navigation을 추가로 설치한다.

#Stack Navigation
#Drawer Navigation
#Bottom Tab Navigation
#Material Bottom Tab Navigation
#Material Top Tab Navigatioin

git clone 후

yarn install 
and
cd ios
and
pod install

실행

yarn start 
and
yarn ios or yarn android

안드로이드 실행에 에러가 나는 경우 (build failed)

안드로이드 스튜디오 실행 후

Open an Existing Project 클릭후

프로젝트 폴더 내부 의 android 폴더를 연다.

상단 아이콘중 디바이스 옆의 플레이 버튼을 클릭하면 에뮬레이터가 실행되면서 에뮬레이터가 작동한다.

(안드로이드 폴더 내부에 local.properties 파일이 없는 경우 생성 된다고 한다. 나의 경우에는 있었다.)

해당 버튼을 클릭하면 프로젝트 구성이 로컬 상태 및 './gradlew clean'와 동기화 되고.

기존 빌드 파일을 정리한다.

완료되면 프로젝트의 안드로이드 폴더로 들어가서

./gradlew clean

을 실행하고 다시 프로젝트 루트로 와서

yarn start --reset-cache
and
yarn android 

로 실행한다.