전체 글 (129) 썸네일형 리스트형 [RN] firebase dynamic link없이 딥링크를 사용한 공유하기 기능 구현 유튜브, 인스타그램 등 어플을 사용하다 보면 공유하기 기능을 볼 수 있다.해당 공유하기 기능을 구현하기 위해 조사를 해보았고. 파이어베이스를 사용한 구현은 2025년부터 지원을 안 하는것으로 확인되었다.따라서 직접 딥링크를 사용한 공유하기 기능을 구현해보았다.먼저 카카오톡 등으로 공유하기를 했을때 보통 썸네일, title, description과 같은 정보들이 나타나게 된다. 해당 기능을 구현하기 위해 먼저 SSR를 사용한 nextJS 프로젝트를 하나 셋팅한 뒤 AWS emplify에 배포해주었다.위 정보가 같이 나타나게 하기 위해 메타데이터를 사용했다.나는 title, description, thumbnailImage, date등의 정보를 포함하고 있는 대회를 공유할 수 있는 기능을 개발했고, 전체적인.. [RN] 안드로이드 에뮬레이터 harfbuzz text shaping으로 인한 프로세스 종료 RN으로 개발을 하던 중 IOS가 아닌 안드로이드 에뮬레이터에서만 발생하던 이슈가 있었다.apk를 빌드해서 디바이스에서 실행했을때는 조금 버벅거리는 느낌은 있었는데 에뮬레이터에서는 해당 스크린이 열리자마자 앱이 죽어버렸다. (스크린이 열리다가 도중에 멈추고, 이어서 열리는 경우도 있었고 대부분 바로 앱이 종료되었다.)문제는 로그가 남지 않는 것이였다. 런타임 에러나 렌더 에러, 또는 빌드 에러가 없었기에 아무런 로그 없이 원인을 찾아서 문제를 해결해야했다.OOM은 프로그램이 과도한 메모리를 사용하거나, 메모리 누수로 인해 발생하며, 운영체제에서는 OOM killer가 문제를 해결하기 위해 프로세스를 종료시켜버린다.문제가 발생하는 스크린(열리면 앱이 종료되는)에서 대략적으로 예상이 되는 원인은 WebVie.. [RN] Google Spread Sheet를 이용한 다국어 처리 설계 React Native 앱에 다국어 지원 추가하기Google Sheets와 i18next 연동최근 프로젝트에서 React Native 앱에 다국어 지원을 추가했다.처음에는 JSON 파일로 번역을 관리하면 충분하겠다고 생각했지만, 실제로 작업을 진행하면서 번역 관리 방식과 개발 워크플로우를 함께 고려해야 한다는 점을 느꼈다.이번 글에서는 Google Sheets를 번역 관리 도구로 사용하고,자동화 스크립트를 통해 JSON 파일을 생성한 뒤 i18next와 연동한 과정을 정리했다.Google Sheets를 선택한 이유프로젝트 초기에는 번역 파일을 JSON으로 직접 관리하는 방식을 고려했다.하지만 다음과 같은 문제점이 있었다.비개발자 접근성 부족디자이너나 PM이 번역을 수정하려면 개발자에게 요청해야 했다.Gi.. [RN] React-Native에 Toss PG 연결하기 (version1) RN 프로젝트에 TossPG를 연결하기 위해 심사 승인 후 토스페이먼츠 개발자 문서를 확인했다.우선 결제는 위와 같은 flow로 이루어진다. 사용자 입장에서는 카드정보 입력, 인증이 완료되면 결제가 끝난 것 처럼 보이지만, 개발자는 이후 결제를 생성하고 승인 요청을 보낸 뒤 승인이 되어 실제로 결제가 이루어지도록 해주어야한다.토스PG는 version 1, version 2로 나뉘어져있었다.Version1에는 React-Native SDK 가이드가 있었고, Version2에는 따로 없었다. 다른분이 문의한 글을 봤는데 Version2도 RN에서 동작은 하지만 Version1을 써도 무방하며 Version1을 사용하고 답변이 되어있어서 Version1을 보며 진행하기로 했다. .. [RN] Expo eas IOS 빌드 & TestFlight테스트 Expo EAS 환경에서 안드로이드 앱을 빌드하고 테스트하는 방법은 간단했다. eas 로그인 후 환경별로 development, test, production을 만들어주었고 안드로이드를 eas 빌드하면 다운로드 링크를 확인 가능했고, expo 대시보드에서도 빌드를 확인할 수 있었다.IOS의 경우 안드로이드와 달라 단계별로 빌드 및 테스트 방법을 정리해보았다.먼저 Apple developers 가입 후 맴버십 가입을 해주어야한다.이후 Identifiers를 등록해주었다. app.config.json에서 확인할 수 있는 BundleID를 입력 후 만들어준다. 푸시메시지, 애플로그인을 사용할거라 Capablities에 체크해주었다.이제 App Store Connect에서 신규 앱을 추가해준다.회사이름, 이름,.. [RN] Expo54버전 채널톡 연동 NOT_INITIALIZED 이슈 Expo 54버전에서 RN에 채널톡을 연동하기 위해 "@peulda/expo-plugin-channel-io": "^1.1.0", "react-native-channel-plugin": "^0.12.5", 이렇게 두 개의 모듈을 설치해줬다.이후 https://desk.channel.io/ 채널톡 desk.channel.io에서 계정 생성 후 채널을 만들어주었다.일반 설정 -> 버튼 설치 및 설정에서 Plugin Key를 확인해주었고 .env 및 expo 웹의 환경변수에 플러그인 키를 셋팅해주었다.export function ChannelProvider({ children }: { children: ReactNode }) { const isAuthenticated = useUserStore((state.. [RN] React Native, React 파일 처리 방식에 대한 차이 프로젝트를 진행하며 카메라, 갤러리로 접근한 이미지 파일을 S3에 업로드하고 받아와 사용해야 하는 경우가 있었다.RN에서 디바이스의 갤러리, 카메라를 사용하여 가져온 uri에는 로컬 파일 시스템의 경로가 들어있었다.이에 웹과 앱에서 어떤식으로 파일을 처리하는지 서버에는 어떤 body를 담아 요청을 보내는지 비교해보았다.import { ImageManipulator, SaveFormat } from "expo-image-manipulator";import * as ImagePicker from "expo-image-picker"; 우선 위 라이브러리를 사용해 카메라와 갤러리에 접근해 사진 이미지를 받아왔다. const handleResult = useCallback( async (result: Ima.. [RN] Expo eas build에서 네트워크 요청이 안되는 현상 Expo 54버전에서 개발을 진행하던 중 eas로 빌드해서 빌드를 받아 실행시킨 경우 네트워크 요청이 안되는 현상이 발생했다. "scripts": { "start": "expo start --dev-client", "android": "expo start --dev-client --android", "ios": "expo start --dev-client --ios", "prebuild": "npx expo prebuild", "prebuild:ios": "npx expo prebuild --platform ios", "prebuild:android": "npx expo prebuild --platform android", "prebuild:clean": "npx .. 이전 1 2 3 4 ··· 17 다음
