해비

웹퍼블리싱 실무를 바탕으로 React, Next.js, TypeScript와 프론트엔드 문제 해결 과정을 기록합니다.

총 368개의 글

React React · 중급 32분 2026.09.12

순수 reducer로 작업 추가·토글·삭제 규칙을 만들고 Context로 폼·요약·목록을 연결합니다. 로컬 상태 경계와 7개 테스트를 실습합니다.

JavaScript JavaScript · 중급 16분 2026.09.12

얕은 복사가 중첩 객체를 공유하는 이유를 확인하고, 변경 경로만 새로 만드는 상태 갱신 함수를 완성합니다. structuredClone의 복제 범위와 React 상태로 이어지는 원칙도 실습합니다.

JavaScript JavaScript · 중급 16분 2026.09.12

동기 코드, Promise 마이크로태스크, 타이머의 실행 순서를 표와 assert로 확인합니다. await 이후의 재개와 마이크로태스크 재등록 문제를 안전한 예제로 실습합니다.

키보드 이동 순서와 초점 표시, 입력 레이블, 200% 확대와 좁은 화면 리플로를 실패·수정 예제로 비교하고 직접 점검 결과를 기록합니다.

시맨틱 HTML과 반응형 CSS를 연결해 소개·카드·이미지·비교표·문의 입력·FAQ가 있는 가상 서비스 페이지를 완성하고, 좁은 화면과 키보드 동작을 함께 확인합니다.

caption과 th scope로 비교 관계를 표현하고, 모바일에서 표의 의미를 유지하며 키보드로 가로 이동하는 HTML 비교표를 완성합니다.

자식 z-index를 높여도 가려지는 이유를 중첩 쌓임 맥락으로 이해하고 실제 부모 층을 수정합니다.

기준 부모, 일반 흐름, 스크롤 영역을 비교하며 배지와 고정 안내, sticky 실패를 직접 고칩니다.

Flex에서 긴 파일명이 화면을 밀어내는 원인을 찾고 말줄임, 줄바꿈, 부분 스크롤을 구분합니다.

코딩테스트 · 초급 4분 2026.09.12

첫 번째 수를 포함하고, 이후에는 바로 앞 원소보다 큰 값만 골라 출력하는 JavaScript 풀이입니다. 인접 원소 비교와 경계값을 검증합니다.