TypeScript 제네릭 쉽게 이해하기: props와 API 응답 타입으로 감 잡기
TypeScript 제네릭을 React props와 API 응답 타입 예시로 쉽게 이해할 수 있도록 정리합니다. any와 제네릭의 차이, GenericList와 ApiResponse 활용 흐름을 함께 살펴봅니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
총 87개의 글
React TypeScript optional props 기본값 처리: undefined·null 차이
React TypeScript에서 optional props와 기본값을 구분하고 구조 분해 기본값, undefined·null, optional callback, defaultProps 처리 기준을 예제로 설명합니다.
React TypeScript 기본 구조: tsx 파일과 props 타입 기준
React에서 TypeScript를 처음 사용할 때 헷갈리기 쉬운 .ts와 .tsx 차이, 컴포넌트 파일 구조, props 타입 작성 위치를 정리합니다. 처음부터 복잡한 타입 설계로 들어가기 전 기본 구조를 잡는 데 초점을 맞…
TypeScript children 타입: ReactNode와 PropsWithChildren 차이
React TypeScript에서 children 타입을 지정할 때 ReactNode, PropsWithChildren, ReactElement, JSX.Element를 어떻게 구분해야 하는지 정리합니다. children을 필…
React 컴포넌트 props 타입 지정하기: 부모와 자식 사이의 값 구조 잡기
React에서 TypeScript로 컴포넌트 props 타입을 지정하는 기본 방법을 정리합니다. 부모 컴포넌트가 자식 컴포넌트에 넘기는 값의 구조를 타입으로 고정하고, 필수 props와 함수 props를 실제 UI 컴포넌트 기…
TypeScript 실무 로드맵
TypeScript 기초 문법을 배운 뒤 React 프로젝트에서 props, state, API, 상태 관리, 폼, Next.js까지 어떤 순서로 타입을 적용하면 좋은지 정리합니다.
TypeScript란 무엇인가: JavaScript와 차이 정리
TypeScript가 JavaScript를 대체하는 언어가 아니라 JavaScript 위에 타입 검사를 더하는 도구라는 점을 입문자 기준으로 정리합니다. 정적 타입 검사, JavaScript 변환, 런타임과의 차이를 함께 설명…
React Cannot update 오류 해결: 렌더링 중 setState 원인
React에서 Cannot update a component while rendering a different component 경고가 발생하는 원인을 렌더링 중 setState 호출 위치를 기준으로 정리합니다.
Next.js Dynamic server usage 오류 해결: cookies headers 기준
Next.js App Router에서 Dynamic server usage 오류가 발생하는 이유를 cookies와 headers 사용 위치 중심으로 정리합니다. 정적 렌더링과 동적 렌더링 중 어떤 방향으로 수정할지 판단하는 기…
React Maximum update depth exceeded 오류 해결: 무한 렌더링 원인 찾기
React에서 Maximum update depth exceeded 오류가 발생하는 원인을 setState 호출 위치, useEffect 의존성 배열, props와 state 동기화 구조를 기준으로 정리합니다.