(Window) React Native(Ts) CLI 환경설정

전 회사 개발자 분과 이야기를 하다 괜찮은 프로젝트가 떠올라 새로운 프로젝트를 시작하게 되었고 가장 먼저 앱으로 출시한 뒤 웹으로도 개발을 하자는 이야기가 나오게 되었습니다.

현재 인원은 디자이너, 기획자, 백엔드 개발자, 프론트 개발자로 구성이 되어 있으며, 프로젝트를 구현 하면서 필요하다면 그때마다 사람을 모집할 계획입니다. 

 

주요 서비스와 프로젝트의 기능 부가서비스 및 비즈니스 모델은 어느 정도 준비가 되어있는 상태이며, 완성이 되어가는 과정들과 결과들에 관한 내용들을 작성할 예정입니다!

 

Expo CLI가 아닌 React Native CLI를 선택한 이유

각각의 장단점이 있지만 가장 큰 이유는 Native CLI Expo보다 자유도가 높으며, 모듈을 직접 제작할 수 있기 때문에 단순 프로젝트가 아닌 실제 출시까지 하려는 앱이기 때문에 확장성을 위해 Native CLI를 선택하였습니다.

 

Expo CLI

 

장점

1. 개발 환경을 구축하기가 쉽고 용이하다.
2. 파일들을 자동으로 관리 해준다.
3. 실제 개발 난이도가 RN CLI보다 쉽고 편리하다.

단점

1. 실제 Simulator 및 실제 단말기에서는 작동이 잘 되지 않을 수 있다.
2. Expo에서 제공하는 기능만 사용 가능하다.
3. 모듈을 만들어서 사용할 수 없으며, Native 기능에 접근이 불가능하다.

React Native CLI

장점

1. Expo로는 접근하지 못하는 Native 기능에 접근이 가능하다. (Native module 사용 자유도도 높다.)
2. 원하는 언어로 추가 작성이 가능하다.
3. 필요한 기능이 있을 경우 모듈을 직접 제작 가능하다.
4. OS Layer와 직접적인 상호 작용이 가능하다.

단점

1. 초기 개발환경 구축 및 실제 앱 개발시 다소 시간이 소요된다.

 

React Native CLI 환경설정

버전 : Native CLI 0.72 , Node 16.17.0 (16버전 이상 必), JDK 17.0.4.1 (11버전 이상 必), Android Studio 22, SDK 33 (Android 13.0 - Tiramisu 必)

필수라고 되어있는 부분은 모두 공식문서에서 권유하는 버전입니다.

 

설치하기

1. node 

https://nodejs.org/ko

LTS 버전으로 선택해주세요

https://offbyone.tistory.com/441

상단의 블로그를 보며 설치를 진행해 주시면 됩니다.

 

2. 안드로이드 스튜디오 

https://developer.android.com/studio

Download Android Studio Flamingo 클릭 후 하단의 링크에 나오는 영상에 맞춰 선택사항을 조정하시면 됩니다.

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

 

Android 환경변수 설정

- 시스템 환경변수 편집 클릭 -> 환경변수 클릭

 

- 사용자 변수 새로만들기 클릭

- 사용자 변수 편집 후 확인 클릭 (안드로이드 스튜디오 다운로드 하실때 설정을 건들지 않으셨으면 저랑 똑같이 작성 하시면 됩니다)

- 시스템 변수에 Path 찾아서 클릭

- 새로만들기 클릭 후 -> 아래의 내용 작성

C:\Users\user\AppData\Local\Android\Sdk\platform-tools

 

Android SDK 설정

- 안드로이드 스튜디오 실행 -> 맨 왼쪽 상단에 File 클릭 -> Settings 클릭

- SDK Platforms 사진처럼 설정

- SDK Tools

3. JDK

https://penguingoon.tistory.com/280

 

4. React Native

- 본인이 사용하는 IDE 실행 후 터미널에 npx react-native@latest init AwesomeProject 입력

- React Native 추가 되었으면 안드로이드 스튜디오 실행 후 File -> Open 클릭

- React Native 파일을 찾은 뒤 android 선택 후 OK버튼 클릭

- 안드로이드 스튜디오 오른쪽 상단에 Device Manager 클릭 후 API 33 안드로이드 기기 실행 

- 디바이스 전원버튼 클릭 전원이 실행되면 다시 본인이 사용하는 IDE를 열어주세요

- npm start

- a 선택 혹은 npm run andriod 

- 설정 완료

타입스크립트 설정

- 터미널에 npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 실행

 

- 설치 후 tsconfig.json 설정을 하단처럼 변경해주세요

// prettier-ignore

{

  "extends": "@tsconfig/react-native/tsconfig.json",

    "compilerOptions": {

    "baseUrl": ".",

      "paths": {

      "*": ["src/*"],

      "tests": ["tests/*"],

      "@components/*": ["src/components/*"],

    },

  }

}

- babel.config.js 설정

module.exports = {

  presets: ['module:metro-react-native-babel-preset'],

   plugins: [

    [

        'module-resolver',

        {

          root: ['./src'],

          extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],

          alias: {

            tests: ['./tests/'],

            "@components": "./src/components",

          }

        }

     ]

   ]

}

주의: index.js 파일은 절대 ts로 변경 하시면 안됩니다.

모든 환경설정과 TS 설정이 완료 되었습니다.

아래는 간단하게 제가 설정한 폴더 구조입니다.

 

마지막으로 React Native에 대한 고민을 가지고 계신 분들이 보면 좋을 거 같아 아래 링크 추천드립니다.

https://velog.io/@fejigu/React-Native%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0

 

출처: https://reactnative.dev/docs/environment-setup