📂 delivery-app

Expo 빌드, 배포 테스트

• apk 빌드 완료

📂 test

RTSP 영상 스트리밍 테스트

• react-native-vlc-media-player

📂 video-test

Expo 영상 출력

• expo-av

  • Video Document

  • m3u8 확장자 활용

    • ios 환경에서는 재생 불가 (react-native-livestream 활용)

실시간 영상 S3 버킷을 통해 받기

• 테스트용 S3 버킷에 rtf 텍스트 확장자로 라이브 방송 URL을 입력

• 해당 라이브 방송 URL 토큰 만료 시, 버킷의 rtf 파일 수정을 통해 apk 환경에서도 실시간 영상 에러 해결 가능

• 기본적으로 Axios 데이터 통신의 경우, 안드로이드 자체의 앱 캐시 데이터에 fetch된 데이터를 저장함

  • 해당 데이터가 캐시에 저장될 경우, refetching이 일어나지 않기 때문에,

      useFocusEffect(
        useCallback(() => {
          axios({
            method: "get",
            url: "https://aws-bucket-url.com/VideoLink.rtf",
            headers: {
              "Cache-Control": "no-cache",
              Pragma: "no-cache",
              Expires: "0",
            },
          })
            .then((res) => {
              const exp = "kerning0\n";
              var condition = res.data.indexOf(exp);
    
              const https = res.data.substring(condition + exp.length);
    
              setVideoUrl(https.slice(0, -1));
            })
            .catch((err) => console.log(err));
        }, [videoUrl])
      );

    • 데이터 통신 시, 캐시를 저장하지 않도록 캐시 컨트롤이 필요

스크린샷 테스트

• react-native-view-shot

  • captureRef Document

가로 모드로 고정

• expo-screen-orientation

  • orientationlock Document

  • Video onFullscreenUpdate Document

푸쉬 알림 테스트

• expo-notifications (알림 기능)

  • 특정 트리거 발동 시 알림 출력 가능

    • 물리적인 디바이스 환경에서만 알림을 위한 토큰이 생성되므로 에뮬레이터 환경에서는 테스트 불가

  • 알림 아이콘 변경은 빌드를 통해 테스트가 가능할 것으로 보임

    • 테스트 결과, app.json 설정 후 빌드를 통해 아이콘 변경됨이 확인

  • expo-notifications 알림 테스트 사이트

FCM 설정

1. Firebase 프로젝트 생성

2. 프로젝트에 안드로이드 앱 추가

   

3. 해당 프로젝트의 안드로이드 패키지 이름과 동일하게 입력 및 앱 등록

   

4. 해당 google-services.json 파일을 다운로드 후, 안내에 따라 설정

   

5. Firebase SDK 추가는 다음으로 넘어가기

6. 앱을 실행하여 설치 확인은 이 단계 건너뛰기로 넘어가기

7. Firebase 프로젝트의 설정에서 클라우드 메시징 탭을 통해 Cloud Messaging API 서버 키 활용

   
   • 서버 키가 없다면 Google Cloud Service를 통해 Cloud Messaging API 사용 설정을 별도로 진행

8. 해당 프로젝트의 app.json에서 google-services.json 파일과 연동

   "expo": {
     "android": {
       "package": "com.odndevel.videotest",
       "googleServicesFile": "./google-services.json",
     },
   }

9. expo push:android:upload --api-key <Cloud-Messaging-API-서버-키> 터미널에 입력으로 FCM 토큰 값 입력

10. Expo 대쉬보드로 이동 후 Credentials 탭으로 이동하여 확인 가능

    

카카오 로그인 (REST API + WebView 사용)

• Expo 환경에서 테스트 가능

• 유용한 블로그 링크

• 개발 환경에서의 WebView에 보여줄 uri ex) http://172.30.1.48:19000/KakaoLogin

  • http://172.30.1.48:19000 -> Expo 기본 URL (exp://172.30.1.48:19000)

  • Kakao developers의 카카오 로그인에 Redirect URI를 등록해야 함

  • 실제 배포된 페이지를 만들어서 Cannot GET /KakaoLogin 에러 수정

• 웹뷰를 통해 카카오 로그인 창이 뜨며, 로그인을 위한 동의 항목 체크 페이지로 Redirect됨

• 인가 코드 받기

    uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`

• 액세스 토큰 발행

    import AsyncStorage from "@react-native-async-storage/async-storage";
    import axios from "axios";
  
    // 발급받은 액세스 토큰을 react native의 async-storage에 저장하여 다른 페이지에서도 활용 가능
    const storeToken = async (accessToken) => {
      try {
        await AsyncStorage.setItem("userAccessToken", accessToken);
      } catch (error) {
        console.log(error);
      }
    };
  
    axios({
      method: "post",
      url: "https://kauth.kakao.com/oauth/token",
      params: {
        grant_type: "authorization_code",
        client_id: REST_API_KEY,
        redirect_uri: REDIRECT_URI,
        code: `${위에서 받은 인가코드}`,
      },
    })
      .then((res) => {
        accessToken = res.data.access_token;
        storeToken(accessToken);
      })
      .catch((error) => {
        console.log(`Error : ${error}`);
      });

  • 토큰 만료 시간

    • Access Token 만료 시간 : 21599초 (6시간)

    • Refresh Token 만료 시간 : 5183999초 (60일)

      • 변환 사이트만 믿었다가 계산 잘못된거 알고 다시 계산한 결과 토큰 만료기간 2달 맞음

      • 활용 방안

          `${현재시간}` === `${현재시간 + Refresh Token 만료 시간}` ? logout || unlink : null
          // 초 계산이기 때문에 UNIX 타임으로 계산해야 할 듯

  • logout, unlink 하기 전까지는 만료 시간이 되면 자동 토큰 파기

    • 자동 로그인 기능을 위해서는 Refresh Token을 사용해야 할 듯

• 발급받은 액세스 토큰을 통한 유저 정보 가져오기

  import AsyncStorage from "@react-native-async-storage/async-storage";
  import axios from "axios";
  
  const getInfo = async () => {
    try {
      const accessToken = await AsyncStorage.getItem("userAccessToken");
      // 저장된 액세스 토큰에 접근
  
      if (accessToken !== null) {
        axios({
          method: "get",
          url: "https://kapi.kakao.com/v2/user/me",
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        })
          .then((res) => {
            console.log(
              `
              userAccessToken : ${accessToken}
              Nickname : ${res.data.kakao_account.profile.nickname}
              Email : ${res.data.kakao_account.email}
              `
            );
          })
          .catch((err) => {
            console.log(`Error : ${err}`);
          });
        }
      } catch (err) {
        console.log("error", accessToken);
      }
    };

카카오 로그인 구현 (SDK 사용)

• EAS build or prebuild를 통해서만 테스트 가능

• @react-native-seoul/kakao-login GitHub

  • config-plugin을 설정하여 사용할 수 있는 방법이 존재하는 듯

  • app.json 파일을 수정하여 구현하는 방식인 만큼, EAS를 통한 빌드 후 작동 테스트 예정

  • 테스트 결과, kotlinVersion 오류로 인해 빌드 실패

    [stderr] The Android Gradle plugin supports only Kotlin Gradle plugin version 1.5.20 and higher.
    [stderr] The following dependencies do not satisfy the required version:
    [stderr] root project 'video-test' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10

    • app.json 수정을 통해 구현 성공

      "plugins": [
        [
          "@react-native-seoul/kakao-login",
          {
            "kakaoAppKey": "KAKAO_네이티브_앱_키",
            "kotlinVersion": "1.5.20" // -> 버전 수정
             // 라이브러리에서 자체적으로 적용한 버전은 1.5.10
          }
        ]
      ],

  • getProfile() 메서드를 통해 로그인 후, 로그인된 정보 값을 받아올 수 있는지 테스트 필요

    • 참고할 만한 블로그

    • 현재 로그인 버튼을 눌렀을 때, 카카오톡 앱이 실행되고 로그인에 필요한 동의 항목까지는 표시

    • 이 후의 진행 사항은 빌드를 통해서만 확인이 가능함

React Query (데이터 통신 작업)

• React Query Repo 참고

• 공식 Docs 한글 번역 Repo

휴대폰 인증

• 아임포트 결제 및 휴대폰 인증

  • Expo와 아임포트 연동

• 나이스 본인인증 PASS 사용

  • Expo 환경에서는 eject 후 사용 가능

📂 video-test-copy

expo eject

• expo eject은 삽질 -> npx expo prebuild를 통해서 최신 SDK를 eject 가능

  • 안드로이드 스튜디오에서 📂 android를 프로젝트로 열어서 jdk 버전(17.0.6)을 맞춰야 할 수 있음

    

React Navigation

• Expo 환경에서는 문제없이 돌아가지만, prebuild 후에 문제가 됨

  • RNSScreenStackHeaderConfig 에러 메세지

• 해결 방법

  • 해당 프로젝트를 안드로이드 스튜디오로 실행 (버전 자동 동기화를 위함)

    • 안드로이드 스튜디오 > 해당 프로젝트 > 📂 android

  • ⚙️ Project Structure > Project

    Name	Version
    Android Gradle Plugin Version	7.4.1
    Gradle Version	7.5.1

  • 🔧 Preferences > Build, Execution, Deployment > Build Tools > Gradle

    Name	Version
    Gradle JDK	17.0.6 (jbr-17, etc...)

💡 기타 참고 사항

테스트용 비디오 모음 링크

Expo 환경에서 RTSP 영상 스트리밍은 불가

• eject를 진행한 후, react native 환경에서 가능

Expo eject 후, 안드로이드 가상 디바이스 실행 에러 발생

• 원인, 설정법 찾아야 함

Toast (Alert 대체제)

• react-native-toast-message (Toast 알림)

  • 느낌이 어떤지 테스트 할 예정

  • Alert은 가능, Confirm이 가능한지는 확인해봐야 함

• react-native-easy-toast (다른 Toast 알림)

  • Toast 커스텀이 비교적 쉬운 편 (ref를 이용)

  • 마찬가지로 Confirm이 가능한지는 확인 필요

Expo Splash

• expo-splash-screen

  • 기본적으로 Expo를 세팅하면 자동으로 라이브러리 설치됨

• 도움되는 블로그