iambilly 기술 블로그

My Voice, My Space

웹 개발과 인프라를 다루는 기술 블로그. 실전에서 부딪힌 문제와 해결 과정을 기록합니다.

최신 글

블로그 코드 미리보기가 비어 나오던 버그를 고치며 Shadow DOM 대신 sandbox iframe을 고른 이유와, iframe 높이를 내용에 맞추는 법(postMessage, ResizeObserver, margin 함정)을 정리했다.

2026.10.168분

휴대폰 스크린샷 3장(647KB)을 44KB로 줄인 과정. 자르기, 크기 맞추기, PNG 색 줄이기, WebP, AVIF를 품질별로 직접 재서 비교하고, picture 태그로 AVIF와 WebP를 함께 쓰는 법까지 정리했다.

2026.10.169분

목록을 '더 보기' 버튼으로 바꿨더니 글 49개 중 10개만 링크로 연결돼 있었다. 구글 크롤러가 버튼을 누르지 않는 이유를 구글 문서로 확인하고, 모든 글을 <a href> 링크로 잇는 방법을 정리했다.

2026.10.148분

Nuxt 3와 Nuxt Content 블로그에 실제로 적용한 SEO 설정을 코드로 정리했다. 사이트맵 lastmod, canonical과 필터 주소 noindex, 한/영 hreflang, JSON-LD 날짜 형식, prerender까지.

2026.10.149분

서치 콘솔의 '발견됨 - 현재 색인이 생성되지 않음'과 '크롤링됨 - 현재 색인이 생성되지 않음'은 멈춘 단계가 다르다. 두 상태의 뜻과 각각 확인할 것, 보고서와 site: 숫자가 다른 이유까지 정리했다.

2026.10.147분

로그인 폼 한 줄로 관리자가 되고 댓글 하나로 스크립트가 실행된다. SQL Injection, XSS, CSRF의 원리를 직접 확인하고 각각을 막는 방법을 정리했다.

2026.10.098분

API마다 제각각인 에러 응답을 RFC 9457 Problem Details로 통일하는 법. 필드별 검증 에러, traceId, 내부 정보 숨기기, Node.js 단일 에러 처리까지 정리했다.

2026.10.086분

CORS 에러는 서버가 아니라 브라우저가 막은 것이다. 같은 출처 정책, preflight, credentials, Expose-Headers와 잘못된 해결법까지 실제 브라우저로 확인하며 정리했다.

2026.10.087분

체크하면 카드가 강조되고, 입력이 틀리면 폼 전체가 반응하고, 별점에 마우스를 올리면 앞의 별까지 칠해진다. 예전엔 자바스크립트가 필요했던 일을 CSS :has() 한 줄로 해결하는 실전 예제를 직접 눌러보며 정리했다.

2026.10.086분

아코디언, 팝오버, 모달, 자동완성, 폼 검증, 이미지 지연 로딩까지. 라이브러리 없이 HTML 태그와 속성만으로 해결되는 기능을 예제와 함께 정리했다. 코드는 줄고 접근성은 덤으로 따라온다.

2026.10.088분