[RN] study 2week ④ expo - App 배포하기

[publishing our apps]

——————4.0 Introduction——————

오류 1. localhost:19002 접속 불가

강의에 로컬호스트 19002에 접속해서 publish하라고 하는데, 연결 오류가 뜬다. 이것저것 설정을 알아보다가…

localhost:19002가 expo 개발자 툴이었는데 지원이 끝났다고 한다. 

https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206

 

오류 2. ‘expo publish’ is not working.

터미널에서 expo publish 명령어를 입력하면 배포된다는 댓글이 있었는데, 

zsh: command not found: expo

라고 나온다. 

npx expo publish 라고 다시 입력했더니,

expo publish is not supported in the local CLI, please use eas update instead

라고 뜬다. 

 

expo에서 eas 를 사용하도록 업데이트된 것 같다. 

=> eas-cli를 설치해야 할 것 같다.

https://docs.expo.dev/eas-update/how-eas-update-works/

https://docs.expo.dev/eas-update/getting-started/

 

오류3. npm install --global eas-cli  => ERR!!!!!

permission denied 이길래, sudo 붙여서 설치하니 설치가 되었다. 

sudo npm install -g eas-cli

vscode에서——— npx expo install expo-updates

나타난 문구들 - 길어서 글 접기..

› Installing 1 SDK 47.0.0 compatible native module using Yarn

> yarn add expo-updates@~0.15.6

yarn add v1.22.18

warning ../../package.json: No license field

[1/4] 🔍  Resolving packages...

[2/4] 🚚  Fetching packages...

[3/4] 🔗  Linking dependencies...

[4/4] 🔨  Building fresh packages...

success Saved 0 new dependencies.

✨  Done in 3.35s.

 

이어서, 업뎃하고

% eas update:configure

An Expo user account is required to proceed.

 

Log in to EAS

✔ Email or username … YOUR NAME

✔ Password … YOUR PASSWORD

EAS project not configured.

✔ Would you like to automatically create an EAS project for @YOUR_ID/YOUR_APP? … yes

✔ Created 

 

블라블라하고,

 

All builds of your app going forward will be eligible to receive updates published with EAS Update.

 

EAS Build is not configured. If you'd like to use EAS Build with EAS Update, run eas build:configure, then re-run eas update:configure to configure eas.json with EAS Update.

 

🎉 Your app is configured with EAS Update!

 

Next steps:

 

Update a production build:

1. Create a new build. Example: eas build --profile production.

2. Make changes in your project.

3. Publish an update. Example: eas update --channel production.

4. Force close and reopen the app at least twice to view the update.

 

Preview an update:

1. Publish an update to a branch. Example: eas update --branch new-feature.

2. In Expo Go or a development build, navigate to Projects > [project name] > Branch > Open.

 

eas update —channel production

했는데, preview 오류 . sdk version 어찌고 오류, 

https://docs.expo.dev/eas-update/runtime-versions/

 

아래와 같이 변경 후 eas update 하니까 붐! 실행된다~

 

—————app.json—————

 "runtimeVersion": {

      "policy": "sdkVersion"

    }

---

[ToDo APP - web페이지]

expo web 뷰를 확인하고 싶은데, expo 개발자 페이지(http://localhost:19002/ => 접속불가!)는 더이상 지원하지 않고.. 방법을 찾다가

https://docs.expo.dev/workflow/web/

를 참고해서 설치하고 스타트를 해봤는데, 

yarn add expo

npx expo install react-dom react-native-web @expo/webpack-config

npx expo start --web

제대로 됐다면, https://localhost:19006 페이지에 app이 정상적으로 보여야 한다.

그러나, It's not working. 개발자 페이지처럼 연결 불가한 것인가 싶었는데, docs에 방법이 이렇게 나와있는데 안 되는 게 이상하다는 생각을 하며 검색검색.

어느 글에서 node를 다운그레이드하면 된다는 것을 확인하고, 18버전 node를 16버전으로 다운시키는데... 막힘없이 되진 않아서 따로 정리↓

 

https://writingcode.tistory.com/147

mac OS에서 node 이전 버전으로 다운그레이드

 

node를 16으로 다운시키니.. https://localhost:19006에 내가 만든 앱이 두둥!!!!! 등장했다. 

 

---

web에서 확인하니, 여러 문제가 바로 나타났다. 

 

1. 글 삭제(delete) 시, Alert.alert( ~ )는 웹에서 작동하지 않는다. => Platform API를 활용한다.

Platform.OS 에서 "web"일 때 ~~설정

const deleteToDo = (key) => {
    if (Platform.OS === "web") {
      const ok = confirm("Do you want to delete this To Do?");
      if (ok) {
        const newToDos = { ...toDos };
        delete newToDos[key];
        setToDos(newToDos);
        saveToDos(newToDos);
      }
    } else {
      Alert.alert("Delete To Do", "Are you sure?", [
        { text: "Cancel" },
        {
          text: "Delete",
          style: "destructive",
          onPress: () => {
            const newToDos = { ...toDos };
            delete newToDos[key];
            setToDos(newToDos);
            saveToDos(newToDos);
          },
        },
      ]);
    }
    return;
  };

 

2. 웹 버전에서는 글 수정을 누르고 수정하려고 하면 completed 클릭이 작동되어 수정불가(tap같은 거 쓰면 가능도 했지만) 상태였다. completed를 셀 어디를 눌러도 작동하도록 전체를 감싸고 있어서 그런 듯(근데 모바일 iOS 시뮬레이터에서는 문제가 없었다!).

아무튼, 

edit 부분을 TouchableWithoutFeedback 로 감싸니 해결되었다.