이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

웹 화면과 서비스를 만드는
해비의 개발 기록

웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.

전체 글

HTML·CSS HTML·CSS · 중급 설명 8분 2026.04.17

같은 카드 두 개를 넓은 본문과 좁은 사이드바에 놓고 media query와 container query의 기준을 비교합니다. 카드별 wrapper와 세로 기본값으로 완성합니다.

Firebase · 중급 설명 5분 2026.04.13

리뷰 시드의 재현성·중복 방지·조회 검증 기준을 설계합니다. 좋은 시드는 실제 고객처럼 보이는 문장보다 테스트할 경계값이 명확해야 합니다. 일정한 ID와 기준 시각을 사용하면 재실행 전후 문서 수와 정렬을 비교할 수 있습니다.

웹퍼블리싱 강점을 근거와 함께 정리하고 프론트엔드 전환 방향을 선택합니다. 개인 학습 TaskFlow의 역량표를 만들며 AI 활용과 직접 검증의 경계를 익힙니다.

개발환경 개발환경 · 고급 설명 11분 2026.04.02

VS Code Agent Debug Logs와 Chat Debug에서 컨텍스트·도구 호출·MCP 오류를 확인하고 안전하게 재현합니다.

개발환경 개발환경 · 중급 설명 12분 2026.03.30

VS Code 1.113의 Thinking Effort와 MCP 변경 사항을 공식 릴리스 노트로 확인하고 TaskFlow 개발환경을 최종 점검합니다.

AI 코딩 도구 AI 코딩 도구 · 초급 설명 8분 2026.03.30

AI 작업 전 품질 기준을 사람이 먼저 정의하는 법을 배웁니다. 요구사항보다 더 많은 기능을 추가하거나 관련 없는 리팩터링을 섞는 문제를 막기 위해 기능 범위 계약과 변경 영향 표를 사용합니다.

JavaScript · 중급 설명 7분 2026.03.27

URL 쿼리를 읽고 수정하며 누락·빈 값·중복·인코딩과 브라우저 기록을 재현 가능한 사례로 확인합니다.

HTML·CSS HTML·CSS · 중급 설명 9분 2026.03.27

Baseline의 세 가지 상태를 읽고 지원 대상과 비교합니다. 세로 기본 배치에 컨테이너 쿼리를 더해 기능이 없어도 읽히는 화면을 실습합니다.

HTML·CSS HTML·CSS · 중급 설명 9분 2026.03.19

이미지가 안 보임, 찌그러짐, 잘림, 흐림, 로딩 중 밀림을 실제 PNG 예제로 구분합니다. 상대 경로와 object-fit, srcset·sizes, 크기 예약을 한 실습에서 확인합니다.

개발자 영어 개발자 영어 · 초급 설명 10분 2026.03.18

하루 10분을 상황 선택·문장 읽기·뜻과 발음·슬롯 변경·회상으로 나눕니다. TaskFlow 진행·완료·요청 표현 다섯 가지로 반복 연습합니다.

반복 업무를 입력·처리·출력으로 나누고 Zapier·Make·n8n·Node.js를 제어권과 운영 책임으로 비교합니다. Node.js 첫 파일 실행과 TaskFlow Ops Automation 준비까지 안내합니다.

CS 기초 CS 기초 · 중급 설명 11분 2026.03.18

CSRF와 XSS가 깨뜨리는 신뢰 경계를 비교합니다. SameSite·CSRF 토큰·Origin 검증·textContent·HttpOnly·CSP의 역할과 한계를 방어 원칙 중심으로 정리합니다.