hyjoo1226 님의 블로그

주문 추적을 구현한 후, 실제로 구매를 테스트할 수 있었습니다.앱에서 브랜드몰로 들어가 상품을 구매하고, 구매 완료 페이지까지 도달했습니다.백엔드 로그를 확인하면 주문번호가 제대로 매칭되고 DB에서 캐시백도 적립되었는데, 캐시백 카드의 잔액은 계속 0원이었습니다.앱을 종료하고 다시 열었을 때만 갱신되었던 것입니다. 1. 쿼리 갱신하기 적립되는 순간에 화면을 갱신해주면 되겠다는 생각이 가장 먼저 떠올랐습니다.프론트엔드에서는 React Query를 사용하고 있었고, 사용자 정보와 지갑 잔액은 ['me'] 쿼리로 관리되었습니다.주문 추적 API가 성공하는 순간, 이 쿼리의 캐시를 무효화하면 자동으로 새로운 잔액을 가져올 것 같았습니다.// 인앱 브라우저 내 구매 추적 -> 캐시백 잔액 자동 갱신cons..

웹 개발만 하다가 React Native로 앱 개발을 처음 시작했을 때, 가장 편하다고 느꼈던 컴포넌트는 ScrollView였습니다.배열을 .map()으로 돌려서 컴포넌트만 나열하면 자동으로 스크롤이 생기고, 무한 스크롤처럼 자연스럽게 동작했기 때문입니다.// 브랜드 목록 렌더링 {brands.map(brand => ( ))} 웹에서는 무한 스크롤을 따로 구현했던 기억이 있는데, 앱에서는 "그냥 되네?"라는 느낌이었습니다.그래서 아무 생각 없이 계속 이 방식만 쓰고 있었습니다.데이터가 많아지기 전까지는요. 1. ScrollView와 무한렌더링 100개의 브랜드 더미데이터를 넣고 카테고리 페이지에서 테스트하던 중이었습니다.화면이 로딩될 때 눈에 띄에 버벅이는 현상이 발생했습니다.// 카테..

인앱브라우저에서 외부 브랜드몰도 띄웠고, 이제 정말로 캐시백 앱의 핵심 기능을 만들 차례였습니다.사용자가 인앱브라우저에서 구매를 했을 때 주문을 추적하는 것입니다.샵백이나 다른 캐시백 앱들은 어떻게 하는 걸까 궁금했습니다. 검색해도 구체적인 구현 방법은 나오지 않았죠.결국 직접 부딪혀가며 하나씩 해결해야 했습니다. 1. 인앱브라우저와 WebView 제가 서비스하는 앱에서 입점할 브랜드몰로 사용자를 이동시키는 방법은 두 가지였습니다.외부브라우저(Chrome, Safari 등)로 여는 방법과, 앱 안에서 인앱브라우저(WebView)로 여는 방법입니다. 외부브라우저로 열면 구현은 편하지만, 우리 앱은 그 뒤의 행동을 전혀 추적할 수 없습니다.사용자가 어떤 페이지까지 갔는지, 실제로 결제를 했는지, 주문..

그동안은 비즈니스 미팅에서 빠르게 보여주기 위해 로컬 환경에서 구동되는 것에 집중했습니다.이제 핵심 기능인 인앱브라우저 개발에 들어가며, 실제 기기에서 테스트해보기 위해 인프라 구축을 시작했습니다. 1. 처음 접해보는 AWS 기존에 팀프로젝트들을 했을 때에는 매번 인프라를 맡은 팀원이 있었습니다.저는 프론트엔드나 백엔드를 맡아 인프라를 제외한 기능 개발에 힘썼었죠.인프라에 대해서는 해당 팀원이 Linux 화면에서 로그 찍고 서버 재시작하는걸 옆에서 본 게 전부였습니다. 사수도 없는 환경에서 처음 접해보는 인프라 구축을 해야했고, 회사 돈이 지출되는 일이다 보니 잘못 설정해서 요금이 많이 부과될까봐 긴장됐습니다.그래서 처음에는 EC2, RDS를 프리티어로 생성하며 최대한 무료 범위 안에서 구성하려 ..

로그인 기능을 구현한 뒤, 갑자기 이런 이야기를 들었습니다. “이 앱, 해외 서비스도 가능하게 해야 할 것 같아요.” 1. 예상치 못한 방향 전환 "지금 기본 기능도 안 만들었는데..."솔직히 당황스러웠습니다. 3개월 안에 MVP를 출시해야 하는데, 갑자기 해외 확장까지 고려하라니.하지만 회사 입장에서는 합리적인 요구였습니다.투자 유치를 위해 글로벌 시장 가능성을 어필할 필요가 있었고, 실제로도 해외 바이어들과 잦은 미팅을 가지고 있었기 때문이죠. 이미 캐시백 앱의 기본 구조를 잡고 기능 개발에 들어간 상태였기 때문에, 이 말은 단순한 요구사항 추가가 아니라 아키텍처 전반을 다시 고민해야 한다는 신호처럼 느껴졌습니다. 2. 해외 서비스를 위한 설계 고민 해외 서비스를 한다는 말 한마디에, ..

DB 설계를 마치고 본격적인 기능 개발에 들어갔습니다.첫 번째로 구현할 기능은 소셜 로그인으로, Google과 Kakao 로그인을 지원해야 했죠.로그인은 서비스 진입의 첫 관문이기도 하고, 비즈니스 미팅에서도 실제 로그인 -> 홈 화면 진입을 보여줄 수 있어야 했습니다. "웹에서 몇 번 해봤으니까 금방 되겠지"하지만 앱에서는 그 생각이 완전히 틀렸다는 걸 곧 깨닫게 됩니다. 1. 웹에서는 쉬웠는데 웹에서 OAuth 소셜 로그인을 구현할 때는 비교적 단순했습니다.// 웹에서의 Google OAuth1. Google Cloud Console에서 클라이언트 ID 발급2. 승인된 리디렉션 URI 등록 (https://myapp.com/auth/callback)3. 프론트엔드에서 "구글 로그인" 버튼 클릭..

프로토타입을 넘어 본격적인 기능 개발에 들어갔습니다.그중 가장 고민이 많았던 부분이 캐시백 정책 DB 설계였습니다. 1. 캐시백 정책은 생각보다 복잡했다 기획 단계에서 정리된 요구사항은 대략 이랬습니다.브랜드마다 캐시백 비율이 다를 수 있음같은 브랜드라도 상품 종류에 따라 비율이 달라질 수 있음일반 캐시백 / 상향 캐시백 존재인플루언서는 일반 사용자와 다른 혜택을 받을 수 있어야 함 예를 들면 이런 식이었습니다.뷰티 브랜드A: 신규 고객 35%, 기존 고객 7.5% (상향 캐시백: 신규 고객 65%, 기존 고객 8%)뷰티 브랜드B: 스킨케어 15%, 메이크업 10%, 향수 5%뷰티 브랜드C: 전 상품 0.5% (인플루언서는 5%) 각 브랜드마다 완전히 다른 캐시백 정책이 있을 수 있다보니, 어떻게..

앱 개발을 시작하자마자 처음 한 작업은 레이아웃이었습니다.회사에서 비즈니스 미팅용으로 "프로토타입"이 필요했기 때문입니다. 투자 미팅이나 파트너사 미팅에서 실제로 동작하는 걸 보여줘야 했던 거죠.그래서 서버 개발보다 더미 데이터로 동작하는 프론트엔드 화면을 먼저 만드는 것부터 시작했습니다. 탭 네비게이션, 홈 화면과 같은 기본 구조를 잡았죠. 그리고 첫 관문이 나타났습니다. "탭 아이콘 색 변환이 잘 안되는데?" 1. 탭 아이콘은 그냥 SVG 쓰면 되는 거 아닌가요? 웹 개발할 때는 아이콘을 당연히 SVG로 썼습니다. 확대해도 깨지지 않고, fill 속성으로 색상도 쉽게 바꿀 수 있으니까요.디자인팀에게 받은 아이콘을 Figma에서 SVG로 가져왔습니다. [react-native-svg 설치]np..

"3개월 안에 앱 출시 가능할까요? 샵백 앱 참고해서 비슷하게 만들어주세요. 세부사항은 알아서 결정하시면 됩니다." 회사에서 처음 맡은 앱 개발 프로젝트의 시작이었습니다. 웹 개발 경험은 있었지만 앱 개발은 처음이었고, 인프라 경험도 전무했으며, 무엇보다 사수 없이 단독으로 진행해야 하는 프로젝트였습니다.지금 돌아보면 무모했던 것 같기도 하지만, 그 과정에서 크고 작은 여러 문제들을 해결하며 많은 것을 배웠습니다. 그리고 이제 개발이 거의 마무리된 시점에서, 그동안 달려오느라 정리하지 못했던 기록들을 꺼내보려 합니다. 1. 왜 지금에서야 기술 블로그를 쓰기 시작했을까 사실 개발 과정에서 트러블슈팅을 만날 때마다 자료는 꾸준히 모아뒀습니다. 에러 로그, 해결 방법, 참고한 링크들, 머릿속 고민들까지..