음식 인식을 위한 음식 사진, 유저 사진 등 서버로 이미지를 전송해야할 필요가 있었다. 기존에는 base64 방식을 채택했으나, 서버로 전송하는데 시간이 오래 걸려 이 부분을 개선하기로 했다. 이미지 전송에는 여러 가지 방법이 있지만, 대표적인 방식인 Base64와 FormData에 대해 알아보도록 하자! 📍Base64 인코딩 이진 데이터를 64개의 ASCII 문자로 변환하는 방식이다. 인코딩 방법 24비트 버퍼에 위쪽(MSB)부터 한 바이트씩 세 바이트를 집어넣는다. (버퍼의 남은 부분은 0으로 채워넣는다.) 그리고, 버퍼의 위쪽부터 6비트(2^6=64)씩 잘라 그 값을 읽어 Base64 색인표와 맵핑한다. 이 과정을 거치면 4개의 ASCII 문자로 변환된다. ++예시 특징 데이터 손실 방지: 이진 데..
분류 전체보기
❗️ 문제 npx expo start 명령어로 서버를 시작하면 다음과 같이 QR코드와 실행할 수 있는 단축키 목록이 나온다. 안드로이드 애뮬레이터(단축키 a)와 iOS 디바이스(QR코드)로는 정상적으로 실행하나, iOS 시뮬레이터(단축키 i)만 다음과 같은 에러 코드가 발생하였다. Error: xcrun exited with non-zero code: 60 An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60): Unable to boot the Simulator. launchd failed to respond. Underlying error (domain=com.apple.SimLaunchHostServic..
Authentication & Authorization 패턴을 위한 Token과 첫 진입을 판단하는 DeviceID 등, 앱이 종료되어도 유지되는 데이터를 관리하기 위해 로컬 스토리지를 사용했다. Expo의 경우, 로컬에 데이터를 저장하는 방식이 두가지 존재하는데, 두 저장 방식을 알아보도록 하자! 📍 Async Storage key-value 기반의 데이터를 암호화하지 않고, 저장하고 불러올 수 있도록 하는 라이브러리이다. 설치 npx expo install @react-native-async-storage/async-storage 사용법 AsyncStorage.setItem() , AsyncStorage.getItem() API를 통해 데이터를 저장, 불러올 수 있다. 비동기적으로 동작하기 때문에 P..
❗️ 문제 EAS 빌드 이후 iOS와 Android 테스트 하던 중, iOS에서만 외부 API가 전혀 동작하지 않았다. ( Postman이나 Android에서는 잘 동작했다. ) Sentry로 에러 추적 결과, https://semi-calories.sentry.io/share/issue/d67573a9a86a465e8a7a4f971fe5a156/ AxiosError: Network Error Network Error AxiosError /Users/mac/Projects/Semi-Calories/Frontend/node_modules/axios/lib/adapters/xhr.js handleError handleError(/Users/mac/Projects/Semi-Calories/Frontend/no..
❗️문제 EAS 내부 빌드하여 iOS와 Android 테스트하던 중, Android에서만 외부 API가 전혀 동작하지 않았다. ( Postman이나 iOS에서는 잘 동작했다.. iOS는 앱 제출 심사도 통과한 상태 ) Sentry.captureException(err) 로 에러 추적한 결과, https://semi-calories.sentry.io/share/issue/fcbbd537992e4c229cdb3a05d2fec47e/ AxiosError: Network Error Network Error AxiosError app:///index.android.bundle handleError handleError(index.android) semi-calories.sentry.io 이러한 Axios Erro..
📍 Postman 이란? API 개발을 위한 테스팅 및 문서화 도구이다. 사용자 친화적인 인터페이스와 API 문서 작성, 모니터링 등 다양한 기능을 제공한다. 웹 또는 데스크톱 앱으로 접속 가능 https://www.postman.com/downloads/ Download Postman | Get Started for Free Try Postman for free! Join 30 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com 📍 WorkSpace 각 WorkSpace 내 API , Collection , Environm..
📍 디버깅이란? 개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업 📍 Expo 환경에서 디버깅 할 수 있는 방법 앱 시작 후 j 눌러 Chrome DevTools로 디버깅 VS Code 확장을 통한 디버깅 Expo Tools (2024.03.06 기준) Expo SDK 49, 50인 경우 Expo Tools에서 오류 (2024.03.07 기준) 해당 오류 수정 React Native Tools Expo 시작된 터미널에서 shift+m 눌러서 React DevTools로 디버깅 개발자 메뉴 react-native-debugger 설치하여 디버깅 📍 Expo Tools Visual Studio Code에서 Expo 프로젝트를 쉽게 관리하고 디버깅하는 데 도움을 주는 확장 프로그램. Expo Go와..
❗️문제 babel-preset 패키지와 @babel/core가 old version이기 때문에 생기는 문제 💡해결 babel-preset-expo Expo 환경이므로 babel-preset-expo를 업데이트 babel-preset-expo란? Expo 애플리케이션을 위한 Babel 프리셋으로, 필요한 Babel 플러그인과 설정을 포함. 최신 JavaScript 문법, React JSX 변환, 클래스 프로퍼티 등을 지원하며, React Native, React, Expo와 관련된 다양한 기능을 지원 // npm npm i babel-preset-expo // yarn yarn add babel-preset-expo // babel.config.js module.exports = function (api..
