AI 기능을 서비스에 넣으려면 OpenAI API 키를 발급받고 서버를 세팅하고 요청을 중계하는 백엔드까지 구성해야 하잖아요. 이 과정이 꽤 번거롭고 GPU 인프라를 직접 관리하는 건 비용도 만만치 않습니다 😅 Cloudflare Workers AI를 쓰면 별도의 GPU 인프라 없이 전 세계 엣지에서 AI 모델을 바로 실행할 수 있습니다. Cloudflare Workers에 코드 몇 줄만 추가하면 텍스트 생성, 이미지 생성, 번역, 음성 인식 같은 AI 기능을 서버리스로 제공할 수 있어요. 이번 글에서는 Workers AI의 기본
AI 에이전트에게 브라우저를 맡기는 시대가 점점 현실이 되고 있습니다. 이전에 Playwright MCP를 소개하면서 AI 에이전트가 MCP 서버를 통해 브라우저를 조작하는 방법을 다뤘는데요. 이번에는 좀 다른 접근 방식을 가져온 도구를 살펴보려고 합니다. Vercel Labs에서 만든 agent-browser는 AI 에이전트가 쉘 명령어만으로 브라우저를 제어할 수 있게 해주는 CLI 도구입니다. MCP 프로토콜이나 프로그래밍 언어에 종속되지 않고 터미널에서 바로 agent-browser open example.com처럼 실행할 수
2026년 2월 말, Cloudflare가 꽤 파격적인 프로젝트를 공개했습니다. 이름은 Vinext로, Next.js의 공개 API를 Vite 플러그인으로 재구현한 오픈소스 프로젝트인데요. Next.js를 포크한 게 아니라, Next.js가 제공하는 라우팅, 서버 렌더링, next/* 모듈 임포트, CLI 등의 API 표면을 Vite 생태계 위에서 처음부터 다시 만든 겁니다. "AI가 일주일 만에 만들었다"는 타이틀이 워낙 자극적이라 화제가 됐는데, 막상 내용을 들여다보면 기술적으로 꽤 흥미로운 지점이 많습니다. 이번 글에서는 Vi
자바스크립트로 날짜를 다뤄본 분이라면 한 번쯤은 Date 객체에 좌절해본 경험이 있을 텐데요. 월(month)이 0부터 시작하는 건 왜 그런 건지, 시간대 변환은 왜 이리 복잡한 건지, setDate()를 호출했더니 원본 객체가 변해버리는 건 또 뭔지... 🤦 그래서 moment.js나 date-fns, Day.js 같은 외부 라이브러리 없이는 날짜를 제대로 다루기 어려웠죠. 그런데 드디어 자바스크립트에 Temporal이라는 새로운 날짜/시간 API가 등장했습니다! State of JS 설문에서 "가장 기대하는 새 기능" 1위를
프론트엔드 프로젝트의 CSS 빌드 파이프라인을 생각하면 머리가 복잡해지곤 합니다. 벤더 프리픽스를 자동으로 붙여주는 Autoprefixer, 최신 CSS 문법을 변환해주는 postcss-preset-env, 결과물을 압축해주는 cssnano... 이 모든 걸 PostCSS 위에 플러그인 형태로 쌓아올리다 보면 설정 파일이 점점 길어지고 빌드 시간도 함께 느려지는 경험, 한 번쯤 해보셨을 겁니다. 이번 포스팅에서는 이 모든 기능을 하나의 도구에 통합하면서도 압도적인 성능을 자랑하는 Lightning CSS에 대해서 알아보겠습니다. L
자바스크립트 프로젝트를 세팅하다 보면 ESLint 설정하고, Prettier 설정하고, 둘이 충돌하지 않게 연동하고... 이런 과정이 꽤 번거롭죠? 거기에 Stylelint까지 더하면 설정 파일만 서너 개가 됩니다. 🤯 이런 불편함을 해결하려는 도구가 바로 Biome입니다. 포맷터와 린터를 하나의 도구로 합쳐서, 설정도 간단하고 속도도 빠른 올인원 웹 개발 도구를 표방하고 있는데요. 이번 글에서는 Biome이 어떤 도구인지, 어떻게 설치하고 사용하는지, 기존의 ESLint/Prettier와 비교하면 어떤 차이가 있는지 살펴보겠습니
매년 자바스크립트 개발자라면 한 번쯤 챙겨보게 되는 설문이 있는데요. 바로 State of JS입니다. 올해도 어김없이 결과가 공개됐고, 저는 이번에도 처음부터 끝까지 꼼꼼히 살펴봤습니다. 이 글에서는 설문 결과 중 지극히 개인적인 관점에서 흥미롭게 본 부분들을 골라서 제 나름의 방식으로 해석하여 공유드리겠습니다. 달레줄레 팟캐스트에서 State of JS 2025 설문 결과에 대한 에피소드도 올라왔으니 한번 들어보시면 재미있을 겁니다 😄 새 기능, 얼마나 쓰고 있나요? State of JS 설문에는 자바스크립트에 새로 추가된 기
버튼으로 "삭제" 같은 UI를 만들다 보면, 그 버튼을 아무나 누르면 곤란하다는 생각이 들죠. 봇을 운영하다 보면 "이 명령은 관리자만", "이 채널에서는 봇이 말을 못 하네?" 같은 권한 문제를 반드시 마주칩니다. 이번 글에서는 Discord의 권한 체계를 라이브러리 없이 제대로 이해해 봅니다. 권한은 비트 플래그다 Discord의 권한은 하나하나가 **비트(bit)**입니다. 메시지 보내기, 멤버 차단하기, 채널 관리하기 같은 각 권한이 2진수의 한 자리를 차지하고, 여러 권한을 가지면 그 비트들을 OR 연산(|)으로 합쳐 하나
웹 개발자라면 한 번쯤 "내가 만든 웹 앱을 데스크톱 앱으로 배포할 수 있으면 좋겠다"고 생각해 보신 적 있을 겁니다. Electron이 이 영역을 오랫동안 지배해 왔지만, 앱 하나에 Chromium 전체를 번들하다 보니 설치 파일이 100MB를 넘어가는 건 일상이었죠 😅 Tauri는 이 문제를 풀려고 만들어진 프레임워크입니다. 프론트엔드는 기존 웹 기술을 그대로 쓰되 백엔드를 Rust로 작성하고, OS의 네이티브 웹뷰를 활용해서 앱 크기를 수 MB 수준으로 줄여 줘요. 이번 글에서는 Tauri 2로 데스크톱 앱을 처음부터 만들어
"이거 간단한 계산기 하나만 만들어줘." Claude에게 이렇게 말했을 뿐인데, 화면 오른쪽에 진짜 동작하는 계산기가 나타났습니다. 버튼을 누르면 숫자가 입력되고, 사칙연산도 되고, C 버튼을 누르면 초기화까지 됩니다. 코드를 한 줄도 작성하지 않았는데 말이죠 🤔 이게 바로 Claude의 Artifacts 기능입니다. 그냥 대화를 나누면서 "이런 거 만들어줘"라고 하면 Claude가 실시간으로 코드를 생성하고 바로 실행 가능한 결과물을 보여줍니다. 이 글에서는 Artifacts가 정확히 무엇인지, 어떤 것들을 만들 수 있는지, 그
슬래시 커맨드로 사용자 입력을 받는 방법을 봤는데요. 사용자가 매번 명령어를 타이핑하는 대신 버튼을 누르거나 메뉴에서 고르게 하면 훨씬 편하겠죠. Discord의 메시지 컴포넌트가 바로 그걸 가능하게 합니다. 이번 글에서는 버튼, 셀렉트 메뉴, 입력 폼인 모달을 Discord 공식 문서처럼 라이브러리 없이 다뤄볼게요. 버튼이나 모달도 결국 슬래시 커맨드와 같은 인터랙션이라, 서버리스 봇 만들기에서 만든 HTTP 인터랙션 워커에 그대로 얹힙니다. 아래 코드는 모두 그 워커의 fetch 핸들러 안에서 돌아가는 코드예요. 서명 검증 뼈대
디스코드 봇을 만들어 서버에 초대하고 REST로 디스코드에 요청도 보내봤다면, 이제 반대로 사용자가 우리 앱을 부르는 쪽을 볼 차례입니다. /를 입력하면 뜨는 슬래시 커맨드가 대표적이죠. 그런데 슬래시 커맨드는 생각보다 깊어서, 옵션으로 입력을 받고, 시간이 걸리는 작업을 처리하고, 나만 볼 수 있는 답장을 보낼 수 있어요. 이번 글에서는 이걸 Discord 공식 문서처럼 라이브러리 없이 파헤쳐 봅니다. 커맨드 등록은 REST 요청으로, 사용자가 부를 때 받고 응답하는 건 서버리스 봇 만들기에서 만든 HTTP 인터랙션 워커에 얹어서
Vite로 프로젝트를 만들다 보면 @vitejs/plugin-react나 vite-plugin-svgr 같은 플러그인을 한두 개쯤은 꼭 설치하게 되는데요. vite.config.js의 plugins 배열에 함수 하나 넣었을 뿐인데 JSX가 변환되고, SVG가 컴포넌트로 바뀌고, 환경 변수가 주입됩니다. 도대체 이 플러그인이라는 게 안에서 무슨 일을 하길래 빌드 과정에 이렇게 자연스럽게 끼어들 수 있는 걸까요? 🤔 사실 Vite 플러그인은 생각보다 훨씬 단순한 구조로 되어 있습니다. 객체 하나에 약속된 이름의 함수 몇 개를 넣어주면
React로 폼을 만들어 본 적이 있다면 알 겁니다. 처음엔 useState()로 간단하게 시작하지만, 필드가 늘어나고 유효성 검사가 복잡해지면서 코드가 걷잡을 수 없이 커지는 경험 말이에요. React Hook Form이 이 문제를 꽤 잘 해결해줬지만, TypeScript와 궁합이 아쉬운 경우가 종종 있었습니다. TanStack Query로 서버 상태 관리를 혁신한 TanStack 팀이 이번엔 폼 관리에 도전장을 내밀었는데요. TanStack Form은 처음부터 TypeScript로 설계되어 필드 이름 하나까지 타입으로 잡아주고,
지난 포스팅에서 Node.js의 worker_threads 모듈을 통해 이제 자바스크립트에서도 멀티 쓰레딩이 가능하다는 것을 배웠는데요. 이번 포스팅에서는 워커 스레드 풀링(pooling)을 도와주는 라이브러리인 Piscina에 대해서 알아보겠습니다. Piscina란? 상용 애플리케이션을 개발할 때는 Node.js의 worker_threads 모듈을 그대로 쓰기는 곤란한 경우가 많은데요. 필요할 때 마다 매번 새로운 워커 스레드를 생성하면 서버에 부하를 주어 오히려 성능을 떨어뜨릴 수도 있죠. 그래서 스레드 풀(pool)을 사용하여
worker_threads는 싱글 스레드 언어로 알려진 자바스크립트로도 멀티 스레드 프로그래밍을 가능하게 해주는 Node.js의 내장 모듈입니다. 이번 포스팅에서는 worker_threads 모듈을 사용하여 어떻게 멀티 스레드 프로그래밍을 할 수 있는지 예제를 통해서 설명드리겠습니다. 싱글 스레드의 한계 자바스크립트는 태성적으로 하나의 스레드로 동작하는 여러 작업을 처리할 수 있는 비동기 프로그래밍 언어였는데요. 이러한 특징은 작은 하드웨어 리소스로 여러 개의 IO 작업을 동시에 처리하는데 유리했으며 특히 브라우저 환경에서 빛을 발
DOM API에는 많은 웹 개발자들을 헷갈리게 하는 3가지 속성이 있습니다. 바로 느낌이 비슷한 innerHTML, innerText, textContent인데요. 모두 HTML 요소의 내용을 접근할 때 사용하는 속성이지만 알고 보면 중요한 차이점이 있죠. 이번 포스팅에서는 이 알쏭달쏭한 HTML 요소의 3가지 속성에 대해서 알아보겠습니다. innerHTML 속성 innerHTML 속성은 HTML 요소 내부에 있는 HTML 코드를 있는 그대로 문자열 형태로 접근할 수 있도록 해줍니다. 예를 들어, 다음과 같이 3개의 <li> 요소로
개발 블로그나 기술 문서를 작성할 때 코드를 예쁘게 보여주는 것은 생각보다 중요한 문제입니다. 읽기 좋은 코드 하이라이팅은 독자가 내용을 빠르게 파악하는 데 큰 도움이 되기 때문이죠. 이번 포스팅에서는 VS Code와 동일한 문법 엔진을 사용해서 아름답고 정확한 코드 하이라이팅을 제공하는 Shiki에 대해서 알아보겠습니다. Shiki란? Shiki(式, 일본어로 "스타일"이라는 뜻)는 코드를 구문 강조(syntax highlighting)해주는 JavaScript 라이브러리입니다. VS Code에서 사용하는 것과 동일한 TextMa
서버리스 애플리케이션을 만들고 싶은데 AWS Lambda는 너무 복잡하고, 배포도 번거롭다고 느껴본 적 있으신가요? 🤔 Cloudflare Workers를 사용하면 간단한 자바스크립트 코드 몇 줄로 전 세계 300개 이상의 엣지 로케이션에서 실행되는 서버리스 함수를 만들 수 있습니다. 이번 포스팅에서는 Cloudflare Workers의 기본 개념부터 실제 배포까지 단계별로 알아보겠습니다. Cloudflare Workers란? Cloudflare Workers는 Cloudflare의 엣지 네트워크에서 실행되는 서버리스 플랫폼입니다
웹 애플리케이션을 개발하다 보면 "이거 진짜 브라우저에서도 잘 되나?" 하는 불안감이 들 때가 있죠. 단위 테스트로 함수 하나하나는 검증했지만, 사용자가 실제로 버튼을 클릭하고 페이지를 이동하고 폼을 제출하는 흐름까지 테스트하려면 별도의 도구가 필요합니다. 이런 종단간(End-to-End) 테스트를 위해 등장한 것이 바로 Playwright입니다. 이 글에서는 Playwright가 무엇인지 살펴보고, 설치부터 테스트 작성과 실행, 그리고 디버깅까지 E2E 테스트의 전체 흐름을 다뤄보겠습니다. Playwright란? Playwrigh