가위바위보 풀이
가위바위보 N회의 선택을 같은 인덱스로 비교하고 조건문으로 승자를 판정하는 JavaScript 풀이입니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
보이는 학생 풀이
앞에서부터 학생의 키를 확인하면서 지금까지의 최댓값보다 큰 학생 수를 세는 JavaScript 풀이입니다. 예제와 경계값을 검증합니다.
TanStack Query 컴포넌트 테스트: QueryClient 격리와 실패·재시도·목록 갱신 검증
테스트마다 QueryClient와 fixture를 새로 만들고 Promise 완료 순서를 제어합니다. pending, 오류, 의도적 retry, mutation 뒤 목록 갱신과 캐시 오염 방지를 jsdom 테스트 7개로 검증합…
TanStack Query 페이지네이션 실습: placeholderData로 이전 목록 유지하기
이전·다음 페이지 이동을 useQuery로 구현하고, v5 placeholderData와 keepPreviousData로 대기 중 목록을 유지합니다. 마지막 페이지, 이동 실패, 재시도와 캐시 복귀까지 테스트합니다.
TanStack Query useMutation 저장 실습: 실패·재시도와 목록 갱신까지
제목 입력부터 useMutation 저장, 실패 시 입력 보존과 재제출, invalidateQueries 완료 대기까지 하나의 폼으로 완성합니다. 저장 성공 뒤 목록 읽기 실패도 별도 상태로 처리합니다.
React useRef 실습 입력 포커스와 state 역할 나누기
state는 화면에 보여야 하는 값을 관리할 때 사용합니다. 반면 렌더링에는 필요하지 않지만 컴포넌트가 기억해야 하는 값이나 실제 DOM 요소에 접근해야 할 때는 ref가 더 적합할 수 있습니다.
React useReducer와 Context 실습 작업 목록 상태 여러 컴포넌트 공유
TaskFlow가 작을 때는 App에서 useState와 여러 이벤트 함수를 관리해도 충분합니다. 하지만 작업 추가·완료·삭제처럼 변경 규칙이 늘어나고, 여러 컴포넌트가 같은 상태와 변경 함수를 사용하기 시작하면 App의 책임…
JavaScript 객체 참조와 불변 갱신: 중첩 객체를 안전하게 바꾸기
얕은 복사가 중첩 객체를 공유하는 이유를 확인하고, 변경 경로만 새로 만드는 상태 갱신 함수를 완성합니다. structuredClone의 복제 범위와 React 상태로 이어지는 원칙도 실습합니다.
JavaScript 이벤트 루프: Promise와 await 실행 순서 추적하기
동기 코드, Promise 마이크로태스크, 타이머의 실행 순서를 표와 assert로 확인합니다. await 이후의 재개와 마이크로태스크 재등록 문제를 안전한 예제로 실습합니다.
웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
키보드 이동 순서와 초점 표시, 입력 레이블, 200% 확대와 좁은 화면 리플로를 실패·수정 예제로 비교하고 직접 점검 결과를 기록합니다.
HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지
시맨틱 HTML과 반응형 CSS를 연결해 소개·카드·이미지·비교표·문의 입력·FAQ가 있는 가상 서비스 페이지를 완성하고, 좁은 화면과 키보드 동작을 함께 확인합니다.
HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기
caption과 th scope로 비교 관계를 표현하고, 모바일에서 표의 의미를 유지하며 키보드로 가로 이동하는 HTML 비교표를 완성합니다.
