기술
개인정보 처리방침 페이지 하나에서 시작된 S3 탐구
오브젝트 스토리지가 뭔지부터 비용 청구 방식, 프론트엔드에서 쓰는 여섯 가지 패턴까지 정리했습니다.
개발하며 겪은 일을 한 편으로 정리해 쓴 글입니다.
63개의 글
오브젝트 스토리지가 뭔지부터 비용 청구 방식, 프론트엔드에서 쓰는 여섯 가지 패턴까지 정리했습니다.
네이버 블로그 새 글을 매주 감지해 AI 요약과 함께 슬랙으로 확인받고, 버튼 하나로 배포 없이 PR 페이지에 반영하는 자동화를 만든 과정을 정리했습니다.
Firebase 이벤트 명세와 데이터 카탈로그 스키마의 불일치를 GitHub Actions로 자동 검증한 과정을 정리했습니다.
웹뷰의 user-scalable=no 때문에 화면 확대가 막혀 있었습니다. zoom과 transform을 거쳐 입력창 폰트를 16px로 바꾸기까지의 과정을 정리했습니다.
사파리에서만 지도 마커 아이콘이 뭉개지던 문제를 WebKit의 합성 레이어 래스터라이징으로 좁혀 해결했습니다.
구글 로그인 후 간헐적으로 로그인 페이지로 돌아오던 문제를, 쿠키의 Domain과 SameSite를 하나씩 확인하며 추적했습니다.
앱은 분명 최신 버전인데, 웹뷰는 구버전이라고 답했습니다. 재현조차 되지 않던 CS의 원인을 Grafana와 BigQuery로 추적했습니다.
iOS와 Android 웹뷰에서 Safe Area를 처리한 과정과 플랫폼별 차이를 정리했습니다.
Gym Timer, Voice Memo 등 일상 속 불편함을 해결하려 만든 서비스와 집 자동화까지, 삶의 질을 높여준 것들을 소개합니다.
PR Checklist Extension, Pipeline Dashboard 등 업무 생산성을 위해 직접 만든 서비스와 애용하는 도구들을 소개합니다.
안드로이드 웹뷰 키보드 가림 이슈를 재현하고 디버깅하며 겪은 문제 해결 과정과 느낌 점을 담았습니다.
토스에서 진행한 Frontend Fundamentals 모의고사 2회차를 진행하며 배운 점과 느낀 점을 공유합니다.
Expo를 활용해 만든 앱을 플레이스토어에 출시한 경험을 이야기합니다.
봄봄 서비스에서 앱스토어에 앱을 출시한 경험을 이야기합니다.
Selection API와 XPath로 형광펌 기능을 구현하면서 겪은 문제들을 이야기합니다.
Zsh과 Oh My Zsh를 활용해 생산성을 높인 경험을 이야기합니다.
웹 성능 최적화의 다양한 방법과 개념, 그리고 이를 실제로 적용하는 방법까지 소개합니다.
AWS Lambda를 활용해 Codepipeline의 배포를 알려주는 슬랙 봇을 만든 경험을 이야기합니다.
EC2 인스턴스 생성부터 SSH 접속, PM2 실행, 보안 그룹으로 외부 접속을 열기까지 SSR 서버를 배포하는 과정을 소개합니다.
Next.js 없이 Express와 webpack으로 SSR 서버를 직접 구현하며 겪은 설계와 트러블 슈팅, SSR을 언제 써야 하는지에 대한 고민을 정리했습니다.
모노레포 마이그레이션을 하며 겪은 의존성 트러블 슈팅을 해결한 경험을 공유합니다.
앱 내 웹뷰에서 안전하게 로그인을 처리한 경험에 대해 이야기합니다.
앱 내 웹뷰를 개발하며 겪은 다양한 트러블 슈팅과 경험에 대해 이야기합니다.
크롬 확장 프로그램에서 API Key가 노출된 사건에 대해 이야기하며, Next.js API Routes를 이용해 이를 해결한 경험에 대해 이야기합니다.
AI를 사용하는 6가지 방법들을 소개합니다.
GitHub Actions를 이용해 Reviewer를 알리는 슬랙 봇을 만든 경험을 이야기합니다.
유튜브 자막 추출 라이브러리 문제를 Python과 Flask로 해결합니다.
AWS S3, CloudFront, Code Build, Code Pipeline을 이용해서 React 배포를 자동화합니다.
Figma AI를 사용해 웹사이트를 만들고, Figma 플러그인을 사용해 디자인으로 옮겨오고, Figma MCP와 Claude Code를 사용해 코드로 옮겨옵니다.
원하는 시간에 RSS로 데이터를 모아 이메일로 전송하는 서비스를 만듭니다.
useQuery의 자동 리패칭과 Suspense 지원, useMutation의 낙관적 업데이트를 구현합니다.
Chrome Extension과 웹을 모두 함께 사용하는 서비스의 E2E테스트 코드를 작성하는 과정을 소개합니다.
rollup.js로 서버 상태 관리 라이브러리를 외부에서 사용할 수 있게 패키지화합니다.
클라이언트 상태와 서버 상태의 차이, 그리고 캐싱 전략을 정리합니다.
Context API와 애니메이션으로 선언적인 토스트 컴포넌트를 만듭니다.
공통 패키지 수정이 반영되기까지 16초 걸리던 걸 Just In Time Packages로 4초까지 줄인 과정과 환경 변수 이슈 해결을 담았습니다.
『함께 자라기』의 '함께' 파트를 읽고 협업과 소통에 대해 생각한 것들을 정리했습니다.
Reveal.js로 코드 기반 발표 자료를 만든 후기와 사용법을 소개합니다.
JavaScript 프로토타입 체인과 proto, prototype의 관계를 정리했습니다.
URLSearchParams로 쿼리 파라미터를 생성하고 수정하고 삭제하는 방법을 정리했습니다.
2025년 4월 24일 진행한 미니 테코톡 발표 자료입니다.
JavaScript의 this 바인딩 규칙을 함수, 메서드, 화살표 함수로 나눠 정리했습니다.
옵저버 패턴으로 바닐라 JS 컴포넌트의 상태 변경을 감지합니다.
이벤트 위임과 data-action으로 이벤트 리스너를 중앙에서 관리합니다.
바닐라 JS로 React 같은 컴포넌트 시스템을 직접 만들어봅니다.
Vite 프로젝트를 GitHub Actions로 GitHub Pages에 자동 배포합니다.
given-when-then 패턴과 mock, spy 활용법으로 Jest 테스트를 시작합니다.
『객체지향의 사실과 오해』를 읽고 협력, 책임, 역할 관점에서 객체지향을 다시 정리했습니다.
Supabase Webhook과 AWS Lambda, API Gateway, SNS로 실시간 SMS 알림을 구축합니다.
웹 메모 서비스의 v0.0.1부터 v1.8.4까지의 발전 과정과 프로젝트를 지속적으로 성장시키기 위한 CI/CD, 모니터링, 회고 등 다양한 방법론을 소개합니다.
브라우저 뒤로가기로 모달을 닫을 수 있게 History API로 구현한 경험을 이야기합니다.
사용자가 드래그를 하면 셀렉션 박스를 만듭니다.
Next.js 정적 렌더링으로 MTT를 609ms에서 179ms로 개선한 과정을 컴포넌트 구조, nGrinder 부하 테스트, Lighthouse 측정과 함께 정리했습니다.
서브셋 폰트와 다이나믹 서브셋 폰트로 2.1MB를 156KB까지 줄인 과정과 각 방식의 장단점을 정리했습니다.
모노레포 공통 패키지에서 절대 경로를 사용했을 때 발생한 이슈와 해결 과정을 정리했습니다.
Static Serve와 애니메이션, 스켈레톤 UI로 UX를 개선한 경험을 이야기합니다.
Supabase Database 스키마와 RLS 보안 정책, TypeScript 타입 연동까지 실제 적용 사례를 소개합니다.
우테코 6기 합격자로서 서류 작성, 프리코스, 최종 코딩테스트 준비 팁을 공유합니다.
pnpm workspace와 turborepo로 모노레포 공통 패키지를 만들고, esbuild 빌드와 exports 설정까지 다룹니다.
『함께 자라기』를 읽고 느낀 점과 인상 깊은 구절을 정리했습니다.
웹 메모 프로젝트에서 신경 썬던 UX 포인트를 적절한 기능, 자연스러운 애니메이션, 명확한 사용자 메시지로 나눠 정리했습니다.
Next.js 웹과 Chrome 익스텐션 간에 Supabase 인증 토큰을 공유해 통합 로그인을 구현합니다.
실제 프로젝트에서 함수형과 객체지향을 어떻게 섞어 썼는지, 부수 효과는 어떻게 분리했는지 정리했습니다.
2023년 티스토리에 쓴 글 중 지금도 남길 만한 것들입니다. 링크를 누르면 원문으로 이동합니다.