본문 바로가기

분류 전체보기124

[앱인토스] 토스 로그인과 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.
반응형

티스토리툴바