1044 posts
코딩 테스트 합격을 위한 리트코드 핵심 문제 풀이

코딩 테스트 합격을 위한 리트코드 핵심 문제 풀이

코딩 테스트 준비, 막막하게 느껴지신 적 있으신가요? 🤔 저도 처음엔 리트코드 문제를 무작정 풀고, 정답을 외우는 식으로 비효율적인 준비를 했던 경험이 있습니다. 문제를 아무리 많이 풀어도 새로운 문제가 나오면 막막해지고, 면접에서 "왜 이렇게 풀었나요?"라는 질문에 제대로 대답하지 못했던 적도 있었죠. 심지어 분명히 풀어본 문제인데도 시간이 지나면 어떻게 풀었는지 기억이 안 나는 경우도 많았습니다. 18년 넘게 개발자로 일하면서 한국 대기업에서 아마존, 그리고 실리콘밸리 스타트업까지 이직할 때마다 수많은 코딩 테스트를 직접 겪어

Pi Durable로 중단돼도 이어서 일하는 AI 에이전트 만들기

Pi Durable로 중단돼도 이어서 일하는 AI 에이전트 만들기

AI 에이전트를 서버에서 돌려 본 적이 있나요? 에이전트가 모델과 몇 번씩 주고받으며 도구를 부르는 동안 배포가 나가거나 프로세스가 메모리 부족으로 죽으면, 하던 일이 통째로 사라집니다. 어디까지 진행했는지도 알 수 없으니 처음부터 다시 시켜야 하죠. 도구가 데이터베이스를 바꾸는 중이었다면 더 곤란합니다. 😅 터미널에서 사람이 지켜보는 코딩 에이전트라면 다시 시키면 그만이지만, 몇 시간씩 도는 작업이나 여러 사람이 함께 쓰는 봇이라면 이야기가 달라요. Pi를 만든 Earendil이 내놓은 Pi Durable은 바로 이 문제를 겨냥

TanStack Redact로 코드 수정 없이 React 번들 줄이기

TanStack Redact로 코드 수정 없이 React 번들 줄이기

React로 만든 앱의 번들 분석 결과를 열어 보신 적 있나요? 버튼 하나 있는 화면인데도 자바스크립트가 수십 KB씩 내려가는 걸 보면 조금 허탈해지는데요. 그 대부분은 우리가 쓴 코드가 아니라 React DOM이 차지하고 있습니다. TanStack이 2026년 10월 26일 이 문제를 정면으로 겨냥한 TanStack Redact를 발표했습니다. 앱 코드는 한 줄도 건드리지 않고 빌드 설정만 바꿔서 React 대신 더 작은 런타임을 브라우저로 보내는 도구인데요. 이번 포스팅에서는 Redact가 어떻게 동작하는지, 실제로 얼마나 줄어

mirroir-mcp로 AI 에이전트에게 내 아이폰 맡기기

mirroir-mcp로 AI 에이전트에게 내 아이폰 맡기기

AI 에이전트에게 웹 브라우저나 맥 앱을 맡기는 일은 이제 꽤 익숙해졌는데요. 아이폰은 여전히 손이 닿지 않는 곳이었습니다. 내가 만든 앱을 실제 기기에서 눌러 보거나, 폰에만 있는 앱에서 정보를 꺼내 오려면 결국 직접 폰을 집어 들어야 했죠. 📱 iOS 자동화 도구가 없었던 건 아닙니다. 다만 Appium 같은 도구는 Xcode로 WebDriverAgent를 기기에 설치하고 개발자 모드를 켜야 해서, 앱 개발자가 아니면 시도하기도 어렵습니다. 그런데 macOS 15부터 들어간 아이폰 미러링(iPhone Mirroring) 덕분에

Paseo로 여러 코딩 에이전트를 폰과 데스크톱에서 다루기

Paseo로 여러 코딩 에이전트를 폰과 데스크톱에서 다루기

요즘 코딩 에이전트를 하나만 쓰는 분은 드물 것 같은데요. 계획은 Claude Code에게 세우게 하고, 구현은 Codex에게 맡기고, 가끔은 OpenCode로 다른 모델을 써 보기도 합니다. 그러다 보면 터미널 창이 서너 개씩 열리고, 어느 에이전트가 권한 승인을 기다리며 멈춰 있는지 일일이 확인하게 되죠. 😅 자리를 비우면 더 곤란합니다. 클로드 코드 원격 제어를 쓰면 폰에서 세션을 이어 가지만, 어디까지나 Claude Code 세션 이야기예요. Codex는 Codex대로, OpenCode는 OpenCode대로 따로 챙겨야 합

HTML-in-Canvas로 캔버스 안에 진짜 HTML 그리기

HTML-in-Canvas로 캔버스 안에 진짜 HTML 그리기

캔버스로 화면을 그려 본 분이라면 한 번쯤 이런 고민을 해 보셨을 텐데요. 게임 화면 안에 입력 폼을 넣고 싶은데, 캔버스에 fillText()로 그린 글자는 선택도, 복사도, 검색도 안 됩니다. 🤔 캔버스 기초 글에서 살펴봤듯이 캔버스에 그린 건 결국 픽셀일 뿐이라서, 브라우저가 HTML에 공짜로 얹어 주던 기능을 전부 잃게 되거든요. Chrome 157에 정식으로 들어온 HTML-in-Canvas API는 이 문제를 정면으로 풉니다. 진짜 HTML 요소를 캔버스 안에 그리면서도 선택, 검색, 클릭, 접근성이 그대로 동작합니다.

새로운 세대에게 AI 시대에 맞는 소통 방식을 배우는 중입니다

새로운 세대에게 AI 시대에 맞는 소통 방식을 배우는 중입니다

2022~2023년에 대학 새내기였던 어린 친구들이 작년부터 하나둘 사회에 첫발을 내딛고 있습니다. 대학 생활의 처음부터 끝까지 AI와 함께한, 말 그대로 ChatGPT 세대죠. 이 친구들과 함께 일하다 보면 그전 세대와는 확실히 다르다는 걸 느낄 때가 많습니다. 가장 두드러지는 점은 AI 도구를 기가 막히게 잘 쓴다는 겁니다. AI를 쓰는 보법이 완전히 다르다고 할까요? 코딩은 말할 것도 없고, 어떤 일이 주어지든 우선적으로 AI로 해결할 수 있는지부터 따져 보는 것 같더라고요. 저는 직접 하기에는 제 시간이 아깝거나 혼자서 해내

컴퓨터 사용(Computer Use)

컴퓨터 사용(Computer Use)

요즘 에이전트 하네스(agent harness)의 설정 화면을 열어 보면 "컴퓨터 사용(Computer Use)"이라는 항목이 거의 빠지지 않는데요. 클로드 코드에도, Claude 데스크톱 앱에도, AI 브라우저 Aside에도 있고, OpenAI의 Codex도 맥을 백그라운드에서 조작하는 기능을 내놓았습니다. 켜 두면 에이전트가 사람처럼 화면을 보면서 클릭하고 타이핑한다고 하는데, 정작 그 안에서 무슨 일이 벌어지는지는 잘 드러나지 않습니다. 🤔 AI가 정말 우리 화면을 "보는" 걸까요? 클릭할 위치는 어떻게 알아낼까요? 그리고

Cloudflare Turnstile로 캡차 없이 폼 스팸 봇 막기

Cloudflare Turnstile로 캡차 없이 폼 스팸 봇 막기

웹사이트에 문의 폼이나 회원가입 폼을 열어 두면 얼마 안 가 이상한 메시지가 쌓이기 시작합니다. 광고 링크로 가득한 문의, 존재하지 않는 이메일로 만든 계정 수백 개 같은 것들이죠. 사람이 아니라 봇이 폼을 두드리고 있는 겁니다. 😩 이럴 때 흔히 떠올리는 해결책이 캡차(CAPTCHA)입니다. 그런데 "신호등이 있는 칸을 모두 고르세요" 같은 퍼즐은 사람에게도 귀찮습니다. 한 번에 통과하지 못하면 짜증이 나서 폼을 그냥 닫아 버리는 사용자도 생기고요. 봇을 막으려다 진짜 사용자를 놓치는 셈입니다. Cloudflare Turnsti

TanStack DB로 라이브 쿼리와 낙관적 업데이트 구현하기

TanStack DB로 라이브 쿼리와 낙관적 업데이트 구현하기

TanStack Query로 서버 데이터를 다루다 보면 어느 순간 비슷한 고민이 생깁니다. 할 일 목록 화면에서는 미완료 항목만, 대시보드에서는 담당자별로 묶어서, 상세 화면에서는 하나만 보여 줘야 하는데요. 화면마다 엔드포인트를 새로 만들자니 백엔드가 늘어나고, 전부 받아서 컴포넌트에서 거르자니 useMemo()가 여기저기 흩어집니다. 게다가 체크박스 하나를 낙관적으로 바꾸려고 onMutate, cancelQueries, setQueryData, onError에서의 롤백(rollback)까지 매번 써야 하죠. 😅 TanStack

OpenAI Decisions API: 확률과 선택지로 답하는 판단 전용 API

OpenAI Decisions API: 확률과 선택지로 답하는 판단 전용 API

LLM으로 문의 메일을 분류하거나 댓글이 스팸인지 걸러 본 적이 있으신가요? 보통은 프롬프트 끝에 "billing, technical, shipping 중 하나로만 답해"라고 적고, 돌아온 텍스트를 다듬어 if문에 넣죠. 그런데 이렇게 하면 모델이 가끔 Billing.처럼 마침표를 붙이거나 이유를 길게 덧붙이고, 무엇보다 그 답을 얼마나 확신하는지 알 수가 없습니다. 🤔 OpenAI가 2026년 10월 22일 정식 출시(GA)한 Decisions API는 바로 이 문제를 겨냥합니다. 자유로운 텍스트 대신 확률, 선택지, 점수처럼

컨트롤 플레인과 데이터 플레인

컨트롤 플레인과 데이터 플레인

시스템 설계를 다루는 글을 읽다 보면 컨트롤 플레인(control plane)과 데이터 플레인(data plane)이라는 말이 늘 짝을 지어 나옵니다. 시스템을 둘로 나눈다는 이야기인 건 알겠는데, 정확히 무엇을 기준으로 나누는 건지 물으면 선뜻 답하기 어렵죠. 특히 웹 서비스를 만들며 시스템을 프론트엔드와 백엔드로만 나눠 보던 분이라면 더 낯설게 느껴질 겁니다. 그런데 이 구분은 그 익숙한 나누기와 전혀 다른 방향으로 시스템을 자르는 칼이에요. 한 번 익혀 두면 매일 만지는 백엔드 코드도 다르게 보이기 시작합니다. 이번 글에서는

FSearch: 맥 디스크 전체를 미리 색인해 두는 검색 도구

FSearch: 맥 디스크 전체를 미리 색인해 두는 검색 도구

ripgrep과 fd를 쓰기 시작하면 grep이나 find로는 돌아가기 어려운데요. 그래도 검색 범위를 홈 디렉터리 전체로 넓히면 이 둘도 몇 초씩 걸립니다. 매번 디스크를 처음부터 다시 훑기 때문이죠. 사람이야 1초쯤 기다려도 되지만, 코딩 에이전트는 작업 하나에 검색을 수십 번 돌리니 이 시간이 그대로 쌓입니다 😅 FSearch는 이 문제를 "미리 색인해 두기"로 풉니다. 상주하는 데몬(daemon)이 디스크 전체의 파일 이름과 텍스트 파일 내용을 색인해 두고, 파일이 바뀌면 그 부분만 바로 갱신합니다. 그래서 수백만 개 파일

파이썬 3.15 lazy import로 프로그램 시작 시간 줄이기

파이썬 3.15 lazy import로 프로그램 시작 시간 줄이기

파이썬으로 만든 CLI 도구에서 --version만 찍어 봐도 묘하게 굼뜬 느낌을 받은 적 없으신가요? 🤔 버전 문자열 하나 출력하는 데 쓰지도 않을 asyncio나 urllib.request 같은 모듈까지 전부 불러오고 있기 때문인데요. 파이썬의 import 문은 실행되는 순간 모듈을 찾아서 끝까지 실행하기 때문에, 파일 맨 위에 적어 둔 모듈은 쓰든 안 쓰든 시작할 때 모두 비용을 치릅니다. 그래서 지금까지는 무거운 모듈을 함수 안에서 import하는 꼼수를 많이 써 왔습니다. 실제로 파이썬 표준 라이브러리에서도 테스트를 뺀

_redirects: 정적 사이트에서 리디렉션 규칙 관리하기

_redirects: 정적 사이트에서 리디렉션 규칙 관리하기

블로그 글의 주소를 바꾸거나 문서 사이트의 폴더 구조를 정리하고 나면 꼭 이런 일이 생기는데요. 예전에 SNS나 다른 블로그에 공유된 옛 주소로 들어온 사람들이 모두 404 페이지를 보게 됩니다. 😅 게다가 검색 엔진이 옛 주소에 쌓아 둔 신호도 새 주소로 넘어가지 못합니다. 이럴 때 필요한 게 리디렉션(redirect) 규칙입니다. 서버를 직접 운영한다면 서버 코드에서 처리하면 되지만, 정적 사이트는 이야기가 다른데요. 이 글에서는 정적 사이트에서 리디렉션 규칙을 어디에 어떻게 적는지, 호스팅 플랫폼별 문법과 흔히 빠지는 함정을

👋 GPT-4를 떠나보내며...

👋 GPT-4를 떠나보내며...

어제 OpenAI에서 이메일 한 통이 날아왔습니다. GPT-4o, GPT-4o mini, GPT-4.1, GPT-4.1 mini 등 GPT-4 계열 모델들이 2027년 1월부로 서비스를 종료한다는 소식이었는데요. 이제 3개월밖에 남지 않았으니, 아직 해당 모델을 사용하고 있다면 다른 모델로 교체해야 합니다. 그래서 여러 프로젝트에서 사용하던 GPT-4 계열 모델들을 최신 모델로 교체하기 시작했습니다. 신모델들은 성능이 뛰어나고 가격까지 싸져서 굳이 예전 모델을 고집할 이유가 없기도 하죠. 그런데 막상 모델을 교체하려니 조금 섭섭한

Rust 크레이트 crates.io 배포하기

Rust 크레이트 crates.io 배포하기

회사에서 Rust로 만든 오픈소스 애플리케이션을 하나 관리하고 있는데요. 라이브러리가 아니라 실행 파일이라서 그동안 바이너리와 Docker 이미지로만 배포해 왔어요. 그런데 어느 날 이런 이슈가 올라왔습니다. 많은 회사가 규정상 crates.io 미러에 있는 패키지만 받아서 소스로 빌드해야 합니다. git 소스로만 공개된 패키지는 아예 쓸 수가 없어요. 생각해 보니 맞는 말이었습니다. 보안 규정이 엄격한 조직일수록 외부 바이너리를 그대로 들이지 않고 사내 레지스트리(registry)에 미러링한 크레이트(crate)만 빌드에 쓰게 하

Codex 코드 리뷰: PR을 AI에게 리뷰받기

Codex 코드 리뷰: PR을 AI에게 리뷰받기

동료가 올린 풀 리퀘스트(pull request, 이하 PR)를 꼼꼼히 리뷰하고 싶어도 하루에 몇 개씩 쌓이면 대충 훑고 승인하게 되는데요. 그러다 놓친 실수가 배포 후에 터지면 "그때 좀 더 볼걸" 하는 후회가 남습니다. 😅 OpenAI의 Codex에는 GitHub PR을 대신 리뷰해 주는 기능이 있습니다. PR에 @codex review라고 댓글을 달면 Codex가 변경 사항을 읽고 일반 GitHub 리뷰처럼 줄 단위로 의견을 남겨 주죠. 저도 이번에 운영하는 오픈소스 저장소 몇 곳에 이 기능을 연결했는데요. 이 글에서는 실제

Helix: 설정 없이 바로 쓰는 터미널 코드 에디터

Helix: 설정 없이 바로 쓰는 터미널 코드 에디터

NeoVim을 제대로 써 보겠다고 마음먹은 날을 떠올려 보면, 코드를 짠 시간보다 init.lua를 고친 시간이 더 길었던 것 같은데요. 플러그인 매니저를 고르고, 언어 서버(language server)를 붙이고, 구문 강조(syntax highlighting) 플러그인을 설치하다 보면 하루가 금방 갑니다. 그래서 LazyVim 같은 배포판이 인기를 끌기도 했고요. 그런데 처음부터 그 모든 걸 품고 나오는 에디터가 있다면 어떨까요? 오늘 소개할 Helix가 바로 그런 에디터입니다. 설치하고 파일을 열면 구문 강조, 자동 완성, 정

Stack Overflow 2026 개발자 설문: AI 시대 개발자의 현주소

Stack Overflow 2026 개발자 설문: AI 시대 개발자의 현주소

State of JS가 자바스크립트 개발자들의 연례 행사라면, 언어와 분야를 가리지 않고 전 세계 개발자들이 함께 챙겨보는 설문이 있는데요. 바로 Stack Overflow 개발자 설문(Developer Survey)입니다. 올해로 16번째인 이번 설문은 2026년 6월 23일부터 8월 5일까지 진행됐고, 169개 나라에서 30,903명의 응답을 모았습니다. Stack Overflow는 올해 설문을 한 문장으로 요약했는데요. "How are you doing?", 우리말로 하면 "요즘 어떻게 지내세요?"입니다. 기술 순위표만 나열하

Discord