웹앱을 공부 중입니다. React Native + Next.js를 통해서 구축하는 법을 공부해 보려고 해요. 포에이 활동이 끝나고 새로운 프로젝트를 찾던 중 RN 웹앱을 통해 서비스하는 팀을 찾았는데요,

아무래도 프로젝트 경험이 적은 것과 웹뷰 환경 구축 경험이 부족한 것 같아서 함께하지 못했는데, 때 마침 강의가 있어서 공부를 하기로 해보았습니다. RN을 열심히 파보려고 해요. 그리고 나서 SwiftUI 를 조금 공부해서 네이티브 코드와 연결해서 위젯까지 구현해보는 프로젝트를 하는게 목표입니다.

그리고 신입 프론트엔드 개발자 보다 앱 개발자를 뽑는 수요가 더 적어 보여서 다방면으로 웹뷰를 공부해보기로 한 것도 있습니다. Next는 오랜만인데요. 어떻게든 해보아야겠죠.

오늘 공부한 것은 크게 없구요. 간단하게 웹뷰 구축하는 방법과 네트워크 상황에 따라 다른 뷰 보여주기 정도가 될 것 같네요.

웹뷰

우선 웹뷰로 보여주는 방법은 간단하더라구요.

npx expo install react-native-webview

를 통해 설치해줍니다. 저번에 캡스톤 디자인에서 부 키우기를 할 때 느꼈던 것이, xcode 업데이트하면서 강제로 RN SDK 버전도 올려야 했는데 그때 의존성 문제가 터져서 골머리를 많이 앓았거든요.

실수로라도 npm으로 설치하지 말고 npx expo install 을 통해서 SDK 버전에 맞게 라이브러리 설치할 수 있도록 조심해야겠어요.

import WebView from "react-native-webview";

<WebView
    source={{
      uri: "보여주고 싶은 사이트",
    }}
/>

웹뷰로 보여주는 방법은 간단하더라구요. source 내부에 uri만 잘 적어주면 됩니다. Next로 프로젝트 사이트를 만들고 나서 실행시키고 expo 랑 연결시켜주면 끝이었어요.

http://localhost:3000/folder/file

주의할 점은 로컬로 돌리는 사이트에 연결할 때 localhost 로 하면 안되고 npx expo start 쳤을 때 아래에 뜨는 ip주소 를 쳐줘야 돌아갑니다.

뭐, 테스트 개발 아닐 때는 주소가 있을테니 그걸 사용하면 될테지만요.

네트워크 확인

npx expo install @react-native-community/netinfo

를 이용해 설치하고 나면 Netinfo 라는 변수를 사용가능하구요.

import NetInfo from "@react-native-community/netinfo";


NetInfo.addEventListener((인터넷정보) => {
    인터넷정보.isConnected
});

NetInfo에 이벤트리스너를 부착해주고 나면 내부 파라미터로 인터넷 값이 들어갑니다. isConnected로 네트워크 연결 유무를 확인 할 수 있어요. 인터넷 미연결일 때는 false값이 아니라 null 이 들어가니까 처리를 잘 해줘야 합니다.

const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    NetInfo.addEventListener((internet) => {
      setIsConnected(internet.isConnected ?? false);
      //   setIsConnected(false);
    });
  }, []);

  if (!isConnected)
    return (
      <SafeAreaView>
        <Text>인터넷 연결을 확인해주세요!</Text>
      </SafeAreaView>
    );

useEffect 사용해서 미리 확인해주는 형식으로 사용하면 됩니다. 간단하죠? 유용하게 사용해먹으면 될 것 같아요.

항상 새로운 걸 배우는 것은 즐거운 것 같으면서도 두렵기도 합니다. 아무튼 정진하는 수밖에요.

믿을 건 나밖에 없습니다.