JavaScript Map·Set: 값 조회와 중복 제거 실습
상품 이름으로 가격을 찾는 작은 예제부터 시작합니다. Map의 저장·조회 방법을 익힌 다음 과일 개수를 세어 보고, Set으로 같은 과일을 한 번만 남겨 보겠습니다.
전체 글
쿠키·세션·토큰과 CORS 기초: 로그인 정보와 출처 구분하기
쿠키는 저장·전송 수단, 세션은 로그인 상태의 연결, 토큰은 자격 증명을 나타내는 값이라는 차이를 설명합니다. 두 로컬 서버에서 HttpOnly 쿠키와 동일 출처·CORS·preflight를 비교합니다.
브라우저와 HTTP 기초: HTML 요청부터 응답 헤더 읽기까지
페이지를 열 때 HTML·CSS가 각각 요청되는 과정을 로컬 서버로 관찰합니다. URL, 요청 메서드, 상태 코드, Content-Type과 응답 본문을 구분하여 fetch와 웹 보안을 배우기 전 필요한 기준을 만듭니다.
Git 브랜치와 PR 기초: 충돌을 직접 만들고 해결하기
목표는 같은 행을 서로 다르게 고친 두 브랜치에서 충돌을 재현하고, 양쪽 의도를 합쳐 PR 검토가 가능한 커밋을 만드는 것입니다. 선수 지식은 add·commit·push입니다. bash 또는 Git Bash의 빈 폴더에서 로…
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 제어 컴포넌트 폼과 상태 끌어올리기 첫 실습 가이드
부모가 소유한 제어 폼과 형제 미리보기를 연결합니다. 공백 제출 오류, 입력별 확인 상태 해제와 접근성 오류 연결까지 실습합니다.