tag · 15 posts

#experience

코드가 깨끗해도 서버는 뚫립니다 - 2026년 웹 서비스 보안 사고와 관제의 기본
  • experience
  • develop
  • backend
  • frontend
  • devops
  • ai
  • security
  • php
  • nodejs
  • supplychain
  • cve
  • monitoring

코드가 깨끗해도 서버는 뚫립니다 - 2026년 웹 서비스 보안 사고와 관제의 기본

PHP2Shell과 Node.js Brotli 결함부터 React2Shell, Livewire, Axios·node-ipc 공급망 공격, 개발 서버의 비밀값 노출, Qwen 에이전트 사례까지 2025년 말부터 2026년까지의 주요 보안 사고를 공격 원리와 함께 정리합니다. 개별 대응법에 이어 침해 가정, 심층 방어, 기본값 닫힘 같은 관제 원칙과 보안 공지 구독, 우선순위, SBOM, 탐지 신호, 사고 대응 순서를 다룹니다.

read →
브레이크포인트를 다 통과한 화면은 왜 폴더블에서 깨졌을까 - 쿠랑 탭바 개편기
  • experience
  • design
  • foldable
  • viewport
  • responsive
  • accessibility
  • layout
  • webview

브레이크포인트를 다 통과한 화면은 왜 폴더블에서 깨졌을까 - 쿠랑 탭바 개편기

아이폰 듀오의 접힌 화면도, 폴드 8에서 올라온 QA 이슈 두 건도 폭 기준 분기는 전부 통과했지만 줄어든 높이에서 문제가 생겼습니다. 높이와 화면비를 기준으로 실서비스를 여섯 가지 크기에 넣어 점검하고, 하단 탭바를 오른쪽 레일로 옮기는 개편을 설계했습니다. 그리고 웹과 iOS, 안드로이드 래퍼에 구현하며 내린 결정과 마주친 오류까지 적었습니다.

read →
PHP2Shell 분석: PHP 엔진의 RCE 취약점 두 건과 대응 방법
  • experience
  • develop
  • backend
  • infra
  • devops
  • security
  • php
  • cve
  • rce
  • php2shell

PHP2Shell 분석: PHP 엔진의 RCE 취약점 두 건과 대응 방법

PHP 코어의 메모리 관리와 오류 처리에서 나온 CVSS 9.2 취약점 두 건을 분석합니다. 어떤 구조의 결함인지, 어떤 실행 방식이 더 위험한지, 버전과 배포판별로 어떤 수정이 나왔는지를 구분합니다. 패치를 바로 올릴 수 없을 때의 임시 완화책과 패치 이후의 재시작·점검 항목도 담았습니다.

read →
.env에서 Secret Manager로, 미루던 이관을 시작하게 된 일주일
  • experience
  • develop
  • infra
  • devops
  • gcp
  • secret-manager
  • terraform
  • nodejs

.env에서 Secret Manager로, 미루던 이관을 시작하게 된 일주일

GCP 위의 작은 서비스에서 .env 기반 시크릿을 Secret Manager로 옮긴 회고입니다. 두 방식이 값을 어디에 두고 어떻게 전달하는지 먼저 비교한 뒤, 값이 지나가는 경로를 코드 밖까지 세어야 한다는 것, 레거시 액세스 스코프가 IAM보다 먼저 걸린다는 것, 평문을 어디까지 없앨지 선을 긋는 기준을 다룹니다.

read →
영수증 OCR에 서버가 꼭 필요할까 - 브라우저 온디바이스 OCR 구축기
  • experience
  • develop
  • frontend
  • ai
  • ocr
  • paddleocr
  • tesseract
  • onnxruntime
  • webassembly
  • webgpu
  • web-worker
  • cache-storage

영수증 OCR에 서버가 꼭 필요할까 - 브라우저 온디바이스 OCR 구축기

PaddleOCR과 Tesseract를 영수증 26장으로 실측해 고르고, onnxruntime-web과 웹 워커로 브라우저 안에서 돌린 과정을 적었습니다. 회전 박스 후처리 한 줄이 날짜 인식률을 69%에서 100%로 올린 이야기와, 카나리 오판·캐시·손상된 모델 파일처럼 실제로 막혔던 열한 곳을 원인과 함께 정리했습니다.

read →
Chronosaurus를 검색하면 부작용이 나온다 - PIEmuvi 구축기
  • experience
  • develop
  • backend
  • infra
  • devops
  • ai
  • fastapi
  • docker
  • yt-dlp
  • gemini

Chronosaurus를 검색하면 부작용이 나온다 - PIEmuvi 구축기

애플 뮤직·스포티파이·유튜브 뮤직 재생목록을 유튜브 재생 링크로 바꾸는 PIEmuvi를 FastAPI 단일 컨테이너로 만든 기록입니다. 스코어링만으로는 잡히지 않던 오답 세 가지를 채택 자격이라는 별도 축으로 해결한 과정과, 배포에서 세 번 헛짚고 원인을 찾은 진단 기록을 함께 정리합니다.

read →
서버리스 GPU 위의 AI 이미지 생성기는 왜 로컬보다 느렸을까 - PIEmgmaker 구축기
  • experience
  • develop
  • ai
  • infra
  • devops
  • comfyui
  • cloudrun
  • gcp
  • gpu

서버리스 GPU 위의 AI 이미지 생성기는 왜 로컬보다 느렸을까 - PIEmgmaker 구축기

로컬 Mac mini M4에서 잡 1건에 96분이 걸리던 AI 이미지 생성기를 GCP Cloud Run GPU로 옮겼습니다. 첫 원격 잡은 59분 26초, $1.69였습니다. 원인은 처리량이 아니라 로컬 SSD를 가정한 기본값이었고, 세 가지 처방으로 8분 25초 · $0.24가 됐습니다. 알파 채널 확보 전략부터 메모리 경계, AWS·GCP 선택, 모델 80GB 이전, 유휴 과금까지 2주간의 결정과 함정을 정리합니다.

read →
VSCode에서 돌리는 Claude Code 세션은 왜 안 잡힐까 - ccwhere 구축기
  • experience
  • develop
  • devops
  • ai
  • claude-code
  • shell
  • jq
  • cli

VSCode에서 돌리는 Claude Code 세션은 왜 안 잡힐까 - ccwhere 구축기

병렬로 띄운 Claude Code 세션을 한눈에 보는 도구를 찾다 기존 도구들이 VSCode 확장의 세션을 못 잡는 이유를 추적했습니다. 해법은 프로세스 추적이 아니라 세션 로그 파일을 직접 읽는 것이었습니다. jq의 16진수 미지원, command substitution 안에서 죽는 tput, 셸 변수 확장이 삼킨 jq 변수까지, 작은 셸 스크립트 하나에 박힌 함정들을 정리합니다.

read →
두 라이브러리의 req는 같은 req가 아니었다
  • experience
  • develop
  • backend
  • frontend
  • socketio
  • nextauth
  • nextjs
  • debugging

두 라이브러리의 req는 같은 req가 아니었다

채팅 기능을 구현하던 날 socket 레이어의 게이팅을 비워둔 익숙한 손버릇이, 보안 마이그레이션 시점에 정확히 같은 자리에서 청구서로 돌아왔습니다. NextAuth의 SessionStore가 req.cookies만 보고 req.headers.cookie 헤더 자체는 무시한다는 사실을 추적하기까지의 디버깅과, 끝내 root cause를 단정하지 못한 채 in-flight 가드로 봉합한 버그까지의 회고입니다.

read →
인터랙션과 접근성을 모두 고려한 차트 만들기
  • experience
  • design
  • develop
  • frontend
  • a11y
  • chart
  • react
  • d3
  • interactive

인터랙션과 접근성을 모두 고려한 차트 만들기

44개 차트 데모를 한 자리에 모았습니다. 시각 사용자·키보드 사용자·스크린리더 사용자가 모두 자연스럽도록 처음부터 설계했고, 그 과정에서 정착된 패턴들을 함께 정리했습니다. 그 패턴은 HTML overlay, roving tabindex, 호버와 키보드 포커스의 분리, 데이터 표 fallback입니다.

read →
테스트가 없던 두 레포에 단위·컴포넌트·통합 테스트를 들이며
  • experience
  • develop
  • frontend
  • backend
  • testing
  • jest
  • react
  • nextjs

테스트가 없던 두 레포에 단위·컴포넌트·통합 테스트를 들이며

사람 눈검토만으로 운영 VM에 배포되던 두 레포에 jest를 깔았습니다. 어드민에서 검증한 패턴을 서비스로 옮기는 미러링 전략으로 네 단계를 차례로 진행했고, 그 사이에 만난 함정과 결정 패턴을 정리합니다.

read →
React/Next.js CVE 6개월 정리
  • experience
  • develop
  • frontend
  • react
  • nextjs
  • security
  • cve
  • rsc

React/Next.js CVE 6개월 정리

React 19와 Next.js의 6개월 동안 발견된 CVE들을 한 편에 정리합니다. 각 CVE의 문제, 재현 방식, 패치, 그리고 당장 올릴 수 없을 때의 대처법을 코드 예시와 함께 다룹니다.

read →
같은 critical, 두 앱의 다른 선택
  • experience
  • develop
  • frontend
  • security
  • swiper
  • dependency
  • prototypepollution

같은 critical, 두 앱의 다른 선택

스와이퍼의 두 번째 prototype pollution은 5년 전 패치가 우회된 사례입니다. 같은 CVE를 공유하는 두 앱 중 하나는 제거를, 다른 하나는 메이저 업그레이드를 택했습니다. 의존성의 실효 위험은 advisory가 아니라 코드가 결정합니다.

read →
한 달간 1분 30초마다 죽고 있었던 서버
  • experience
  • develop
  • infra
  • devops
  • gce
  • centos
  • selinux
  • pm2
  • systemd

한 달간 1분 30초마다 죽고 있었던 서버

Next.js 서비스에서 시간을 두고 접속하면 가끔 503이 떨어지던 문제를 추적했습니다. 처음에는 MongoDB 유휴 커넥션을 의심해 옵션을 다듬었고, 다음으로 OOM을 의심했지만 둘 다 원인이 아니었습니다. 진짜 원인은 PM2 데몬 자체가 systemd에 의해 통째로 강제 종료되고 있다는 사실이었고, 그 뿌리에는 SELinux의 사용자 홈 파일 접근 차단이 있었습니다.

read →
Astro + Vercel로 구축하는 개인 기술 블로그 세팅 후기
  • experience
  • develop
  • frontend
  • astro
  • vercel
  • blog
  • ssg

Astro + Vercel로 구축하는 개인 기술 블로그 세팅 후기

플랫폼에 종속되지 않고, 내 도메인에서 글을 온전히 소유할 수 있는 기술 블로그를 구축하려 합니다. 주로 기술이나 디자인에 관한 실무적·교육적 콘텐츠를 다룰 예정이며, 코드 블록과 인터랙티브 데모를 자유롭게 삽입할 수 있는 환경이 필요합니다. 이 글에서는 기술 스택을 선정하기까지의 과정과, 최종 선택한 Astro + Vercel 조합의 구체적인 구현 방법을 정리합니다.

read →