전체 글 (131) 썸네일형 리스트형 도메인 하나일 때만 잘 굴러갔던 번역 구조에 대해 최근 일하면서 다국어 번역 인프라를 들여다볼 일이 있었다. 처음엔 단순한 작업인 줄 알았는데, 막상 안을 까보니 도메인 하나에는 문제없이 동작하지만 두 번째 도메인부터는 똑같은 코드를 거의 통째로 복제해야 하는 구조였다. 이걸 어떻게 풀어가기로 했는지 정리해두면 비슷한 고민하는 사람한테 도움이 될 것 같아 글을 남긴다.상황은 이랬다. 대회 상세 페이지가 한국어 외에 영어, 일본어, 중국어, 인도네시아어를 지원해야 했고, 이미 백엔드에서 DeepL을 써서 번역본을 미리 만들어 DB에 저장하는 구조가 있었다. 응답 형태는 원문 필드 옆에 translatedDisplay라는 객체가 따라오는 식이었다. 원문은 그대로 있고, 화면에 보여줄 때 쓸 번역본을 별도로 내려주는 패턴이었다.{ "title": "", .. [RN] iOS는 멀쩡한데 안드로이드만 버벅인다 - React Native 홈 화면 이미지 최적화기 QA 중에 안드로이드 단말에서 홈 탭 진입 시 버벅임이 심하다는 리포트를 받았다. 같은 빌드, 같은 코드인데 iOS에서는 멀쩡했다. 더 이상한 건 큐레이션 영역의 일부 썸네일이 아예 빈 자리로 남는 케이스도 있었다는 점이다.증상은 이렇다.홈 진입 직후 스크롤이 짧게 끊긴다캐러셀의 큰 썸네일 중 몇 장이 렌더되지 않는다다른 화면 갔다가 다시 들어오면 가끔 정상으로 보인다동일 빌드에서 iOS는 완전히 멀쩡하다3배 고화질 이미지를 테스트로 일부 섞어둔 상태였다. 백엔드에서 리사이즈/압축을 거치긴 하지만 원본 자체가 큰 것들이 있었다. 처음엔 단순히 "이미지가 크니까 느린 거겠지" 정도로 넘기려 했는데, iOS는 멀쩡한 게 마음에 걸려서 좀 더 파봤다.iOS와 Android의 는 같은 컴포넌트가 아니다이게 핵심.. Spring Boot 로컬 개발 환경에서 SSH 터널로 원격 DB 연결하고 Swagger로 테스트하기 백엔드 개발을 하다 보면 로컬 DB에는 테스트 데이터가 없어서 API 동작을 확인하기 어려운 경우가 있다. 이럴 때 SSH 터널을 이용하면 원격 dev 서버의 DB를 로컬에서 직접 연결해서 실제 데이터로 테스트할 수 있다.이 글에서는 Makefile로 SSH 터널 명령어를 만들고, IntelliJ에서 환경변수만 바꿔서 원격 DB를 바라보는 로컬 서버를 띄우고, Swagger UI로 API를 직접 테스트하는 과정을 정리한다.전제 조건SSH 접속이 가능한 원격 서버 (bastion 경유 포함)원격 서버에 MySQL, Redis가 돌아가고 있는 상태로컬에 Spring Boot 프로젝트와 IntelliJ가 세팅된 상태Makefile에 터널 명령어 추가매번 SSH 터널 명령어를 직접 치면 번거롭다. Makefil.. [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에서 신규 앱을 추가해준다.회사이름, 이름,.. 이전 1 2 3 4 ··· 17 다음
