업무 사례
WebView 광고 callback 누락과 Config 오류 처리
WebView에서 광고를 실행한 뒤 앱으로 돌아왔는데, 네이티브 콜백이 오지 않아 화면이 대기 상태에 남는 문제가 있었습니다. 광고 Config도 잘못된 설정이 실행 단계로 넘어가지 않도록 검증할 필요가 있었습니다.…
개발 기록
문제를 해결하며 쓴 글
개발하면서 겪은 문제와 해결 과정, 새로 배운 내용을 기록합니다.
업무 사례
API 중복 호출 최적화
앱 WebView 화면의 API 호출을 확인하던 중 같은 API가 짧은 시간 안에 반복해서 호출되는 문제가 있었습니다. 각 호출부만 보면 모두 필요한 코드였습니다. 화면 진입 전 preload Activity pre…
업무 사례
Service Worker와 Cache Storage로 정적 리소스 캐싱하기
WebView 화면에서 이미지, 폰트, 3D 모델 같은 정적 리소스를 사용하면서 같은 파일을 반복해서 요청하는 문제가 있었습니다. 특히 3D 모델은 일반 이미지보다 파일 크기가 커서 화면에 다시 진입할 때마다 네트워…
개발 기록
하나의 React 앱에서 WebView와 일반 Web 진입점 분리하기
처음에는 네이티브 앱 내부에서 실행되는 WebView만 고려해 화면 구조를 만들었습니다. 서비스를 일반 브라우저에서도 제공하게 되면서 같은 화면을 사용하되 진입점과 라우팅 방식은 다르게 처리해야 했습니다. 화면은 그…
개발 기록
WebView에서 Three.js로 GLB 모델 렌더링하기
WebView 메인 화면에 3D 캐릭터와 단계별 오브젝트를 표시해야 했습니다. 단순히 모델을 보여주는 것뿐 아니라 다음 기능도 필요했습니다. 화면 크기에 맞는 Canvas GLB 모델과 애니메이션 로딩 터치와 드래그…
개발 기록
WebView에서 Stackflow로 화면 전환과 뒤로가기 관리하기
여러 화면을 가진 WebView 서비스를 구현하면서 화면 전환 상태를 어떻게 관리할지 고민하게 됐습니다. URL에 맞는 화면을 보여주는 것 외에도 처리할 일이 있었습니다. 화면 전환 애니메이션 이전 화면으로 돌아가기…
개발 기록
모노레포에서 변경된 서비스만 배포하는 CI/CD 구성
하나의 저장소에서 여러 서비스를 관리하면서 서비스별 빌드와 배포를 따로 처리해야 했습니다. 처음에는 서비스와 배포 환경마다 워크플로를 직접 작성했습니다. 서비스가 늘어나면서 같은 설정이 반복됐고, 변경되지 않은 서비…
개발 기록
Panda CSS 기반 멀티 테마 디자인 시스템 구축
여러 서비스에서 같은 디자인 시스템을 사용하면서 서비스마다 색상과 폰트는 다르게 적용해야 했습니다. 공통 UI를 서비스별로 따로 구현하면 중복 코드가 늘어나고, 하나의 스타일을 수정할 때 여러 패키지를 함께 변경해야…
개발 기록
React와 Socket.IO로 실시간 채팅 구현하기
Socket.IO를 활용해 간단한 채팅 시스템을 만들어봤습니다. 처음 접속했을 때 기존 메시지를 불러오고, 이후에는 새 메시지를 실시간으로 주고받도록 구현했습니다. React 클라이언트와 Node.js 서버가 어떻게…
개발 기록
SPA와 MPA
SPA와 MPA는 페이지를 이동할 때 문서를 어떻게 다루는지에 따른 구분입니다. CSR과 SSR처럼 렌더링 위치를 나누는 개념과는 구별해서 볼 필요가 있습니다. SPA: 같은 문서 안에서 화면 전환하기 SPA(Sin…
개발 기록
CSR과 SSR
CSR과 SSR은 화면을 만들기 위한 렌더링을 어디에서 수행하는지에 따른 구분입니다. 둘 중 하나가 항상 빠르다기보다는, 콘텐츠가 보이고 조작 가능해지는 과정에 차이가 있습니다. CSR: 브라우저에서 화면 만들기 C…
개발 기록
TripApp 수정
React와 ChatGPT를 사용한 기존 TripApp을 Next.js, Gemini API, Mapbox 기반으로 다시 만들었습니다. 데모도 추가했습니다.