프론트엔드

HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.

총 177개의 글

Zustand · 중급 설명 8분 2026.09.15

초기 상태와 action을 나누고 이전 객체를 보존하며 중첩 값을 변경합니다.

React React · 고급 설명 7분 2026.09.15

Button이나 Input은 하나의 요소만 이해하면 사용할 수 있지만 Dialog·Popover·Carousel 같은 복합 컴포넌트는 Trigger, Content, 상태, 포커스 이동을 함께 이해해야 합니다.

TanStack Query · 고급 설명 10분 2026.09.15

실제 로컬 API를 연결하고 추가·수정·삭제별 캐시 전략과 실패 복구를 확인합니다.

TanStack Query · 고급 설명 10분 2026.09.15

수동 정규화의 구조와 비용을 이해하고 기본 Query 캐시와 비교해 선택합니다.

React React · 고급 설명 8분 2026.09.14

shadcn/ui는 완성된 UI 패키지를 단순히 import해서 쓰는 방식과 조금 다릅니다. CLI가 프로젝트 설정을 확인하고 필요한 컴포넌트 소스를 프로젝트 안에 추가합니다. 생성된 코드를 프로젝트가 직접 소유하고 수정한다는…

React React · 중급 설명 7분 2026.09.14

화면이 하나일 때는 조건부 렌더링만으로도 충분합니다. 하지만 목록·상세·설정처럼 URL로 구분해야 하는 화면이 생기면 라우팅 계층이 필요합니다.

TanStack Query TanStack Query · 중급 설명 10분 2026.09.12

이전·다음 페이지 이동을 useQuery로 구현하고, v5 placeholderData와 keepPreviousData로 대기 중 목록을 유지합니다. 마지막 페이지, 이동 실패, 재시도와 캐시 복귀까지 테스트합니다.

TanStack Query TanStack Query · 중급 설명 9분 2026.09.12

제목 입력부터 useMutation 저장, 실패 시 입력 보존과 재제출, invalidateQueries 완료 대기까지 하나의 폼으로 완성합니다. 저장 성공 뒤 목록 읽기 실패도 별도 상태로 처리합니다.

React React · 초급 설명 7분 2026.09.12

state는 화면에 보여야 하는 값을 관리할 때 사용합니다. 반면 렌더링에는 필요하지 않지만 컴포넌트가 기억해야 하는 값이나 실제 DOM 요소에 접근해야 할 때는 ref가 더 적합할 수 있습니다.

React React · 중급 설명 7분 2026.09.12

TaskFlow가 작을 때는 App에서 useState와 여러 이벤트 함수를 관리해도 충분합니다. 하지만 작업 추가·완료·삭제처럼 변경 규칙이 늘어나고, 여러 컴포넌트가 같은 상태와 변경 함수를 사용하기 시작하면 App의 책임…