제네릭(Generics)제네릭은 타입스크립트에서 재사용 가능한 컴포넌트(함수, 클래스, 인터페이스 등)를 만들 때 사용되는 기능. 한 마디로, 코드를 작성할 때 타입을 미리 정하지 않고, 그 코드를 사용할 때(호출할 때) 타입을 결정할 수 있도록 해주는 문법.예를 들어 특정 타입의 데이터를 배열로 받아서 첫 번째 요소를 반환하는 함수를 만든다고 할 때// 1. 특정 타입에만 동작하는 함수 (string만)function getFirstString(arr: string[]): string { return arr[0];}// 2. 다른 타입을 처리하려면 또 다른 함수를 만들어야 함 (number도)function getFirstNumber(arr: number[]): number { return ..

1. 기본 타입1-1 원시 타입 boolean (불리언): true 또는 false 값let isDone: boolean = false;number (숫자): 정수, 부동 소수점 숫자 등 모든 숫자let decimal: number = 6;let hex: number = 0xf00d;let binary: number = 0b1010;string (문자열): 텍스트 데이터. 백틱(`)을 사용한 템플릿 리터럴도 가능let fullName: string = "John Doe";let sentence: string = `Hello, my name is ${fullName}.`;null과 undefined: 자바스크립트와 동일한 의미를 가짐. 기본적으로 다른 모든 타입의 하위 타입으로 간주let u: undefi..

서버 컴포넌트 / 클라이언트 컴포넌트 서버 컴포넌트는 말 그대로 보여주기적 요소만 있는 컴포넌트, 또는 동적 기능이 없는 컴포넌트정적 렌더링과 보안적 특성이 강함 -> axios,fetch 등 get 요청을 할 때는 서버 컴포넌트에서 사용하는게 좋음 대신 상태/이벤트 핸들링이 불가능 -> useState, useEffect 같은 훅 사용이 불가능정적인 화면이므로 인터랙션이 불가능.// 서버 컴포넌트 (초기 데이터 fetch)export default async function Page() { const data = await fetch('https://api.example.com/items'); const items = await data.json(); return ;} 가장 먼저 파일 최상..

설치 명령어 일반npx create-next-app 프로젝트명 yarn yarn create next-app 프로젝트명 설치 시 설정 분기 Would you like to use TypeScript? ... YesWould you like to use ESLint? ... YesWould you like your code inside a src/ directory? ... YesWould you like to use App Router? (recommended) ... YesWould you like to use Turbopack for next dev? ... YesWould you like to customize the import alias (@/* by default)? ... No 리액트와 ..