쿠키·세션·토큰과 CORS 기초: 로그인 정보와 출처 구분하기
쿠키·세션·토큰의 역할과 출처 정책, CORS·preflight·credentials를 구분합니다. 로그인 실패를 401·403·쿠키 전송·브라우저 응답 공개 조건으로 나눠 관찰합니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
브라우저와 HTTP 기초: HTML 요청부터 응답 헤더 읽기까지
브라우저 DevTools Network에서 HTTP 요청과 응답을 관찰합니다. URL·메서드·상태 코드·헤더·본문을 구분하고 TaskFlow 요청 흐름 분석 노트의 첫 체크포인트를 완성합니다.
Git 브랜치와 PR 충돌 해결: merge conflict를 직접 만들고 해결하기
같은 줄의 충돌을 재현하고 변경 의도를 합친 뒤 PR의 base·compare와 검증 결과를 확인합니다.
Git 기초 실습: status와 diff부터 첫 GitHub push까지
Git 설치와 저장소 로컬 설정부터 status·diff, staging과 첫 commit, 본인 GitHub 원격 연결을 단계별로 확인합니다.
Supabase 사용자별 CRUD와 RLS: 두 계정으로 데이터 격리 검증하기
Supabase 사용자별 CRUD를 구현하고 GRANT와 RLS 정책을 적용해 두 테스트 계정의 데이터 격리를 확인하는 방법을 설명합니다.
CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기
Flex 주축과 교차축, 줄바꿈, flex 크기와 미디어 쿼리를 조합해 모바일부터 넓은 화면까지 읽을 수 있는 완전한 카드 페이지를 만듭니다.
CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기
분리한 HTML과 CSS 파일로 content-box와 border-box를 비교하고 선택자 명시도, 작성 순서, 상속을 개발자 도구에서 확인합니다.
HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기
HTML 문서 뼈대와 제목 계층을 만들고 label과 input을 연결합니다. 파일 하나로 링크 이동, 라벨 초점, 필수 입력 검사를 확인하는 첫 퍼블리싱 실습입니다.
TanStack Query Provider와 첫 useQuery 상태 처리 실습 가이드
Provider와 첫 useQuery를 만들고 pending·빈 성공·첫 실패·재시도·백그라운드 갱신 실패 화면을 구분합니다.
Next.js App Router 첫 프로젝트 만들기
Next.js App Router 첫 프로젝트를 준비하고 실행합니다. page.tsx·layout.tsx의 역할을 이해하고 Link로 홈과 작업 목록을 연결합니다.
React 제어 컴포넌트 폼과 상태 끌어올리기 첫 실습 가이드
지금까지 TaskFlow는 고정된 제목의 샘플 작업만 추가했습니다. 실제 사용자가 원하는 작업을 입력하려면 input의 값을 React state와 연결해야 합니다.
TypeScript 타입 좁히기: union null unknown 안전 검증
TypeScript union과 null을 조건으로 좁히고 unknown 외부 데이터를 런타임에서 필드별로 검증해 안전한 타입으로 바꾸는 strict 실습입니다.
