타입 가드(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..

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..

컴포넌트컴포넌트는 UI 를 잘게 나눈 조각이다.버튼, 카드, 네비게이션, 리스트 같은 걸 각각 독립된 컴포넌트로 만들고, 필요할 때 조합해서 화면을 구성한다.쉽게 말하면, 화면 조각을 만드는 JavaScript 함수이다. React 에서 컴포넌트는 보통 함수로 만든다.function Hello() { return 안녕하세요;} 위 함수를 사용하면 처럼 태그로 이용해서 사용한다. Props (속성)Props 는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 입력값이다. 쉽게 말하면 함수의 매개변수 같은 개념이라 보면 된다.function Hello(props) { return {props.name}님 안녕하세요;} 사용 예 결과홍길동님 안녕하세요 더 많이 쓰는 방식 (구조분해)// 부모 컴포넌트functi..

JSX(Javascript Syntax eXtension) 문법이란? JSX 는 Javascript 를 확장한 문법이다. JSX 는 React 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 브라우저에서 babel 을 사용하여 일반 Javascript 문법으로 변환된다. // JSX 문법 사용 function App() { return( 안녕하세요? ) } // babel 을 사용한 문법 변환 function App() { return React.createElement("h1", null, "안녕하세요?"); } JSX 문법은 Javascript 파일에 HTML 코드를 작성한다. JSX 문법 1. JSX 문법에서 return 시 반드시 부모요소는 1개여야 한다. // 정상적인 문법..