[react-native] Hello, react-native!

 react를 한창 공부를 하던 때에 같이 했으면 참 좋았을 걸... 그때 괜히 Flutter가 더 좋대!라는 소리를 어디서 봐서 겉멋 부린다고 재낀걸 아주 후회하고 있다...

 

물론 flutter가 안좋다는 게 아니라, 회사 프로젝트 하나가 모바일을 react-native로 가는 바람에... flutter를 현재 딱히 쓸 곳이 없어졌다.

 

이제 새해도 왔고, 진짜 본격적으로 나만의 서비스를 하나 가지고 싶어서 리액트 숙련도가 많이 올라온 지금! 리액트 네이티브를 공부하려고 한다.

---

Hello! react-native! 

 

길벗 출판사의 react-native를 다루는 기술을 참고하여 차근차근 하나씩 해보려고 한다.

 

우선, 첫 프로젝트를 만들어보자!

 

새 프로젝트 생성 명령어

npx react-native init LearnReactNative --version 0.70

 

우선 책에서는 타입스크립트는 아직 사용하지 않는 거 같다. 따라서 타입스크립트를 자동으로 생성하지 않는 0.7 버전을 사용한다.

 

위 명령어를 사용하여 LearnReactNative 프로젝트를 원하는 디렉터리에 생성하고, 인텔리제이(안드로이드)를 켜서 만들어진 LearnReactNative 내에 있는 Android 폴더를 불러와준다.

 

그럼 react-native 버전에 맞는 gradle이 셋팅되는데, 이때 반드시 build.gradle 내부에 있는

 dependencies {
        classpath("com.android.tools.build:gradle:7.2.2")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

 

gradle 버전을 확인해줘야 한다. 

 

gradle 버전을 확인하고 jdk 버전을 맞춰줘야 한다.

 

나는 gralde을 7.2.2 로 맞춰놓고 jdk를 21로 세팅해 놔서 아래 오류가 떴는데 원인을 찾는데 정말 오래 걸렸다.

 

(멍청한 놈...)

error: cannot find symbol reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);

 

아무튼, 이후에 android sdk도 설치해주고 yarn android를 터미널에 입력하여 어플을 실행할 수 있다.

 

yarn android를 실행하기 위해서는 반드시 이전에 Powershell을 관리자 모드로 열고, 아래 명령어를 입력하여 권한을 허용해줘야 한다.

Set-ExecutionPolicy Unrestricted

---

Welcome!

 

안녕! 

 

아주 순조로운 출발이다.