Home | ari Space

프론트엔드 개발자 ari의 기술 기록 공간입니다.

특히 프론트엔드 인증·보안을 깊이 다룹니다. HttpOnly 쿠키 하이브리드 인증을 실제 서비스에 1년 4개월 운영한 경험을 바탕으로, 토큰 저장 전략·SameSite Lax 한계·Refresh Token Rotation·CSRF까지 정리합니다.

Featured

Security 시리즈 →

HttpOnly 하이브리드 인증·SameSite Lax 한계·Refresh Rotation·CSRF — 한국어로 정리된 프론트엔드 인증·보안 자료 4편을 한 곳에서.

Knowledge

JavaScript Weekly와 안드레이 카파시, OpenClaw, OpenAI, Anthropic, React, Next.js 관련 최신 글을 자동으로 수집해 정리합니다. 직접 정리한 글도 함께 포함됩니다.

AI
Canadian Ai Research

Canadian Ai Research에서 드러난 운영 변화와 실행 포인트를 한국어로 정리한 글

갱신일 July 18, 2026
AI
A scorecard for the AI age

Sarah Friar, CFO of OpenAI, introduces a practical AI scorecard to measure ROI through useful work, cost per successf...

갱신일 July 18, 2026
AI
Claude For Creative Work

Claude For Creative Work에서 드러난 운영 변화와 실행 포인트를 한국어로 정리한 글

갱신일 July 14, 2026

Blog posts

AI 도구를 프론트엔드 MVP 개발 흐름에 넣어본 기록

later-you-said와 Emova를 만들며 AI 도구를 프론트엔드 MVP의 기획, 구현, 리팩토링, 제품 지표 확인 흐름에 넣어본 경험을 정리합니다.

May 23, 2026
15 min read

ai product frontend retrospective
"다시 한다면 어떻게 할까" — 인증 아키텍처 회고와 개선안

HttpOnly 쿠키 하이브리드 인증 구조를 운영하면서 아쉬웠던 결정들을 돌아보고, 백엔드 직접 Set-Cookie 회귀, CSP 1일차 도입, Refresh Token Rotation, 쿠키 Path/Prefix 보수화, 인증 활동 로깅까지 다음에 다시 한다면 바꿀 다섯 가지를 정리합니다.

May 12, 2026
19 min read

frontend security authentication
인증 아키텍처에서 가장 헷갈렸던 다섯 지점 — 토큰 위치, 토큰 관리 분산, HttpOnly, SameSite Lax, CSRF 논증

1편·2편을 쓰면서 실제로 가장 시간이 많이 든 다섯 지점을 따로 정리합니다. 토큰 저장 위치 결정, 로그인-갱신의 토큰 관리가 두 레이어로 나뉜 구조 정당화, HttpOnly의 진짜 보호 범위, SameSite Lax의 안전 신화, CSRF "성립하지 않음" 논증의 어려움까지.

April 15, 2026
9 min read

frontend security authentication
"HttpOnly만 믿으면 안 된다" — XSS 활성 상태와 SameSite Lax의 한계

HttpOnly 쿠키가 XSS 활성 상태에서도 토큰을 완전히 지켜주지 못하는 시나리오, SameSite Lax의 세 가지 구조적 한계, CSP·Refresh Token Rotation·rate limit 같은 추가 대응책을 정리합니다.

March 18, 2026
8 min read

frontend security authentication
"토큰을 어디에 저장할까" — localStorage, 서버 세션, HttpOnly 쿠키 하이브리드 비교

localStorage, 서버 세션, HttpOnly 쿠키 하이브리드 세 가지 토큰 저장 전략을 비교하고, refreshToken만 HttpOnly 쿠키로 보호하는 하이브리드 구조를 채택한 의사결정 과정과 인증 플로우를 정리합니다.

February 24, 2026
11 min read

frontend security authentication
AI 이미지 생성 서비스에서 폴링 대신 웹훅을 선택한 이유

AI 이미지 생성 서비스에서 클라이언트 폴링의 성능 한계를 겪고, 웹소켓 대신 웹훅을 선택한 기술적 이유와 구현 과정. Next.js API Routes 기반 웹훅 + 폴링 Fallback 구조까지의 설계 과정을 정리했습니다.

January 10, 2026
5 min read

webhook polling nextjs frontend
내 할 일이 많을수록 매뉴얼이 필요하다.

피자집 알바를 하며 반복되는 비효율을 발견하고, 노션 매뉴얼과 POP 광고물을 직접 만들어 현장을 개선한 경험. 개발자의 문서화 역량이 어떤 현장에서든 통한다는 것을 체감한 이야기입니다.

September 6, 2025
3 min read

documentation career

Security 시리즈 →

Knowledge

Canadian Ai Research

A scorecard for the AI age

Claude For Creative Work

Blog posts

AI 도구를 프론트엔드 MVP 개발 흐름에 넣어본 기록

"다시 한다면 어떻게 할까" — 인증 아키텍처 회고와 개선안

인증 아키텍처에서 가장 헷갈렸던 다섯 지점 — 토큰 위치, 토큰 관리 분산, HttpOnly, SameSite Lax, CSRF 논증

"HttpOnly만 믿으면 안 된다" — XSS 활성 상태와 SameSite Lax의 한계

"토큰을 어디에 저장할까" — localStorage, 서버 세션, HttpOnly 쿠키 하이브리드 비교

AI 이미지 생성 서비스에서 폴링 대신 웹훅을 선택한 이유

내 할 일이 많을수록 매뉴얼이 필요하다.