YouTube에 영상을 자동 업로드하는 서비스를 만들어보고 싶어서 YouTube Data API v3의 영상 업로드, SRT 자막 업로드, 다국어 제목/설명 등록 흐름을 공부해보았습니다.

YouTube Data API v3 활용법

Tree-sitter와 MCP로 코드베이스를 그래프화해 Claude Code와 Codex의 리뷰 컨텍스트를 줄이는 code-review-graph의 작동 원리와 적용법을 정리합니다.

code-review-graph: AI 코드 리뷰의 컨텍스트를 줄이는 방법

인턴을 하면서 Claude Code용 메타 스킬 플러그인 Harness를 공부하며, 복잡한 작업을 에이전트 팀과 스킬로 분해하는 방식과 설치/사용법, 도입 시 주의점을 정리합니다.

Harness: Claude Code 에이전트 팀을 설계하는 방법

AI 더빙 서비스

Notion API 변경으로 인한 morethan-log 오류 해결

React는 리스트를 렌더링할 때 key를 기준으로 이전 요소와 새로운 요소를 매칭한다. index는 항목의 위치 정보이기 때문에 중간 삽입이나 삭제가 발생하면 값이 바뀌고, 이로 인해 React가 서로 다른 데이터를 같은 컴포넌트로 인식해 state나 DOM을 잘못 재사용할 수 있다. 따라서 key로는 index 대신 변경되지 않는 고유한 id를 사용하는 것이 안전하다.

React에서 index를 key로 쓰면 안 되는 이유

객체/배열 selector 리렌더링 잡는 가장 현실적인 방법

Zustand useShallow 정리

유튜브 IFrame API로 음악 플레이어 만들기

Tailwind CSS 정리

브라우저 렌더링 파이프라인 정리

코딩 테스트 준비 - 택배 상자 꺼내기

Vite + React 빌드 결과를 vite-plugin-singlefile로 단일 HTML에 인라인하여 file://, 내부망, 메일 첨부 환경에서도 바로 열 수 있도록 하는 방법을 정리합니다.

Vite + React 빌드 산출물을 단일 HTML로 전달하기

관리자 페이지에 브라우저 알림을 붙이는 기본 훅부터, 채팅처럼 빈번한 이벤트에 쿨다운 패턴까지 단계적으로 구현하는 방법

React에서 Browser Notification 구현하기

내부망이나 아웃바운드 차단 환경에서 npm install 없이도 Node.js 프로젝트를 Docker로 배포하는 방법을 소개합니다. npm_cache.tar.gz로 NPM 캐시를 미리 아카이브해 외부 레지스트리 접근 없이 의존성을 설치하고, npm ci와 npm install의 차이까지 정리합니다.

내부망 서버에서 Docker로 Node.js 배포하기 – npm_cache.tar.gz 활용법

프론트엔드 문서화의 필요성부터 설계/ADR, API·컴포넌트 문서, 시각 회귀, a11y, CVE 보안 트래킹

프론트엔드 개발자와 문서화: 왜 해야 할까?

n8n은 시각적인 워크플로우 설계와 강력한 자동화 기능을 제공하는 오픈소스 툴입니다. 본 글에서는 프론트엔드 개발자의 시선에서, 반복 테스트 자동화와 QA 업무 효율화를 위해 n8n을 실무에 적용한 경험을 공유하였습니다.

n8n을 활용한 반복 작업 자동화와 테스트 효율화 

Redux는 예측 가능한 상태 관리 도구지만, 복잡한 설정과 보일러플레이트로 인해 사용이 부담스러운 경우가 많습니다. Zustand는 Redux의 핵심 철학인 Flux 패턴은 유지하면서, 훨씬 더 간결하고 유연한 방식으로 상태를 관리할 수 있게 해줍니다. 이 글에서는 Zustand의 설계 철학, 중앙 집중형 구조, Slice Pattern, 그리고 Redux와의 구조적 차이점을 실제 코드 예제와 함께 설명합니다.

Zustand의 철학과 구조 - Redux와의 차이

Recoil은 React 친화적인 상태 관리 라이브러리지만, 프로젝트가 커질수록 구조화의 어려움과 React 외부 상태 접근의 제약이 분명해졌습니다. 이 글에서는 Recoil을 사용하던 개발자가 Zustand로 옮겨간 배경과, Zustand를 선택한 결정적 이유들을 설명합니다.

왜 Recoil을 떠나 Zustan‍d를 선택했는가?

카카오톡, 라인, 인스타그램 등의 인앱 브라우저에서는 웹사이트 기능이 제한되거나 비정상 동작하는 경우가 많습니다. 이 글에서는 사용자 에이전트를 기반으로 인앱 브라우저를 감지하고, 사용자를 크롬 또는 사파리 등 외부 브라우저로 유도하는 코드 구현 방식을 자세히 설명합니다.

인앱 브라우저 감지 및 외부 브라우저로 리디렉션하는 방법

부천FC FRIEND COMMUNITY 프로젝트에서 사용자 성향 데이터를 시각화하기 위해 react-chartjs-2를 활용해 레이더 차트를 구현한 경험을 소개합니다. Chart.js를 기반으로 한 커스터마이징, UX 고려사항, 코드 설계까지 자세히 분석합니다.

react-chartjs-2 레이더 차트 구현

OCR 시스템에서 특수기호 인식 문제를 해결하기 위해 도입한 템플릿 기반 구조를 프론트엔드 개발 관점에서 풀어낸 글입니다. 템플릿 팩토리와 매니저 구조를 통해 기기/언어/색상 조건에 따른 유연한 확장을 가능케 했고, 이를 통해 프론트엔드의 Template Method 패턴과의 유사성을 도출해냈습니다.

OCR 특수기호 인식을 위한 템플릿 관리 시스템 설계: 팩토리 패턴 기반 구조화

OCR에서 누락되는 특수기호 문제를 JPEG 패턴화 개념에서 착안한 후처리 방식으로 해결한 경험 공유

OCR에서 특수기호를 패턴으로 인식하게 된 이유

XMLHttpRequest, fetch, axios 등으로 인증 정보를 포함한 요청을 보낼 때 사용하는 withCredentials 옵션은 CORS 정책, 쿠키 처리와 밀접하게 연관되어 있습니다. 이 글에서는 해당 옵션의 의미, 클라이언트-서버 간의 올바른 설정 방식, 그리고 실무에서 주의해야 할 보안 이슈를 정리했습니다.

Ajax 요청에서 withCredentials 옵션의 의미와 주의할 점

JWT를 어떻게 저장하느냐에 따라 애플리케이션의 보안성과 편의성이 크게 달라집니다. 이 글에서는 LocalStorage와 쿠키에 JWT를 저장해본 경험을 바탕으로 각각의 장단점과 주의할 점을 정리하고, XSS, CSRF 등 주요 공격에 대한 대응 방안을 설명합니다.

JWT를 어디에 저장할 것인가? LocalStorage vs 쿠키

웹사이트의 이미지 최적화는 사용자 경험, 속도, SEO에 모두 영향을 미치는 중요한 요소입니다. 이 글에서는 이미지 형식 선택부터 압축 도구 활용, 반응형 이미지 설정, Lazy Loading, CDN, 접근성 개선까지 웹 이미지 최적화를 위한 실전 팁을 정리했습니다.

이미지 최적화 가이드

정규표현식은 문자열에서 특정 패턴을 찾고 대체하며 추출할 수 있는 강력한 도구입니다. 이 글에서는 자바스크립트 중심으로 정규표현식의 주요 메타문자, 반복 패턴, 전방/후방탐색, 탐욕적 매칭과 비탐욕적 매칭까지 다양한 실전 예제와 함께 핵심 개념을 정리했습니다.

자바스크립트에서 정규표현식 제대로 이해하기

React에서 사용자 입력 폼을 관리할 때 상태 처리, 유효성 검사, 제출 로직 등이 복잡해질 수 있습니다. 이 글에서는 Formik 라이브러리가 이러한 문제를 어떻게 해결하는지, 코드 예제와 다른 폼 라이브러리와의 비교를 통해 설명하고, Formik을 선택할 때 고려할 수 있는 주요 장점을 정리했습니다.

React에서 폼 관리, 왜 Formik인가?

COMATCHING(ver3): 프로젝트 회고

Vite를 사용해 React 프로젝트를 설정해야 하는 이유

UseEffect가 두번 실행되는 이유

React에서 스크롤 위치 유지하기

React에서 스크롤 위치 유지하기 (Scroll Restoration)

Recoil로 간편한 상태 관리하기

브라우저의 단일 또는 듀얼 모니터 환경에서 window.open()을 사용하여 팝업 창을 화면 중앙에 정확하게 위치시키는 방법을 소개합니다.

Archive

2026

2025

2024