Git 브랜치와 PR 기초: 충돌을 직접 만들고 해결하기
목표는 같은 행을 서로 다르게 고친 두 브랜치에서 충돌을 재현하고, 양쪽 의도를 합쳐 PR 검토가 가능한 커밋을 만드는 것입니다. 선수 지식은 add·commit·push입니다. bash 또는 Git Bash의 빈 폴더에서 로…
해비
웹퍼블리싱 실무를 바탕으로 React, Next.js, TypeScript와 프론트엔드 문제 해결 과정을 기록합니다.
총 368개의 글
Git 기초 실습: status와 diff부터 첫 GitHub push까지
목표는 파일 저장·스테이징·커밋·push를 구분하고 같은 변경을 두 diff로 설명하는 것입니다. 선수 지식은 터미널 폴더 이동과 텍스트 파일 저장입니다. Git Bash 또는 bash에서 새 연습 폴더를 사용합니다. 로컬 b…
Supabase 사용자별 CRUD와 RLS: 두 계정으로 데이터 격리 검증하기
개인 노트 CRUD를 구현하고 RLS 정책을 읽어 두 계정의 허용·거부를 예측합니다. 제공 ZIP의 로컬 PostgreSQL 24개 검사와 실제 Supabase 인증 검증의 차이도 설명합니다.
CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기
Flex 주축과 교차축, 줄바꿈, flex 크기와 미디어 쿼리를 조합해 모바일부터 넓은 화면까지 읽을 수 있는 완전한 카드 페이지를 만듭니다.
CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기
분리한 HTML과 CSS 파일로 content-box와 border-box를 비교하고 선택자 명시도, 작성 순서, 상속을 개발자 도구에서 확인합니다.
HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기
HTML 문서 뼈대, 제목 계층, label과 fieldset을 연결하고 키보드와 필수 입력 검사를 확인하는 첫 퍼블리싱 실습입니다.
TanStack Query Provider와 첫 useQuery 상태 처리 실습 가이드
Provider와 첫 useQuery를 만들고 pending·빈 성공·첫 실패·재시도·백그라운드 갱신 실패 화면을 구분합니다.
Next.js App Router로 만드는 첫 프로젝트 완성 실습 가이드
create-next-app으로 Next.js App Router 프로젝트를 직접 생성하고 실행한 뒤, layout과 page, 목록 Link, 동적 상세 경로, Client Component 버튼, 프로덕션 빌드까지 단계별로…
React 제어 컴포넌트 폼과 상태 끌어올리기 첫 실습 가이드
부모가 소유한 제어 폼과 형제 미리보기를 연결합니다. 공백 제출 오류, 입력별 확인 상태 해제와 접근성 오류 연결까지 실습합니다.
TypeScript 타입 좁히기: union null unknown 안전 검증
TypeScript union과 null을 조건으로 좁히고 unknown 외부 데이터를 런타임에서 필드별로 검증해 안전한 타입으로 바꾸는 strict 실습입니다.