TypeScript Utility Types Partial Pick Omit Record 실전
실무에서는 비슷한 객체 타입을 여러 번 직접 작성하는 일이 많습니다.
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
TypeScript 제네릭 제약과 keyof 안전한 helper 만들기
제네릭은 여러 타입에 재사용할 수 있지만 너무 자유로우면 함수 내부에서 아무 property도 사용할 수 없습니다.
TypeScript keyof typeof 인덱스 접근 타입 사용법
타입을 직접 반복해서 작성하는 대신 이미 존재하는 객체와 타입에서 필요한 정보를 추출할 수 있습니다.
TypeScript type vs interface 객체 타입 설계 기준
TypeScript에서 객체 타입을 작성하다 보면 type과 interface 중 무엇을 써야 하는지 자주 고민하게 됩니다.
TypeScript 7 설치와 tsconfig strict 첫 실행
이번 글에서는 TypeScript 7을 실제 설치하고 tsc와 tsconfig를 이용해 첫 타입 검사를 실행합니다.
Tailwind CSS v4 설치: React Vite 프로젝트 연결과 첫 클래스 적용
React·TypeScript·Vite 프로젝트에 Tailwind CSS v4를 설치하고 Vite 플러그인과 CSS를 연결합니다. 첫 유틸리티 적용부터 TaskFlow 프로젝트 연결까지 단계별로 확인합니다.
Next.js 캐시 구조 Request Data Full Route Router Cache
Next.js 캐시를 하나의 fetch cache라고만 이해하면 데이터가 왜 안 바뀌는지, router.refresh가 무엇을 갱신하는지 설명하기 어렵습니다.
Next.js TanStack Query SSR HydrationBoundary
TanStack Query 전체 문법은 별도 과정에서 다룹니다. 이 글에서는 Next.js App Router와 결합되는 부분만 학습합니다.
Next.js 인증 페이지와 Proxy 접근 제어
인증된 사용자만 접근할 페이지가 생기면 요청 초기에 redirect할 수 있습니다. 하지만 Proxy에서 통과시켰다고 서버 데이터 권한 검증까지 끝난 것은 아닙니다.
Next.js Auth.js 로그인 세션 로그아웃
인증은 로그인 화면만 만드는 문제가 아닙니다. 서버에서 현재 사용자를 확인하고, 브라우저에서도 세션에 따라 UI를 바꾸고, 로그아웃 후 캐시와 화면을 정리해야 합니다.