노마드 코더 RN 왕초보 개발기 RN 배우기! 과정기 6일 차

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)

GitHub - SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용

 

 

4.0강

• eas-cli 설치
  • 더이상 publish를 사용할 수 없음.

npm install -g eas-cli

• 빌드 해주기

eas build

• 본인 expo dev 가서 빌드 상황 확인하기
  • https://expo.dev/
  • 8분 25초 정도 걸림
• eas update 하기(publish)

eas update

• branch 설정
• 업데이트 메세지 설정

 

• expo dev에서 updates 메뉴 클릭
  • 프로젝트 확인 가능

 

• 업데이트 프로젝트 클릭 후 우측 상단에 Preview 클릭
  • 밑에 Advanced 있음.

 

• expo go로 QR 실행 성공

 

빌드 중 경고문 발생

 

 

• 실행

npx expo-doctor@latest

• 아래 처럼 출력됨

Need to install the following packages:
expo-doctor@1.6.1
Ok to proceed? (y) y
WARNING: We recommend using PowerShell or Bash via WSL 2 for development with Expo CLI on Windows. You may encounter issues using cmd.exe.

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✖ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

The following packages should be updated for best compatibility with the installed expo version:
  react-native@0.74.1 - expected version: 0.74.2
Your project may not work correctly until you install the expected versions of the packages.
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

One or more checks failed, indicating possible issues with the project.

 

• 조언대로 --check 설치

npx expo install --check

 

4.1강

• app.json에 앱정보, 아이콘 등이 포함된다.
  • https://docs.expo.dev/versions/latest/config/app/#properties 여기서 다양한 옵션들을 찾을 수 있음.
• 웹에서는 Alert 사용불가 아래처럼 추가

if (Platform.OS === "web") {
      const ok = confirm("정말 삭제 하시겠습니까?");

      if (ok) {
        const newTodo = { ...toDos };
        delete newTodo[key];
        setTodos(newTodo);
        saveTodos(newTodo);
      }

      return;
    }

• Platform.OS로 OS 확인 가능

4.2강

• 안드로이드 빌드하기 (시간 좀 걸림)

eas build -p android

• ios, web은 생략
  • ios 폰이 없어 아이디가 없음.
  • web 많이 바뀜.

빌드 오류 발생!

• expo 진단하기

npx expo-doctor@latest

• 원인 발견 : gpt로 만든 아이콘의 확장자가 .webp의 문제
  • 해결 방법 : https://www.online-convert.com/ 사이트로 들어가 png로 수정

4.3강

1. dev 사이트로 가서 빌드 된 거 다운하기
2. 기본이 .aab임
3. GPT에게 물어보니 eas.json에 아래처럼 추가 (.apk로 수정)

{
  "build": {
    "production": {
      "android": {
        "buildType": "apk"
      }
    }
  }
}

 

eas build -p android --profile production

 

이렇게 해결 가능하다고 알려줌

• expo의 단점
  1. infrastructure에 접근할 수 없다.
  2. expo에 내장되어 있는 불필요한 라이브러리들을 지울 수 없어 용량이 커질 수 밖에 없다.
  3. expo 설정 자체에 한계가 있다.
• eject scripts로 expo에서 꺼내주는 것도 있다.
  • 추천하진 않음
  • 대신 create react native app을 사용한다.