모든 글 목록
개발자로서 마주하는 모든 여정의 순간을 기록합니다.
마크다운 한국어 굵게 하기(Bold) 파싱 이슈 해결기
한국어 조사와 문장 부호가 인접했을 때 마크다운 굵게 표시가 깨지는 문제를 정규표현식 전처리를 통해 해결한 과정을 공유합니다.
React 에디터에서 overflow:hidden에 의한 선택 UI 잘림 — Portal 패턴으로 해결하기
Canvas 기반 에디터에서 부모의 overflow: hidden으로 인해 노드 선택 테두리가 잘리는 문제를 해결해 봅니다. React Portal과 ResizeObserver를 활용한 독립적인 오버레이 레이어 구현 및 캔버스 좌표계 변환 방법을 상세히 다룹니다.
개발자 도구로 점검하는 시멘틱 태그: SEO 점수를 높이는 H 태그 위계와 키워드 전략
구글 상위 노출을 결정짓는 핵심은 단순한 글쓰기가 아닙니다. 개발자 도구로 확인하는 시멘틱 구조(H 태그)의 정석과, 검색 엔진이 사랑하는 '범용 키워드'가 어떻게 블로그 성장의 선순환을 만드는지 분석합니다.
WebCreator-X: 레이아웃 시스템 분석 보고서
사이드바 조작과 캔버스 드래그 인터랙션의 불일치 문제 분석
에디터에서 Flexbox와 Absolute 포지셔닝을 함께 다루기: 3-Layer 렌더링 구조의 설계와 그 한계
비주얼 웹 에디터 구현 중 직면하는 가장 까다로운 문제 중 하나는 '에디터의 조작계'와 'CSS 레이아웃'의 간극입니다. 본 글에서는 react-rnd를 활용한 3-Layer 렌더링 구조에서 Flexbox 흐름이 파괴되는 원인을 분석하고, 런타임 포지션 모드 분기를 통해 데이터 정합성을 확보한 트러블슈팅 과정을 공유합니다. WYSIWYG의 핵심인 '보이는 대로 저장되는 시스템'을 구축하기 위한 아키텍처 가이드를 확인해 보세요.
Next.js와 Cloudinary를 이용한 보안 이미지 업로드 구현 (Signed Upload)
Next.js Server Action과 Cloudinary API를 결합하여 보안성이 강화된 이미지 업로드 시스템을 구축하는 방법을 알아봅니다. 클라이언트 직업 업로드 방식에 서버 서명(Signature)을 더해 API Secret 노출 없이 안전하게 구현하는 전체 프로세스를 정리했습니다.