[TYPESCRIPT] CORS 설정, SameSite/도메인 정책, 개발/운영 환경 분리 - 쿠키 기반 인증이 운영에서 안 흔들리는 기준

쿠키 기반 인증(특히 Refresh Token을 HttpOnly 쿠키로 두는 구조)을 도입하면 프론트/백엔드에서 가장 많이 겪는 문제가 바로 CORS, SameSite, 도메인입니다.개발 환경에서는 잘 되던 것이 운영에서 깨지거나, 반대로 운영에서는 잘 되는데 로컬에서만 안 되는 경우도 흔합니다. 대부분 원인은 “브라우저 쿠키 정책 + CORS 정책 + 배포 도메인 구조”가 맞지 않아서입니다.실무에서 자주 쓰는 기준을 중심으로 다음을 정리합니다.CORS 설정의 핵심 포인트(credentials, origin)SameSite/도메인 정책(서브도메인, 쿠키 스코프)개발/운영 환경 분리(로컬, 스테이징, 프로덕션)예시는 Node/NestJS 계열 기준으로 설명하지만, Spring/Express 등에서도 원리는..

• format_list_bulleted 개발/Typescript
• · 2026. 1. 6.
• textsms

[TYPESCRIPT] 로그인 세션 유지(앱 시작 시 토큰 복원), 보안(localStorage vs cookie), SSR 환경 처리 - “안전하고 끊김 없는 인증”을 만드는 기준

인증 토큰을 잘 붙이고(Authorization), 만료되면 refresh로 재발급하는 흐름까지 만들었다면 그 다음 실무 과제는 보통 이 세 가지입니다.앱을 새로고침/재실행해도 로그인 상태를 유지하려면 토큰을 어디에 두고 어떻게 복원할 것인가보안 관점에서 localStorage vs cookie 중 무엇을 선택할 것인가SSR(Next.js 등) 환경에서 토큰과 쿠키를 어떻게 다룰 것인가RTK Query + TypeScript를 기준으로, 프론트와 서버가 함께 맞춰야 하는 “운영 가능한 인증 정책”을 정리합니다. 로그인 세션 유지의 핵심은 “앱 시작 시점”브라우저에서 새로고침이 일어나면 메모리(Redux state)는 초기화됩니다. 따라서 Access Token을 메모리에만 저장해두면, 새로고침 순간 로..

• format_list_bulleted 개발/Typescript
• · 2026. 1. 5.
• textsms

[TYPESCRIPT] 인증 토큰 처리(Authorization 헤더), Refresh 토큰 전략, 공통 에러 핸들링 - 프론트/백엔드 모두에서 흔들리지 않는 기준

실무에서 인증이 한번 꼬이기 시작하면 문제가 연쇄적으로 발생합니다. 401이 뜰 때마다 화면이 튕기고, 토큰이 만료되면 무한 재시도가 걸리고, 어느 페이지에서는 정상인데 다른 페이지에서는 갑자기 로그아웃되는 식이죠.이런 문제는 대체로 “기능 구현”이 아니라 정책(Policy) 설계의 문제입니다.다음 3가지를 하나의 흐름으로 정리합니다.Authorization 헤더로 Access Token 자동 주입Refresh Token으로 Access Token 재발급공통 에러 핸들링(401/403/5xx) 표준화예시는 RTK Query + TypeScript 기준으로 작성합니다. (Axios에도 거의 동일하게 적용됩니다.) 토큰 모델링: Access vs Refresh실무에서 가장 흔한 구조는 다음과 같습니다.Ac..

• format_list_bulleted 개발/Typescript
• · 2026. 1. 4.
• textsms

[TYPESCRIPT] React Props와 State 타입 정의 — 컴포넌트 안정성을 결정하는 핵심

React + TypeScript에서 가장 중요한 부분을 하나만 꼽으라면 단연 Props와 State 타입 정의입니다. 이 두 가지를 어떻게 정의하느냐에 따라 컴포넌트의 재사용성, 안정성, 리팩토링 난이도가 완전히 달라집니다. Props와 State를 타입으로 정의해야 하는 이유TypeScript를 쓰지 않는 React에서는 다음과 같은 문제가 자주 발생합니다.Props 누락이나 오타를 런타임에서야 발견컴포넌트 사용 방법을 코드로 추측해야 함리팩토링 시 영향 범위 파악이 어려움Props와 State를 타입으로 정의하면 컴포넌트의 사용 계약(Contract)이 코드에 명확히 드러나고, 잘못된 사용은 컴파일 단계에서 바로 차단됩니다. Props 타입 정의의 기본가장 기본적인 Props 타입 정의는 객체 타..

• format_list_bulleted 개발/Typescript
• · 2025. 12. 31.
• textsms

[TYPESCRIPT] React + TypeScript 프로젝트 시작하기 — 실무에서 바로 쓰는 기본 세팅

React 프로젝트를 TypeScript로 시작하는 것은 이제 선택이 아니라 기본에 가깝습니다. 컴포넌트의 Props, 상태(State), 이벤트, API 응답까지 모든 흐름을 타입으로 고정할 수 있기 때문에 규모가 커질수록 유지보수성과 안정성 차이가 크게 벌어집니다.React + TypeScript 프로젝트를 처음 시작할 때 가장 많이 쓰이는 방식과 실무 기준 설정 포인트를 정리합니다. React + TypeScript를 쓰는 이유React에서 TypeScript를 사용하는 가장 큰 이유는 다음과 같습니다.Props 타입이 명확해 컴포넌트 사용 실수 감소상태 구조가 커져도 안정적으로 관리 가능리팩토링 시 컴파일 단계에서 오류 감지IDE 자동완성 및 탐색성 대폭 향상특히 팀 단위 개발이나 중·대형 프로젝..

• format_list_bulleted 개발/Typescript
• · 2025. 12. 30.
• textsms