전체 글

WebView에서 결제 기능을 개발하게 됐다. 처음엔 일반 웹에서 PG 붙이는 것과 크게 다르지 않을 거라고 생각했다. 결제 SDK 연동하고, 성공/실패 URL 처리하면 되는 거 아닌가?조사해보니 전혀 그렇지 않았다.WebView는 브라우저가 아니다. 앱 안에 올라가 있는 웹 컨텍스트고, 모든 외부 이동과 팝업, 딥링크 처리를 앱이 컨트롤한다. 이 구조를 모르고 시작하면 결제 플로우가 중간에 막히거나, 완료됐는데 앱이 반응을 못하거나, 심한 경우 결제는 됐는데 완료 처리가 안 되는 상황이 생길 수 있다.실제로 구현하기 전에 알아두어야 할 것들을 미리 정리해봤다.1. 외부 앱 딥링크 이동WebView에서 결제를 진행하다 보면 카카오페이, 네이버페이 모두 외부 앱으로의 딥링크 이동이 발생한다. 카카오페이라면..

React로 웹 개발을 하다 보면 어느 순간 "이 화면, 앱 안에서 보여줘야 해요"라는 요청을 받게 된다. 그게 웹뷰(WebView)다.웹뷰 자체는 어렵지 않다. 앱 안에 브라우저를 띄워서 웹 페이지를 보여주는 것이니까. 문제는 웹과 앱이 서로 대화해야 할 때다."뒤로가기 버튼 누르면 앱 네비게이션으로 이동해줘""결제 완료되면 앱에서 푸시 알림 보내줘""앱에서 토큰 받아서 웹에서 API 호출해줘"이런 요구사항이 생기는 순간, 브릿지(Bridge) 가 필요해진다.1. 브릿지가 뭔가요?웹뷰 안의 웹(JavaScript)과 네이티브 앱(iOS/Android)은 기본적으로 서로 다른 실행 환경이다. 웹은 브라우저 컨텍스트에서, 앱은 네이티브 레이어에서 각각 동작한다.브릿지는 이 두 환경을 메시지 기반으로 연결하..

정적 자산(이미지, CSS, JS)을 S3에 올리고 CloudFront로 배포하다 보면, 같은 URL로 파일만 교체했는데 예전 버전이 계속 보이는 상황을 겪을 수 있다. 이때 필요한 것이 캐시 무효화(Invalidation)다. 이 글에서는 CloudFront 캐시가 어떻게 동작하는지, 무효화는 왜 필요한지, 어떻게 하는지까지 정리해 본다.1. CloudFront와 캐시가 뭐지?CloudFront란Amazon CloudFront는 AWS의 CDN(Content Delivery Network) 서비스다.오리진(Origin): 실제 파일이 있는 곳 (보통 S3 버킷 또는 EC2, ALB 등)엣지 로케이션: 전 세계에 흩어진 캐시 서버사용자가 https://static.example.com/image.png ..

원래 내가 주로 맡았던 프로젝트는 React(CSR) 중심이었다. 화면이 뜬 뒤 클라이언트에서 API를 호출해 데이터를 가져오고, 그 데이터로 UI를 렌더링한다. 이 방식이 특히 잘 맞는 곳이 있다. 바로 상태가 실시간으로 자주 바뀌는 도메인이다. 팩토리 운영 화면처럼 “지금 이 순간”의 상태(진행중/대기/완료, 스캔 결과, 랙 상태 등)가 계속 바뀌고, 사용자의 액션도 잦다면 클라이언트에서 빠르게 갱신하는 흐름이 자연스럽다.그런데 최근 새로 맡은 프로젝트는 결이 달랐다. 서비스의 핵심이 자주 바뀌지 않는 정보성 데이터였고, 그 데이터를 정적 JSON 형태로 가져와 보여주는 역할이 주였다. 프레임워크도 Next.js. 여기서 흥미로웠던 건, “데이터를 언제 가져오느냐”가 아예 다른 기본값을 갖는다는 점이..

프론트엔드 상태 관리는 왜 둘로 나뉘었을까?프론트엔드 개발을 하다 보면 자연스럽게 이런 질문을 하게 된다.“TanStack Query가 있는데 Redux는 이제 필요 없는 거 아닌가?”“API 데이터도 다 상태인데, 그냥 Redux로 관리하면 안 되나?”실제로 TanStack Query가 널리 쓰이기 전까지는서버에서 받아온 데이터(API 응답) 도 Redux Store에 저장해 관리하는 경우가 많았다.하지만 요즘은 점점 역할 분리가 명확해지고 있다.이 글에서는 단순히 “보일러플레이트가 줄어든다”는 이야기를 넘어서,TanStack Query와 Redux가 해결하려는 문제가 무엇이 다른지를 중심으로 비교해본다.1. 핵심 결론부터 말하면TanStack Query와 Redux는 경쟁 관계가 아니다.둘은 애초에 ..

1년 6개월의 회고프론트엔드 개발자로 일을 시작한 지 어느덧 1년 6개월 차에 접어들었다.입사하자마자 정신없이 업무를 쳐내며 달려오다 보니, 적응 중이라는 핑계로 개발 블로그 기록을 꽤 소홀히 해왔다는 사실이 이제 와서 조금 아쉽게 느껴진다.이제 막 신입 티를 벗어나고, 내가 작성한 코드에 대해 “왜 이렇게 짰지?”를 고민하게 되는 시점이 된 지금, 이 타이밍에 한 번쯤은 지나온 시간을 정리해보고 싶었다.앞으로는 주 1회 정도 개발 기록을 남기는 것을 목표로, 다시 천천히 기록을 시작해보려 한다.그렇다면 지난 1년 반 동안 나는 어떤 일을 해왔을까.팩토리 풀필먼트 시스템 운영 개발입사 이후 현재까지 주로 맡고 있는 도메인은 팩토리에서 사용하는 풀필먼트 시스템 운영 개발이다.이전에 비개발 직군으로 근무했던..