React Native Web

native를 작성했던 코드가 web에서도 작성할 수 있는 부분은 react native web이 있었기에 가능한 것이다. 완벽하지 않지만 모바일로 빌드되는 컴포넌트들이 react가 사용하는 커포넌트 형태로 빌드되는 것이다. 즉, HTML과 같은 형태로 변환된다.

하지만 native web이 완벽하지 않기에 object로 생성한 스타일정의를 pops로 가져다 사용할 경우 스타일이 적용이 안되는 버그가 있다. 이러한 버그는 object를 거치지 않고 바로 props에 정의 하면 해결할 수있지만. 이 외에도 다양한 버그가 있기에 web에도 최적화된 패턴으로 개발을 진행해야한다.

<View style={styles.container}></View>
...
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.bg,
    paddingHorizontal: 20,
  },

<View style={{flex: 1 backgroundColor: theme.bg paddingHorizontal: 20}}></View>

추가로 todo를 삭제하할때에 web은 모바일에 동작하는 Alert가 존제하지 않는다. 그렇기에 앱이 구동하는 환경에 맞추어 모듈이 지원하지 않는 기능을 다른 모듈로 사용하여 조건적으로 동작하게 구현한다.

import { Platform } from "react-native";

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

코드를 보면 native의 Platform을 불러와 native가 감지한 환경에 따라 삭제동작을 다르게 하였다. web에서는 native confirm을 사용하여 모바일과 같은 alert메세지를 띄우고 삭제할 수 있다.

Expo Publish

보통 콘솔에서 expo start를 하면 개발자 창과 연결이 되고 손쉽게 expo홈페이지에 publish를 할 수 있었다. 하지만 2022년 7월 이후로 expo정책에 따라서 consolo으로만 publish할 수 있게 변경되었다. 아래 북마크로 가서 문서에 나온데로 진행하면 expo publish로 앱을 퍼블리싱할 수 있게 된다.

Getting started - Expo Documentation

이후 앱이 변경되고 expo에 적용할 때마다 아래와 같이 updae 커맨드로 퍼블리싱 업데이트를 진행하면된다.

<aside> 📝 Expo update

eas update --branch [branch] --message [message]

eas update --branch preview --message "Updating the app"

</aside>

Building for App Stores

이번엔 expo에 퍼블리싱 하는것 말고 실제로 서비스를 배포할 것이다. React native팀이 react-native-web를 발표하면서 expo도 그에 맞추어 native-web SDK를 발표하였다.

iOS와 Adroid에 app을 배포하기 위해서는 bundler가 필요로한데, expo-cli로 손쉽게 양쪽 모바일 앱을 build할 수가 있다. 아래 명령어를 입력만 하여도 expo로 publish했던 페이지의 대시보드에서 생성된 번들러를 확인할 수 있다.

<aside> 📝 Create mobile bundler

eas build -p [OS]

eas build -p android
eas build -p ios

</aside>