994 posts
Web Crypto API로 브라우저에서 암호화 다루기

Web Crypto API로 브라우저에서 암호화 다루기

자바스크립트로 무언가를 만들다 보면 의외로 자주 마주치는 순간이 있습니다. 세션 토큰을 만들거나, 비밀번호를 해시하거나, 파일 무결성을 검증하거나, 쿠키에 서명을 넣어야 할 때인데요. 예전 같으면 별도의 라이브러리를 깔아야 했지만, 요즘은 브라우저와 서버 런타임 모두 이런 일을 표준 API로 해낼 수 있습니다. 바로 Web Crypto API입니다. 이 글에서 Web Crypto API의 사용법을 먼저 다루지만, 그 뒤에 깔린 대칭키와 비대칭키 암호화의 원리가 궁금하다면 별도 글에서 따로 풀어 두었습니다. 이름만 들으면 브라우저 전

헷갈리는 Upstream과 Downstream

헷갈리는 Upstream과 Downstream

소프트웨어 문서를 읽다 보면 "upstream 서버에 장애가 났다", "downstream consumer가 영향을 받는다" 같은 표현이 수시로 튀어나오는데요. 그때마다 "그래서 어느 쪽이 어느 쪽이지?" 하며 잠깐 멈칫한 경험, 저만 있는 건 아닐 거예요. nginx 설정의 upstream 블록, dbt의 downstream 모델, Debian/Ubuntu의 계보처럼 결이 완전히 다른 자리에서 같은 단어가 쏟아지니 한 번에 감을 잡기가 쉽지 않습니다. 이 글은 그 혼란의 뿌리를 짚어보고, 실무에서 두 용어가 쓰이는 대표 쓰임새를

Cloudflare Images Transformations으로 이미지 최적화를 엣지에 맡기기

Cloudflare Images Transformations으로 이미지 최적화를 엣지에 맡기기

블로그나 커머스 사이트를 운영해 보신 분이라면 이미지 때문에 골머리를 앓아본 경험이 한 번쯤 있으실 텐데요. 원본은 4000픽셀짜리인데 썸네일은 300픽셀이면 충분하고, 어떤 브라우저는 AVIF를 좋아하는데 어떤 브라우저는 WebP만 받아먹고, 심지어 같은 이미지를 카드용과 히어로용으로 다르게 잘라야 하는 경우도 있죠. 😅 예전에는 이런 작업을 하려면 Sharp 같은 라이브러리로 직접 변환 파이프라인을 짜거나, imgix 같은 별도의 이미지 CDN을 붙이는 게 일반적이었는데요. Cloudflare는 조금 다른 접근을 제안합니다.

MCP Authentication: OAuth 2.1 기반 인증 제대로 이해하기

MCP Authentication: OAuth 2.1 기반 인증 제대로 이해하기

MCP 서버를 직접 만들어 보신 적 있으신가요? 처음에는 로컬에서 STDIO로 붙여서 쓰다가, 원격으로 배포하려는 순간 고민이 시작되는데요. "아무나 내 MCP 서버를 호출하면 안 되는데, 누가 접근할 수 있는지 어떻게 가리지?"라는 질문이 떠오르거든요 🤔 이 질문에 대한 공식 답변이 바로 MCP 스펙의 Authorization 섹션입니다. 2025년 11월 25일 개정판에서는 OAuth 2.1을 기반으로 여러 RFC를 조합한 인증 방식을 정리했는데요. 얼핏 보면 OAuth 2.1, RFC 7591, RFC 8414, RFC 87

Claude Design 사용법: 디자인 시스템부터 Claude Code 연동까지

Claude Design 사용법: 디자인 시스템부터 Claude Code 연동까지

컨퍼런스 발표가 잡혔습니다. 할 이야기는 머릿속에 다 있는데 슬라이드를 열면 흰 화면에 글머리 기호만 늘어나고, 코드 블록 하나 보기 좋게 넣는 데 30분이 갑니다. 발표 전날 밤까지 디자인과 씨름하다 정작 리허설은 못 하죠 😅 2026년 4월 17일 Anthropic이 공개한 Claude Design은 이런 시각 작업을 Claude와 대화하며 처리하는 도구입니다. 발표 자료와 프로토타입을 빠르게 만드는 것은 물론, 디자인 시스템을 조직 단위로 관리하고, 코드에 있는 실제 컴포넌트를 Claude Code로 동기화하고, 완성한 디자

Cloudflare Access로 내부 애플리케이션에 Zero Trust 적용하기

Cloudflare Access로 내부 애플리케이션에 Zero Trust 적용하기

회사 내부용 대시보드나 관리자 페이지를 외부에 공개해야 할 때 어떻게 하시나요? 사내 VPN으로 감싸자니 외부 협업자에게 계정을 만들어 줘야 하고, IP 화이트리스트로 막자니 재택근무 환경에서 자꾸 IP가 바뀌어 곤란하죠. 그렇다고 아예 공개 URL로 두고 로그인 화면을 직접 구현하자니 인증 로직을 매번 새로 붙여야 하니 배보다 배꼽이 더 큽니다 😅 Cloudflare Access는 이런 고민을 엣지에서 해결해 주는 ZTNA(Zero Trust Network Access) 서비스입니다. 원본 애플리케이션에 손대지 않고도 요청이 C

Rolldown, Rust로 다시 쓴 Rollup 알아보기

Rolldown, Rust로 다시 쓴 Rollup 알아보기

Rollup은 이미 잘 만들어진 번들러인데, 왜 갑자기 이름이 비슷한 Rolldown이라는 도구가 등장했을까요? 🤔 게다가 Vite는 8 버전부터 오랫동안 써 온 Rollup을 두고 이 Rolldown을 기본 번들러로 채택했습니다. 멀쩡히 돌아가던 도구를 갈아엎은 데는 그만한 이유가 있겠죠. 최근 JavaScript 도구들이 하나둘 Rust로 다시 작성되는 흐름 위에 Rolldown도 놓여 있습니다. SWC가 Babel을, Oxc가 ESLint를 겨냥했다면, Rolldown은 Rollup의 자리를 노립니다. 이번 글에서는 Roll

Obsidian CLI 사용법: 터미널에서 내 볼트를 다루는 법

Obsidian CLI 사용법: 터미널에서 내 볼트를 다루는 법

터미널에서 살다시피 하는 개발자라면 한 번쯤 생각해봤을 거예요. "Obsidian 볼트를 커맨드라인에서 다룰 수 없을까?" 노트를 쓰려면 매번 Obsidian 앱으로 전환해야 하고, 자동화하고 싶어도 마땅한 방법이 없었으니까요. 커뮤니티 도구가 이 빈자리를 채워왔지만 2026년 2월 Obsidian 1.12 버전에서 공식 CLI가 등장했습니다. "Obsidian에서 할 수 있는 건 뭐든 커맨드라인으로도 할 수 있다"는 기치를 내세우며요. 이 글에서는 Obsidian CLI의 설치부터 자주 쓰는 명령어와 셸 스크립트 자동화, AI 에

TanStack AI: 프레임워크에 종속되지 않는 AI SDK

TanStack AI: 프레임워크에 종속되지 않는 AI SDK

AI 기능을 웹 앱에 붙이는 일이 요즘 정말 흔해졌습니다. 채팅 인터페이스를 만들거나, LLM에게 도구를 쥐여주거나, 스트리밍 응답을 화면에 뿌리거나. 그런데 막상 시작하면 고민이 생깁니다. OpenAI를 쓸지 Anthropic을 쓸지, React인지 Vue인지, Next.js인지 다른 프레임워크인지에 따라 코드가 전부 달라지거든요. TanStack Query와 TanStack Router로 유명한 TanStack 생태계에서 이 문제를 해결하려고 나온 게 바로 TanStack AI입니다. 스스로를 "AI 도구의 스위스"라고 소개할

MCPJam으로 MCP 서버 테스트하기

MCPJam으로 MCP 서버 테스트하기

MCP 서버를 만들어 보신 적 있으신가요? 도구(tool)를 정의하고 JSON-RPC 메시지를 주고받는 코드를 작성하고 나면... 이게 제대로 동작하는지 어떻게 확인하셨나요? 🤔 Claude나 ChatGPT에 직접 연결해서 테스트하다 보면 문제가 생겼을 때 원인 파악이 어렵습니다. LLM이 도구를 엉뚱하게 호출한 건지, 서버가 잘못된 응답을 보낸 건지, 전송 계층 문제인지 구분이 안 되거든요. 게다가 같은 서버라도 Claude에서는 잘 되는데 ChatGPT나 Cursor에서는 이상하게 동작하는 일도 흔합니다. Postman으로 R

gh stack으로 PR 쌓아 올리기

gh stack으로 PR 쌓아 올리기

PR 하나에 파일 30개가 바뀌고 코드가 2,000줄 넘게 추가된 걸 리뷰해달라고 받아본 적 있으신가요? 😅 리뷰어 입장에서는 어디서부터 봐야 할지 막막하고, 작성자 입장에서는 피드백을 기다리는 시간이 길어지죠. "PR은 작게 만들어라"라는 원칙은 누구나 알고 있지만 실제로 지키기가 쉽지 않습니다. 큰 기능을 구현하다 보면 인증 레이어, API 엔드포인트, 프론트엔드 화면이 서로 물려 있어서 하나만 떼어내기 어렵거든요. 억지로 쪼개봤자 의존하는 브랜치끼리 rebase를 수동으로 맞추느라 시간을 허비하게 됩니다. 이 문제를 해결하기

ripgrep(rg) 사용법: grep보다 빠르고 스마트한 검색 도구

ripgrep(rg) 사용법: grep보다 빠르고 스마트한 검색 도구

이전 글에서 grep의 기본기를 살펴봤는데요. grep이 50년 넘게 살아남은 검증된 도구인 건 맞지만, 요즘 코드베이스를 다루다 보면 살짝 아쉬운 부분이 있습니다. node_modules를 빼먹으면 결과가 쏟아지고, .gitignore에 있는 파일까지 뒤지고, 바이너리 파일도 가리지 않죠 😅 ripgrep(rg)은 이런 불편함을 해결하기 위해 만들어진 검색 도구입니다. fd의 핵심 라이브러리를 만든 Andrew Gallant(BurntSushi)가 Rust로 개발했고, grep보다 훨씬 빠르면서도 개발자에게 친화적인 기본값을 가

과연 AI가 개발자 일자리를 없애고 있을까요?

과연 AI가 개발자 일자리를 없애고 있을까요?

과연 AI가 개발자 일자리를 없애고 있을까요? 🤔 요즘 미디어를 보면 AI 때문에 개발자가 사라질 거라는 이야기들이 참 많이 들리죠? 그래서 그런지 주변에도 AI로 대체될까 봐 걱정하시는 개발자 분들이 참 많은 것 같아요. 그런데 현재 채용 데이터는 조금 다른 이야기를 하고 있습니다. 아래는 채용 데이터 분석 플랫폼 TrueUp에서 최근에 발표한 수치입니다. 소프트웨어 개발자 채용 공고 6만 7천 개 (3년 내 최고치) 2026년 들어서만 약 30% 증가 2023년 중반 저점 대비 무려 2배 이상 특히 흥미로운 점은 실리콘밸리 지

SSL 인증서 수동 관리 입문: 발급부터 설치, 갱신까지

SSL 인증서 수동 관리 입문: 발급부터 설치, 갱신까지

요즘은 HTTPS를 켜는 일이 너무 쉬워졌습니다. Cloudflare 뒤에 사이트를 두거나 Caddy로 서버를 띄우면 인증서라는 단어를 한 번도 마주치지 않고 자물쇠가 켜지는데요. 그러다 회사 사내 서버나 공유 호스팅처럼 자동화가 없는 환경을 만나면 갑자기 낯선 단어들이 쏟아집니다. CSR을 만들라고 하고, 파일이 세 개 오고, 중간 인증서를 붙이라고 하고, 만료 30일 전부터만 갱신이 된다고 합니다. 이 낯섦은 능력의 문제가 아니라 세대 차이입니다. Let's Encrypt 이전 시대에는 인증서가 자동으로 흐르는 인프라가 아니라

Open Collective로 오픈소스 프로젝트 투명하게 후원받기

Open Collective로 오픈소스 프로젝트 투명하게 후원받기

오픈소스 프로젝트를 운영하다 보면 서버비, 도메인 비용, 컨퍼런스 참가비 같은 현실적인 지출이 생기기 마련입니다. GitHub Sponsors처럼 개인 개발자에게 후원하는 방법도 있지만, 프로젝트 자체의 재정을 관리하려면 조금 다른 접근이 필요하죠. 후원금이 얼마나 들어왔고 어디에 썼는지를 투명하게 공개할 수 있다면 후원자도 안심하고 기여할 수 있을 텐데요. Open Collective가 바로 이 문제를 해결하기 위해 만들어진 플랫폼이에요. 이번 글에서는 Open Collective가 어떤 플랫폼인지, 어떻게 활용할 수 있는지 하나

A2A 프로토콜: AI 에이전트끼리 대화하는 표준

A2A 프로토콜: AI 에이전트끼리 대화하는 표준

AI 에이전트 하나만으로 모든 일을 처리할 수 있다면 좋겠지만, 현실은 그리 단순하지 않습니다. 기업 환경에서는 채용 담당 에이전트, 일정 관리 에이전트, 데이터 분석 에이전트처럼 각자 전문 분야가 다른 에이전트들이 따로 돌아가고 있는 경우가 많거든요. 문제는 이 에이전트들이 서로 다른 프레임워크로 만들어져서 직접 대화할 방법이 없다는 겁니다. 바로 이 문제를 해결하기 위해 Google이 내놓은 것이 A2A(Agent-to-Agent) 프로토콜입니다. 이름 그대로 AI 에이전트 간의 통신을 표준화하는 오픈 프로토콜인데요. 이 글에서

Void: Vite 네이티브 배포 플랫폼

Void: Vite 네이티브 배포 플랫폼

Vite+가 로컬 개발 도구를 하나로 통합했다면, 이번에는 배포까지 먹으러 왔습니다. VoidZero가 내놓은 Void는 Vite 앱에 플러그인 하나를 추가하고 void deploy 한 방이면 데이터베이스, 인증, KV 스토리지, 큐까지 갖춘 풀스택 애플리케이션이 Cloudflare Workers 위에 올라가는 배포 플랫폼입니다. "자바스크립트에 드디어 Rails 순간이 온 건가, 아니면 그냥 Cloudflare 종속에 리본을 달아놓은 건가?" 궁금해서 Void가 뭘 하는 건지 직접 파헤쳐봤습니다. 2026년 9월에 나온 0.20

저 사람들 참 나약하다고 생각했습니다

저 사람들 참 나약하다고 생각했습니다

"저 사람들 참 나약하다" ❤️‍🩹 처음 캐나다에서 직장 생활을 시작했을 때, 마음이 아프다고 말하는 동료들을 보며 제가 했던 생각입니다. 불면증, 우울증, ADHD, PTSD... 병과 증상의 종류는 뭐가 이렇게 많은지. 제가 묻지도 않았는데 뭐가 자랑이라고 먼저 자신의 정신 건강 상태를 떳떳하게 설명하더군요. 어떤 인턴은 업무 중 발작이 올 수 있으니 놀라지 말아 달라고 미리 팀에 알리기도 했습니다. 처음에는 이런 분위기가 낯설고 당혹스러웠습니다. 그런데 한 가지 인상 깊었던 점이 있었습니다. 주변 동료들이 그런 상황을 매우

Cloudflare Containers로 엣지에서 컨테이너 실행하기

Cloudflare Containers로 엣지에서 컨테이너 실행하기

Cloudflare Workers를 써보신 분이라면 한 번쯤 이런 생각을 해보셨을 겁니다. "Workers는 정말 편한데, 내가 쓰는 Python 라이브러리나 FFmpeg 같은 도구는 못 쓰잖아…" 🤔 Workers는 V8 엔진 위에서 돌아가기 때문에 JavaScript와 WebAssembly만 실행할 수 있습니다. Go로 만든 CLI 도구를 돌리거나 Python 머신러닝 모델을 서빙하거나 영상 트랜스코딩을 하려면 결국 별도의 서버나 컨테이너 서비스가 필요했어요. Cloudflare Containers는 바로 이 틈을 메워줍니다.

Cloudflare Durable Objects로 상태 있는 서버리스 만들기

Cloudflare Durable Objects로 상태 있는 서버리스 만들기

Cloudflare Workers로 API를 만들다 보면 어느 순간 이런 벽에 부딪힙니다. "실시간 조회수를 세고 싶은데, 이 상태를 대체 어디에 둬야 하지?" 🤔 Workers는 무상태(stateless)입니다. 요청이 들어올 때마다 새로 뜨고 처리가 끝나면 사라지기 때문에, 요청과 요청 사이에 무언가를 기억하지 못합니다. 그래서 채팅방, 실시간 협업 문서, 온라인 게임 방, 조회수 카운터, 레이트 리미터처럼 "여러 요청이 같은 상태를 공유하고 조율해야 하는" 기능을 만들려고 하면 곧바로 막히게 됩니다. 그럼 Workers KV

Discord