전체 글122 고양이 타로 앱에 서버를 안 두기로 했다 — Edge Function 도입기 React Native 타로 앱을 만들고 있습니다. iOS App Store 출시를 준비하면서 결제 검증과 일일 무료 사용 제한 같은 백엔드 로직이 필요해졌습니다. 그런데 "서버를 띄우자"가 첫 번째 답은 아니었습니다. 월 사용자가 100명일지 1,000명일지 아직 모르는 MVP 단계에서 EC2나 Vercel에 Express 서버를 24시간 켜두는 건 과한 결정이었습니다. 결국 Supabase의 Edge Functions를 도입했고, 이 글은 그 과정에서 배운 것의 정리입니다. 1. 왜 클라이언트만으로는 안 되는가 처음엔 단순하게 생각했습니다. "결제는 Apple이 처리하니까 앱에서 영수증 받아서 직접 처리하면 되지 않나?" 하지만 두 가지 문제가 있었습니다. 문제 1: 신뢰할.. 2026. 5. 11. [앱인토스] 토스 로그인과 JWT, 14일의 비밀 JWT 토스 로그인 앱인토스 OAuth2토스 로그인과 JWT,14일의 비밀을 파헤치다2026년 4월 · miracle-tech.tistory.com앱인토스 미니앱을 만들다 보면 토스 로그인을 반드시 구현해야 한다. 그런데 토큰이 세 종류나 등장하고, 유효기간도 제각각이라 처음엔 꽤 혼란스럽다.이번 글에서는 호텔 키카드 비유를 통해 토스 로그인의 토큰 구조를 아주 쉽게 정리해본다. 이런일이 발생했음 ======================================================================JWT 7일 만료 ↓ check API → 401 ↓ .catch(()=>{}) 로 에러 삼킴 ↓ received = undefined → falsy ↓ "아.. 2026. 4. 26. Vercel Function vs Express 미들웨어 Vercel로 API를 만들다 보면 두 가지 구조 중 하나를 선택하게 됩니다.api/attendance/status.ts 같은 Vercel Function 파일routes/attendance.ts 같은 Express 라우터둘 다 같은 URL로 접근하고, 같은 일을 합니다. 그런데 왜 Express를 쓰는 게 더 낫다고 하는 걸까요?이번 포스팅에서 음식점 비유와 실제 코드로 명확하게 정리해 드릴게요.핵심 차이 한 문장으로Vercel Function = 주문마다 주방을 새로 차리는 것Express 미들웨어 = 이미 열려 있는 식당에서 요리만 하는 것 Vercel Function 구조 — 파일 하나가 서버 하나Vercel Function은 파일 경로가 곧 URL 경로입니다.api/attendance/statu.. 2026. 4. 25. 폴백(Fallback)이란? 개발하다 보면 "폴백"이라는 단어를 자주 접하게 됩니다.근데 막상 누군가 "폴백이 뭐예요?" 하고 물으면 설명하기 애매했던 경험, 한 번쯤 있지 않으신가요?이번 포스팅에서 폴백의 개념부터 실무에서 어떻게 쓰는지까지 아주 쉽게 정리해 드릴게요.폴백(Fallback)이란?폴백(Fallback) = "안 되면 이걸로 대신 써" (PLAN B 의 뜻)영어 fall back은 "뒤로 물러서다", "대안으로 의지하다"는 뜻입니다.개발에서도 똑같아요.원래 방법이 실패했을 때, 미리 준비해둔 대안으로 넘어가는 것인터넷이 끊겼을 때 캐시 데이터를 보여주거나, 이미지 로딩이 실패했을 때 기본 이미지를 보여주는 것이 모두 폴백입니다.폴백이 왜 필요할까?현실 세계에서 완벽한 환경은 없습니다.서버가 다운될 수 있고네트워크가 느.. 2026. 4. 25. Vercel 무료 플랜 limit? Hobby(무료)로 잘 쓰고 있었는데 갑자기 75% 를 사용했다면서 Pro로 업그레이드 하라는 메일이 왔다.'아직 더 버텨줄 수 있을거라 생각했는데...' '뭐가 문제일까?' Free 는 4시간 무료인데 3시간 9분을 사용하고 있었다. Fluid Active CPU 란?API를 호출해서 응답 받고 내 코드가 처리하는 시간ex) DB에 쿼리 날리고 결과 기다림(과금 x) -> 결과 받아서 내 코드로 가공/처리 (과금) Vercel, 이제 "기다리는 시간"엔 돈 안 받는다Vercel이 서버리스 함수 과금 방식을 바꿨다. 기존엔 함수가 DB 응답이나 AI API를 기다리는 동안에도 시간이 그대로 청구됐는데, 새로운 Fluid + Active CPU 방식은 코드가 실제로 CPU를 쓰는 순간만 과금한다.예를 들.. 2026. 4. 16. vercel 의 speedInsignts? Vercel을 Upgrade 하려다보니 $10 가 더 option 으로 붙어있는 걸 발견했다.이게 뭐지? 하다가 나도 모르게 이전에 성능 측정 도구를 서비스 내에 심어놓고 있었던 것을 발견했다.Upgrade 하기전에 꼭! 체크해보자Vercel SpeedInsights란 무엇인가 Next.js 프로젝트를 Vercel에 배포하다 보면 아래와 같은 코드를 접하게 된다.import { SpeedInsights } from '@vercel/speed-insights/react';그리고 일반적으로 루트 레이아웃이나 앱 컴포넌트에 다음과 같이 추가한다.이 기능은 이름 때문에 성능을 “개선”하는 것으로 오해하기 쉽지만, 실제로는 성능을 “측정”하는 도구다. vercel CLI 로 init을 하거나 Enable Anal.. 2026. 4. 15. localStorage TTL이란? 브라우저의 localStorage는 만료 기능이 없습니다. 데이터를 저장하면 명시적으로 삭제하지 않는 한 영구적으로 남아 있어요.그래서 TTL(Time To Live)을 구현하려면 데이터와 함께 만료 시간을 직접 저장하는 패턴을 사용합니다.기본 구현 패턴 javascript// 저장 (TTL: 밀리초 단위)function setWithTTL(key, value, ttlMs) { const item = { value, expiresAt: Date.now() + ttlMs, }; localStorage.setItem(key, JSON.stringify(item));}// 조회function getWithTTL(key) { const raw = localStorage.getItem(key).. 2026. 4. 15. GitHub PR에서 Merge Conflict란? GitHub Pull Request에서 "Squash and Merge"를 누르면 충돌이 생기는 걸까? PR 체크 실패, 리뷰 미승인, Merge Conflict의 차이를 코드 예시와 함께 명확하게 정리합니다.목차GitHub PR이 머지되지 않는 3가지 이유Merge Conflict란 정확히 무엇인가Squash and Merge vs Conflict — 어떤 관계인가Conflict 해결하는 법 (실전 명령어)Merge 방식 3가지 비교정리 한 줄 요약1. GitHub PR이 머지되지 않는 3가지 이유PR을 올렸는데 머지가 안 된다면, 보통 아래 3가지 중 하나입니다. 원인설명해결 방법Review required리뷰어 N명의 Approve가 아직 없음팀원에게 리뷰 요청CI/CD 체크 실패Unit test,.. 2026. 4. 7. Git Stash 안전하게 사용하는 방법: 커밋 없이 브랜치 변경 후 작업 복원하기 Git을 사용하다 보면 작업 중이던 변경사항을 아직 커밋하고 싶지는 않은데, 다른 브랜치로 잠깐 이동해야 하는 순간이 자주 생깁니다. 이럴 때 가장 많이 쓰는 방법이 git stash입니다. git stash를 사용하면 현재 수정한 파일들을 로컬에 임시 저장해두고, 워킹 트리를 깨끗한 상태로 만든 뒤 다른 브랜치로 이동할 수 있습니다. 이후 필요할 때 다시 꺼내서 이어서 작업하면 됩니다.특히 중요한 점은 git stash가 원격 저장소에 올라가는 기능이 아니라는 점입니다. 즉, stash에 넣은 내용은 내 로컬 .git 영역에만 임시로 저장됩니다. 그래서 아직 정리되지 않은 작업을 잠깐 치워두고 싶을 때 유용합니다. 반대로 팀원과 공유되거나 히스토리로 남는 것은 아니므로, 장기 보관 목적이라면 stas.. 2026. 4. 3. 이전 1 2 3 4 5 ··· 14 다음 반응형
