📚 진행한 공부

• Next.js Route Handlers
• TypeScript 복습

📗 Route Handlers

[공부 목표]

• Next.js로 프로젝트를 세팅하고 React와의 차이점 이해
• Next.js의 특징인 파일 기반 라우팅 이해
• 파일 기반 라우팅에 꼭 필요한 특별한 파일들 이해
• 페이지 이동과 관련된 여러 기능에 대한 이해

---

📖 01. Full Stack이란?

웹 애플리케이션이 정상적인 모습을 갖추기 위해선 보통 이러한 내용이 필요함

• FE = FrontEnd
  • 브라우저 상(또는 모바일 앱 등)에 보여지는 부분으로, UI 영역

• BE = BackEnd
  • 외부의 어떤 요청이 발생했을 때, 데이터 핸들링 등 주요 비즈니스 로직을 수행하는 영역

• DB = DataBase
  • 백엔드에 의해 핸들링 되는, 웹 애플리케이션에서 관리되는 모든 데이터베이스

---

📖 02. Router Handlers

공식 문서에서는 다음과 같이 소개하고 있음

allow you to create custom request handlers for a given route using the Web Request and Response APIs.

여기서 말하는 Web 요청 및 응답 API를 다루는 것. HTTP를 배우며 우린 웹 환경에서 요청과 응답을 서로 주고 받는 방법을 배웠고 그것은 대체로 REST API로 설명이 됨

• GET / POST / PATCH / PUT / DELETE

정도가 될 것이고, Router Handlers에서 이 부분을 만듬

app directory 내부에 route.ts 파일을 만나면 기본적으로 Next.js는 router handlers 로 인식함

---

📗 TypeScript 복습

📖 01. TypeScript 쓰는 이유

• JavaScript는 Dynamic Typing 가능함. 5 - '3' 이런 경우에도 원래는 숫자 - 숫자만 가능하지만 JS가 알아서 문자열 3을 숫자로 바꿔줌. 즉, 코드를 길게 짤 땐 자유도 & 유연성은 오히려 안 좋아짐 (프로젝트 커질 수록 단점뿐임)

• TypeScript는 타입을 엄격히 검사해주기 때문에 에러를 바로잡기 쉽고, 또한 오타도 잡아줌
  코드 에디터 부가기능 역할로 봐도 무방함

• 이로 인해 타입 안정성이 보장되고 생산성이 향상됨

---

📖 02. 기본 타입 선언

• 문자열 : let hello: string = "hi"!;
• 숫자 : let num: number = 123;
• 배열 :

let arr: number[] = [1,2,3];
let arr1: Array<number> = [1,2,3];
let arr2: Array<string> = ["hi", "hihi"];
let arr4: [string, number] = ["hi", 24];

• 객체 :

let hwi: object = { name: "hwi", age: 24 };
let person: { name: string; age: number } = {
  name: "hwi",
  age: 24
};
- 불리언 : `let trueFalse: boolean = true;`

• 튜플 : 배열의 서브타입
  무조건 정해진 타입을 순서대로 써야 함

let a: [string, number]; // 튜플 타입으로 선언

a = ["hi", 5]; // 성공
a = [5, "h1"]; // 오류 (순서가 안 맞음)
a = ["h1", 5, 521]; // 오류 (개수가 안 맞음)

---

📖 03. 함수 선언

TypeScript 함수는 JavaScript와 마찬가지로 기명 함수(named function)과 익명 함수(anonymous function)으로 만들 수 있음.

이를 통해 API에서 함수 목록을 작성하던지 일회성 함수를 써서 다른 함수로 전달하던지 애플리케이션에 적합한 방법을 선택할 수 있음

(3)-1. 함수 타입 선언

TypeScript에선 파라미터와 return 값의 타입 선언 가능

function add(a: number, b: number): number {
	return a + b;
}

(3)-2. 선택적 매개변수 (optional parameter)

optional parametter는 ?를 앞에 붙여주면 됨

function addName(firstName: string, lastName?: string) {
	if (lastName) {
    	return firstName + " " + lastName;
    } else {
    	return firstName;
    }
}

---

📖 04. interface

TypeScript는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이 핵심 원칙 중 하나임. 이를 "덕타이핑(duck typing)" 혹은 "구조적 서브타이핑(structural subtyping)"이라고도 함.

TypeScript에서 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고, 코드 안의 계약을 정의하는 뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법임.

즉, 자주 사용하는 타입들을 obj 형태의 묶음으로 정의해 새로운 타입으로 만드는 것

(4)-1. interface 선언

interface User {
  	name: string;
  	age: number;
}

(4)-2. 변수 활용

const hwi: User = {name: "hwijin", age: 24}

(4)-3. 함수 인자로 활용

function getUser(user: User) {
	console.log(user);
}

getUser({name: "hwijin", age: 24});

(4)-4. 함수 구조 활용

interface Add {
	(a: number, b: number): number;
}

let handleAdd: Add = (a, b) => a + b;

console.log(handleAdd(2,7));

(4)-5. 배열 활용

interface NumberArray {
[index: number]: number;
}

let arr: NumberArray = [2, 5, 7];

(4)-6. interface 확장

interface Person {
	name: string;
  	age: number;
}

interface Job extends Person {
	job: string;
}

const hwijin: Job = {
	name: "hwijin",
  	age: 24,
  	job: "Developer"
};

---

📖 05. Type

타입 키워드는 interface와 다르게 새로운 타입을 생성하는 것이 아닌 별칭 부여를 하는 것

(5)-1. 타입 별칭 선언

type StringOrBoolean = string | boolean;

const a: StringOrBoolean = "hihi~";
const b: StringOrBoolean = false;

(5)-2. type과 interface 차이

타입 별칭과 인터페이스의 가장 큰 차이점 ➡️ 타입의 확장 가능 / 불가능 여부
인터페이스는 확장이 가능, 타입 별칭은 불가능. 따라서 interface가 사용하기에 더 편리함

---

📖 06. 연산자 (Operator)

(6)-1. 유니온 타입 (Union Type)

한 개 이상의 type을 선언할 때 사용할 수 있음
| 키워드 사용

function strOrNum (value: string | number) {
	if(typeof value === "string") {
    	return 1
    } else if (typeof value === "number") {
    	return 2
    } else {
    	throw new TypeError("문자열 또는 숫자만 가능");
    }
}

(6)-2. 교차 타입 (Intersection Type)

합집합과 같은 개념
함수 호출의 경우, 함수 인자에 명시한 type를 모두 제공해야 함
& 키워드

interface Person {
	name: string;
  	age: number;
}

interface Job {
	job: string
  	skill: string;
}

type human = Person & Job;

let aHuman: human = {
	name: "hwijin",
  	age: 24,
  	job: "Developer",
  	skill: "React, TypeScript, NextJS"
};

📖 07. Class

(6)-1. 접근 제한자

클래스 기반 객체 지향 언어가 지원하는 접근 제한자 public, private, protected를 지원하며 의미 또한 동일

(6)-2. Class에서의 타입 선언

class Person {
	private name: string;
  	public age: number;
  	readonly job: string;
  
  constructor(name: string, age: number, job: string) {
  	this.name = name;
    this.age = age;
    this.job = job;
  }
}

---

📖 08. Enum

이름이 있는 상수들의 집합을 정의할 수 있음. 열거형을 사용하면 의도를 문서화 하거나 구분되는 사례 집합을 더 쉽게 만들 수 있음. TypeScript는 숫자와 문자열 기반 열거형을 제공

(8)-1. 숫자형 Enum

enum Food {
	Chicken, // 0
  	rice, // 1
  	Pizza // 2
}

const likeFood = Food.Pizza; // 2

(8)-2. 문자영 Enum

enum Human {
	kim = "김",
 	park = "박"
}

const human = Human.kim; // 김

---

📖 09. 제네릭

C#과 Java 같은 언어에서 재사용 가능한 컴포넌트를 생성하는 도구상자의 주요 도구 중 하나는 제네릭임. 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있음

제네릭을 활용하면 같은 기능의 함수를 중복해서 만들 필요가 없고 타입 추론에서 강점을 가진다는 장점이 있음

(8)-1. 제네릭 선언
<T>처럼 타입을 선언함

function numberLog<T>(number: T): T {
	console.log(number);
  	return number;
}

numberLog<number>(1234124)=

(8)-2. interface에 제네릭 선언

interface Coffee<T> {
	price: number;
  	caffeine: <T>
}

const americano: Coffee<>