[React Native] 01. 리액트 네이티브 개발 환경 갖추기

※ 코코아팟(Cocoapods) 설치 과정에서 오류 발생 시

• ruby 버전 확인 후 버전 업그레이드하기

---

1-4 비주얼 스튜디오 코드 환경 설정

 

✅ prettier 확장 기능 설치

prettier : 린트 프로그램 중 하나 (린트 : 똑같은 패턴의 코드를 작성하기 위해 사용)

 

✅ 디렉터리에 .prettierrc.js 파일 생성 ⬅️ prettier 가 소스 코드를 포맷할 때 참조하는 파일

 

.prettierrc.js 파일에 아래와 같은 코드 추가

module.exports = {
    singleQuote: true,
    semi: false 
}

singleQuote: true ➡️ 큰 따옴표로 감싼 모든 문자열을 작은따옴표로 바꾸라는 설정

semi: false ➡️ 문장에서 세미콜론을 모두 제거하라는 설정

 

※ 특정 줄에서 prettier 가 동작하지 않도록 할 때에는 원하는 코드 윗 줄에 //prettier-ignore 작성

 

※ prettier 가 동작하지 않을 때

Format Document 명령 실행하고 prettier 를 코드 포매터로 지정함 -> VSCode는 여러 개의 포매터(린터)를 탑재하기 때문에 충돌할 수 있기 때문)

 

---

1-5 첫 번째 모바일 앱 만들기

안드로이드 앱 만들기 

 

AVD : Android Virtual Device ➡️ '에뮬레이터'라고 부름

✅ 안드로이드 앱을 실행할 때는 항상 에뮬레이터가 부팅이 완료된 상태에서!

 

 

※ 앱 빌드 시 클래스가 중복된다는 오류가 발생할 때

Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.internal.jdk7.JDK7PlatformImplementations found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)
Duplicate class kotlin.internal.jdk7.JDK7PlatformImplementations$ReflectSdkVersion found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)
Duplicate class kotlin.internal.jdk8.JDK8PlatformImplementations found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.internal.jdk8.JDK8PlatformImplementations$ReflectSdkVersion found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.io.path.ExperimentalPathApi found in modules kotlin-stdlib-1.8.10 (org.jetbrains.kotlin:kotlin-stdlib:1.8.10) and kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)

 

 여기서 문제가 발생해서 해결하느라 시간을 엄청 썼는데.. 아직도 원인은 잘 모르겠지만

build.gradle.kts 혹은 build.gradle 파일에서 defendency {} 내에 아래의 코드를 작성해주면 말끔히 해결된다!

 // Fix Duplicate class
 implementation(platform("org.jetbrains.kotlin:kotlin-bom:1.8.0"))

출처 : https://gist.github.com/danielcshn/7aa57155d766d46c043fde015f054d40 

Fix Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules kotlin-stdlib-* Android Studio | 2022.2.1

 

※ 에뮬레이터의 저장공간이 부족해서 앱을 설치할 수 없을 때

➡️ AVD Manager 에서 Wipe Data를 클릭해서 에뮬레이터를 초기화 한다. 

 

 

npx react-native init : 리액트 네이티브 프로젝트 생성

npx react-navtive init 프로젝트_이름 --template react-template-typescript : 타입스크립트를 사용하는 프로젝트 생성