Skip to content
BranchesTags

Repository files navigation

📂 delivery-app

Expo 빌드, 배포 테스트


📂 test

RTSP 영상 스트리밍 테스트


📂 video-test

Expo 영상 출력

실시간 영상 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)=>{constexp="kerning0\n";varcondition=res.data.indexOf(exp);consthttps=res.data.substring(condition+exp.length);setVideoUrl(https.slice(0,-1));}).catch((err)=>console.log(err));},[videoUrl]));
      • 데이터 통신 시, 캐시를 저장하지 않도록 캐시 컨트롤이 필요

스크린샷 테스트

가로 모드로 고정

푸쉬 알림 테스트

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}`

  • 액세스 토큰 발행

    importAsyncStoragefrom"@react-native-async-storage/async-storage";importaxiosfrom"axios";// 발급받은 액세스 토큰을 react native의 async-storage에 저장하여 다른 페이지에서도 활용 가능conststoreToken=async(accessToken)=>{try{awaitAsyncStorage.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달 맞음

        • 활용 방안

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

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

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

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

    importAsyncStoragefrom"@react-native-async-storage/async-storage";importaxiosfrom"axios";constgetInfo=async()=>{try{constaccessToken=awaitAsyncStorage.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 (데이터 통신 작업)

휴대폰 인증


📂 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

      NameVersion
      Android Gradle Plugin Version7.4.1
      Gradle Version7.5.1

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

      NameVersion
      Gradle JDK17.0.6 (jbr-17, etc...)

💡 기타 참고 사항

테스트용 비디오 모음 링크

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

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

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

  • 원인, 설정법 찾아야 함

Toast (Alert 대체제)

Expo Splash

About

React Native 연습용 레파지토리

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages