타입 가드(Type Guard)란?타입가드는 TypeScript 에서 런타임에 조건문을 사용하여 변수의 타입을 검사하고, 타입 범위를 좁혀주는 기능이다.간단히 말해, "이 값이 정말로 어떤 타입인지 TypeScript 에 확신을 주는" 메커니즘이다.타입가드를 사용하면 as 를 사용하는 타입 어서션보다 안전하게 코드를 작성할 수 있다. 항목설명목적여러 타입으로 지정된 값을 특정 위치에서 원하는 타입으로 구분작용 시점런타임에서 조건문으로 타입 검사효과조건 분기 블록 이후 변수 타입이 필터링되어 추론안전성실행 시 에러 발생 가능성이 높은 as 대신 안전한 타입 사용 타입가드 반환 타입(Type Predicate)타입가드 함수의 반환 타입은 타입 서술어(Type Predicate) 라고 부르며, is 키워드를 ..

'use client'import { useQuery } from '@tanstack/react-query'import { getRuntimeHomeBootstrapQueryOptions } from '@/lib/obo-api/query-options'import type { RuntimeHomeBootstrapQueryParams } from '@/lib/obo-api/query-options'export function useRuntimeHomeBootstrapQuery(params: RuntimeHomeBootstrapQueryParams) { return useQuery(getRuntimeHomeBootstrapQueryOptions(params))} 위 코드는 Next.js 클라이언트 컴포넌트..

.ts 와 .tsx 의 차이점은 JSX 문법을 사용하느냐 안하느냐 차이다. .ts 파일일반 TypeScript 파일export type User = { id: number; name: string;} 또는// TypeScriptexport function sum(a: number, b: number) { return a + b;} 이런 식으로 타입, 함수, API 호출, 유틸 등을 작성한다. 예시types/user.tsservices/userService.tsutils/date.ts .tsx 파일TypeScript + JSXReact 화면을 그릴 때 사용한다.// TypeScriptexport default function Home() { return ( Hello Ne..

전체 트리project-root/├─ app/ # App Router 기준 URL 진입점│ ├─ layout.tsx # 전역 레이아웃│ ├─ page.tsx # /│ ├─ global-error.tsx # 전역 에러 화면│ ├─ not-found.tsx # 404│ ├─ loading.tsx # 전역 로딩 UI│ ├─ api/ # API Route Handler│ │ └─ .../route.ts # /api/** 엔드포인트│ ├─ main/│ │ └─ page.tsx # /main│ ├─ view/│ │ └─ [...i..

핵심 차이 요약구분JavaScriptTypeScript타입동적 타입(실행 시 결정)정적 타입(컴파일 시 결정)타입 표기없음: 타입명 사용(: string, : number 등)파일 확장자.js.ts(React → .tsx)컴파일브라우저에서 직접 실행TypeScript → JavaScript 로 변환 필요(tsc)장점빠르게 작성 가능, 유연함타입 안정성, 에러 조기 발견, 유지보수 용이 변수 선언 비교변수의 타입 지정// JavaScriptlet name = "한화"let age = 25 : string, : number → 타입을 명시(컴파일 시에만 사용, JS에서는 사라짐)타입을 생략하면 타입 추론으로 자동 판별let name = "한화" // TypeScript 가 자동으로 string 타입으로 ..

VSCODE 에서 npm 명령어를 사용해 Vite React 프로젝트를 생성했다. 생성 후 가장 먼저 보는 파일은 index.html 이고, 여기서 src/main.jsx 같은 엔트리 파일을 불러온다. main.jsx 는 React 앱을 실제 DOM 의 root 요소에 붙이고, 그다음 App.jsx 가 루트 컴포넌트로 실행된다. 즉 흐름은 아래와 같다.index.html : 가장 바깥 HTML 껍데기main.jsx / main.tsx : React 시작점App.jsx / App.tsx : 메인 화면 컴포넌트// index.html // main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/cl..