연습장

TypeScript 두 번째

자바응애 — Tue, 22 Jul 2025 17:15:05 +0900

제네릭(Generics)

제네릭은 타입스크립트에서 재사용 가능한 컴포넌트(함수, 클래스, 인터페이스 등)를 만들 때 사용되는 기능. 한 마디로, 코드를 작성할 때 타입을 미리 정하지 않고, 그 코드를 사용할 때(호출할 때) 타입을 결정할 수 있도록 해주는 문법.

예를 들어 특정 타입의 데이터를 배열로 받아서 첫 번째 요소를 반환하는 함수를 만든다고 할 때

// 1. 특정 타입에만 동작하는 함수 (string만)
function getFirstString(arr: string[]): string {
    return arr[0];
}

// 2. 다른 타입을 처리하려면 또 다른 함수를 만들어야 함 (number도)
function getFirstNumber(arr: number[]): number {
    return arr[0];
}

이 방식은 string이나 number뿐만 아니라 boolean, 객체 등 다양한 타입에 대해 함수를 계속해서 만들어야 하는 비효율성이 있다. 이때 제네릭을 사용하면 하나의 함수로 모든 타입을 처리 가능.

// 제네릭 T (Type의 약자)를 사용하여 어떤 타입이든 받을 수 있게 함
function getFirstElement<T>(arr: T[]): T {
    return arr[0];
}

let numArr = [1, 2, 3];
let strArr = ["a", "b", "c"];

let firstNum = getFirstElement(numArr); // T는 number로 추론됨, firstNum은 number 타입
let firstStr = getFirstElement(strArr); // T는 string으로 추론됨, firstStr은 string 타입

// 타입을 명시적으로 지정할 수도 있습니다.
let firstBoolean = getFirstElement<boolean>([true, false]); // firstBoolean은 boolean 타입

위 예시에서 <T>는 "이 함수가 어떤 특정 타입 T를 사용할 것이다"라고 선언하는 것. 함수를 호출할 때 T의 실제 타입이 결정되며, 타입스크립트는 이 T를 사용하여 함수 내부의 타입 검사를 수행.

즉,

제네릭을 사용하는 주된 이유:

코드 재사용성: 다양한 타입에 대해 동일한 로직을 적용할 수 있어 중복 코드를 줄임.
타입 안정성: any를 사용하는 것과 달리, 제네릭은 사용 시점에 타입을 명확히 지정하거나 추론하여 타입 안정성을 유지.
유연성: 코드를 작성할 때는 유연하게 타입을 비워두고, 실제 사용 시점에서 구체적인 타입을 지정할 수 있음.

1. 인터페이스(Interface)에 제네릭 사용

인터페이스에 제네릭을 사용하면, 인터페이스가 정의하는 구조가 특정 타입에 국한되지 않고 다양한 타입을 포용할 수 있게 됨

// 제네릭 인터페이스: Box
// <T>는 이 인터페이스를 사용할 때 결정될 타입.
interface Box<T> {
    value: T; // value 속성은 T 타입의 값을 가짐.
    label: string;
    // T 타입의 값을 받아들이는 메서드도 정의할 수 있음.
    unwrap(): T;
}

// string 타입을 위한 Box 인스턴스
const stringBox: Box<string> = {
    value: "Hello Generics",
    label: "문자열 상자",
    unwrap() {
        return this.value;
    }
};

console.log(stringBox.unwrap()); // "Hello Generics"
// stringBox.value = 123; // 오류: 'number' 타입은 'string' 타입에 할당될 수 없음

// number 타입을 위한 Box 인스턴스
const numberBox: Box<number> = {
    value: 123,
    label: "숫자 상자",
    unwrap() {
        return this.value;
    }
};

console.log(numberBox.unwrap()); // 123

// 커스텀 객체 타입을 위한 Box 인스턴스
interface User {
    id: number;
    name: string;
}

const userBox: Box<User> = {
    value: { id: 1, name: "Alice" },
    label: "사용자 상자",
    unwrap() {
        return this.value;
    }
};

console.log(userBox.unwrap().name); // "Alice"

위 예시에서 Box<T> 인터페이스는 어떤 타입 T라도 value 속성의 타입으로 받을 수 있게 정의되어 있음. 이를 통해 string, number, User 등 다양한 타입의 값을 담는 Box를 생성.

2. 타입 별칭(Type Alias)에 제네릭 사용

타입 별칭 또한 인터페이스와 유사하게 제네릭을 사용하여 유연한 타입 정의를 할 수 있음. 타입 별칭은 인터페이스보다 더 다양한 타입 조합(유니온, 튜플 등)에도 제네릭을 적용할 수 있다는 장점이 있음.

// 제네릭 타입 별칭: Pair
// <K, V>는 각각 키(Key)와 값(Value)의 타입.
type Pair<K, V> = {
    key: K;
    value: V;
};

// string 키와 number 값을 가지는 Pair
const idValuePair: Pair<string, number> = {
    key: "userId",
    value: 12345
};

console.log(idValuePair.key, idValuePair.value); // "userId" 12345

// number 키와 boolean 값을 가지는 Pair
const statusPair: Pair<number, boolean> = {
    key: 200,
    value: true
};

console.log(statusPair.key, statusPair.value); // 200 true

// 제네릭 타입 별칭: ArrayOf<T> (배열 타입에 별칭을 부여)
type ArrayOf<T> = T[];

const numbers: ArrayOf<number> = [10, 20, 30];
// numbers = ["hello"]; // 오류: 'string' 타입은 'number' 타입에 할당될 수 없음

// 제네릭 타입 별칭: Result<T, E> (성공 또는 실패 결과를 나타낼 때 유용)
type Result<T, E> = { success: true; data: T } | { success: false; error: E };

function fetchDataResult(): Result<string, Error> {
    const success = Math.random() > 0.5;
    if (success) {
        return { success: true, data: "데이터를 성공적으로 가져왔습니다!" };
    } else {
        return { success: false, error: new Error("네트워크 오류 발생!") };
    }
}

const apiResponse = fetchDataResult();
if (apiResponse.success) {
    console.log(apiResponse.data); // 'data'는 string 타입
} else {
    console.log(apiResponse.error.message); // 'error'는 Error 타입
}

Pair<K, V> 타입 별칭은 다양한 키와 값 타입을 갖는 객체를 정의할 때 유용, Result<T, E>는 비동기 작업의 성공/실패 결과를 명확한 타입으로 표현할 수 있게 해준다.

3. 변수(Variable)에 제네릭 사용 (함수, 클래스, 인터페이스 등의 인스턴스)

변수 자체에 제네릭 타입을 직접 선언하는 경우는 드물지만, 제네릭이 적용된 함수, 클래스, 인터페이스 등의 타입을 변수에 할당할 때 제네릭 타입 매개변수를 지정하여 사용.

// 1. 제네릭 함수를 변수에 할당하는 경우
function identity<T>(arg: T): T {
    return arg;
}

// 변수 myIdentity는 제네릭 함수 identity의 타입 시그니처를 가짐.
// 타입스크립트가 자동으로 T를 number로 추론.
let myIdentity = identity(100); // myIdentity: number

// 명시적으로 T를 string으로 지정할 수도 있음.
let myStringIdentity: <T>(arg: T) => T = identity;
let resultString = myStringIdentity<string>("TypeScript"); // resultString: string

// 2. 제네릭 클래스 인스턴스를 변수에 할당하는 경우
class LinkedListNode<T> {
    constructor(public value: T, public next: LinkedListNode<T> | null = null) {}
}

// ListNode 변수는 string 타입의 값을 가지는 LinkedListNode 인스턴스.
const headNode: LinkedListNode<string> = new LinkedListNode("first");
headNode.next = new LinkedListNode("second");

console.log(headNode.value); // "first"
console.log(headNode.next?.value); // "second"

// 3. 제네릭 인터페이스의 인스턴스를 변수에 할당하는 경우 (위 인터페이스 예시에서 다시 가져옴)
interface Box<T> {
    value: T;
    label: string;
}

// string 타입 값을 담는 Box 인스턴스를 변수에 할당
const myProductBox: Box<string> = {
    value: "Laptop",
    label: "전자제품"
};

console.log(myProductBox.value); // "Laptop"

// number 타입 값을 담는 Box 인스턴스를 변수에 할당
const myQuantityBox: Box<number> = {
    value: 500,
    label: "재고수량"
};

console.log(myQuantityBox.value); // 500

위 예시들처럼, 변수 자체에 <T>와 같은 제네릭 선언을 하는 것이 아니라, 제네릭이 적용된 다른 타입(함수 타입, 클래스 타입, 인터페이스 타입)을 변수에 할당할 때 제네릭 타입 인자(string, number 등)를 지정하여 사용.

인터페이스(Interface)와 타입 별칭(Type Alias)의 차이점과 공통점

타입스크립트에서 객체의 모양(shape)을 정의하거나 복잡한 타입을 재사용할 때 인터페이스(interface)와 타입 별칭(type)이라는 두 가지 방법이 있음. 이 둘은 많은 부분에서 유사하게 사용될 수 있지만, 중요한 차이점과 그에 따른 사용 권장 사항이 있다.

공통점

객체의 타입 정의: 가장 기본적인 공통점은 둘 다 객체의 구조(속성과 메서드)를 정의하는 데 사용된다.

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

type PersonType = {
    name: string;
    age: number;
};

const user1: PersonInterface = { name: "Alice", age: 30 };
const user2: PersonType = { name: "Bob", age: 25 };

함수의 타입 정의: 함수 시그니처를 정의하는 데 사용.

interface GreetFunctionInterface {
    (message: string): void;
}

type GreetFunctionType = (message: string) => void;

const greet: GreetFunctionInterface = (msg) => console.log(msg);
const sayHello: GreetFunctionType = (msg) => console.log(`Hello, ${msg}`);

확장(extends) 또는 인터섹션(&)을 통한 결합: 두 타입 모두 기존 타입을 확장하거나 결합하여 새로운 타입을 만들 수 있다.

참고: 인터페이스도 &를 사용하여 인터섹션 타입을 만들 수 있고, 타입 별칭도 extends와 비슷한 방식으로 인터섹션(&)을 통해 확장 효과를 낼 수 있다.

// 인터페이스 확장
interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Golden" };

// 타입 별칭 인터섹션
type Draggable = { drag(): void; };
type Resizable = { resize(): void; };
type UIElement = Draggable & Resizable; // 두 타입의 모든 속성을 가짐
const button: UIElement = {
    drag: () => console.log("dragging"),
    resize: () => console.log("resizing")
};

제네릭 사용: 둘 다 제네릭과 함께 사용가능.

interface BoxInterface<T> {
    value: T;
}
type BoxType<T> = {
    value: T;
};

const stringBox: BoxInterface<string> = { value: "hello" };
const numberBox: BoxType<number> = { value: 123 };

차이점

확장 방식 (Declaring Merging / Declaration Augmentation): 인터페이스는 동일한 이름으로 여러 번 선언하면 자동으로 병합(Merge)됨. 타입 별칭은 동일한 이름을 두 번 정의하면 오류가 발생.

type MyType = { a: string; };
// type MyType = { b: number; }; // 오류: 중복 식별자 'MyType'

// Interface Merging (인터페이스만 가능!)
interface Car {
    brand: string;
}

interface Car { // 동일한 이름의 Car 인터페이스를 다시 선언
    model: string;
}

const myCar: Car = { brand: "Hyundai", model: "Sonata" }; // brand와 model 모두 가짐
// `myCar`는 `{ brand: string; model: string; }` 타입이 됨.

다양한 타입 정의 능력: 타입 별칭은 인터페이스보다 더 다양한 타입을 정의할 수 있다.

원시 타입, 유니온 타입, 튜플 타입, 리터럴 타입 등: 인터페이스는 주로 객체(object)의 형태를 정의하는 데 사용되지만, 타입 별칭은 객체 외의 다양한 타입 조합을 정의할 수 있다.

// Type Alias만 가능한 경우
type ID = string | number; // 유니온 타입
type Point = [number, number]; // 튜플 타입
type Direction = "up" | "down" | "left" | "right"; // 리터럴 유니온 타입
type MyString = string; // 원시 타입의 별칭

// interface MyID = string | number; // 오류: 인터페이스는 유니온 타입을 정의할 수 없음
// interface MyPoint = [number, number]; // 오류

implements 키워드 사용: 클래스가 특정 타입을 따르도록 강제할 때, 인터페이스는 implements 키워드를 통해 클래스가 해당 인터페이스를 구현하도록 강제할 수 있음. 타입 별칭은 이 기능을 직접적으로 제공하지 않음.

interface Shape {
    getArea(): number;
}

class Circle implements Shape { // 클래스가 인터페이스를 구현
    constructor(public radius: number) {}
    getArea() {
        return Math.PI * this.radius * this.radius;
    }
}

// class Square implements Point { /* 오류: 'Point'는 인터페이스가 아님 */ }

언제 무엇을 사용해야 하는가?

객체의 형태를 정의하고, 나중에 확장 또는 병합될 가능성이 있다면 interface
- 특히 라이브러리를 작성하거나, 서드파티 모듈의 타입을 확장해야 할 때 매우 유용
- 객체 지향적인 개념(implements, extends)과 더 잘 어울림.
- 명시적인 객체 구조를 선언하는 데 더 적합.
객체 외의 다른 타입(원시 타입, 유니온 타입, 튜플, 리터럴 타입 등)을 정의하거나, 복잡한 타입 조합에 이름을 부여하고 싶다면 type
- 함수 시그니처를 정의할 때 type이 더 간결할 수 있다.
- 인터섹션 타입을 통해 여러 타입을 결합할 때 유용

일반적인 규칙:

많은 경우에 둘 중 아무거나 사용해도 무방하며, 개인 또는 팀의 코딩 스타일에 따라 선택할 수 있다. 하지만 위에서 설명한 차이점들을 고려하여 적절한 도구를 선택하는 것이 좋다. 최근에는 유연성 때문에 type 키워드의 사용이 늘어나는 추세

TypeScript 첫 번째

자바응애 — Tue, 22 Jul 2025 16:32:09 +0900

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: undefined = undefined;
let n: null = null;
```
symbol (심볼): ECMAScript 2015에 추가된 고유하고 변경 불가능한 값
```
const sym: symbol = Symbol('key');
```
bigint (큰 정수): ES2020에 추가된, 매우 큰 정수를 다룰 때 사용
```
let bigNumber: bigint = 100n;
```

1-2 특별 타입

any (모든 타입): 어떤 타입의 값이라도 할당할 수 있음을 나타냄. 타입스크립트의 장점을 해치므로 가능한 한 사용을 피해야 함.
```
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // boolean
```
unknown (알 수 없는 타입): any와 비슷하게 어떤 타입의 값이든 가질 수 있지만, any보다 타입 안정성이 높음. unknown 타입의 값을 사용하려면 먼저 타입을 좁히는 작업(예: typeof 또는 instanceof를 사용한 타입 검사)이 필요.
```
let value: unknown = 10;
value = "hello";

// let someString: string = value; // 오류: 'unknown' 타입은 'string' 타입에 할당될 수 없음

if (typeof value === 'string') {
    let someString: string = value; // 이제 안전하게 string으로 사용 가능
}
```
void (반환 값이 없음): 주로 함수가 아무런 값을 반환하지 않을 때 사용
```
function warnUser(): void {
    console.log("This is my warning message");
}
```
never (절대 도달할 수 없는 타입): 함수가 값을 반환할 수 없거나(항상 예외를 던지거나 무한 루프에 빠지는 경우) 절대 도달할 수 없는 코드 경로를 나타낼 때 사용.
```
function error(message: string): never {
    throw new Error(message);
}

function infiniteLoop(): never {
    while (true) {}
}
```

2. 타입 명시하기

2-1. 변수 타입 명시

변수 이름 뒤에 콜론(:)을 붙이고 타입을 작성

let age: number = 30;
let name: string = "Alice";
let isActive: boolean = true;

2-2 함수 타입 명시

함수의 매개변수와 반환 값에 타입을 명시

// 매개변수 타입 명시
function add(x: number, y: number): number { // 반환 값도 number 타입이라고 명시
    return x + y;
}

let result = add(5, 3); // result는 자동으로 number 타입으로 추론됨
// add("5", 3); // 오류: 'string' 타입의 인수는 'number' 타입의 매개변수에 할당될 수 없음

2-3 배열의 타입은 두 가지 방식으로 정의

요소 타입 뒤에 [ ] 붙이기:
```
let list: number[] = [1, 2, 3];
```
제네릭 배열 타입 Array<엘리먼트타입> 사용:
```
let list: Array<number> = [1, 2, 3];
```

2-4 튜플

튜플은 요소의 개수와 각 요소의 타입이 미리 정해진 배열. 정의된 순서와 타입에 맞춰 값을 할당해야 함.

// string과 number 타입을 가지는 두 개의 요소 튜플
let x: [string, number];

x = ["hello", 10]; // 성공
// x = [10, "hello"]; // 오류: 순서와 타입이 맞지 않음
// x = ["hello", 10, true]; // 오류: 요소 개수가 맞지 않음

2-5 열거형 (enum)

열거형은 특정 값들의 집합에 이름을 부여하는 것. 기본적으로 숫자 열거형으로 동작하며, 문자열 열거형도 가능.

1. 숫자 열거형 (Numeric Enums)

각 멤버는 자동으로 0부터 시작하는 숫자로 할당. 값을 수동으로 지정할 수도 있음.

enum Direction {
    Up,    // 0
    Down,  // 1
    Left,  // 2
    Right  // 3
}

let dir: Direction = Direction.Up; // dir은 0
console.log(dir); // 0
console.log(Direction.Left); // 2

// 값을 수동으로 지정
enum Status {
    Pending = 1,
    Success, // 2
    Failed   // 3
}
console.log(Status.Success); // 2

2. 문자열 열거형 (String Enums)

모든 멤버에게 문자열 값을 할당해야함.

enum UserRole {
    Admin = "ADMIN",
    Editor = "EDITOR",
    Viewer = "VIEWER"
}

let role: UserRole = UserRole.Admin;
console.log(role); // "ADMIN"

2-6 객체

객체의 속성들에 타입을 정의할 수 있음.

// 익명 객체 타입 정의
let user: { name: string; age: number; };

user = {
    name: "Bob",
    age: 25
};

// user = { name: "Bob" }; // 오류: age 속성이 없음

// 선택적 속성 (Optional Properties): ? 를 붙이면 해당 속성이 없어도 됨.
let anotherUser: { name: string; age?: number; };
anotherUser = { name: "Charlie" }; // age 속성 없어도 됨

// 읽기 전용 속성 (Readonly Properties): readonly 를 붙이면 초기 할당 후 변경 불가
let config: { readonly id: string; url: string; };
config = { id: "123", url: "http://example.com" };
// config.id = "456"; // 오류: 읽기 전용 속성이므로 변경 불가

2-7 타입 별칭

복잡한 타입을 재사용하거나 코드의 가독성을 높이고 싶을 때 type 키워드를 사용하여 타입 별칭을 정의할 수 있음.

type User = {
    id: number;
    name: string;
    email?: string; // 선택적 속성
};

type Admin = User & { //type의 확장
	isAdmin: boolean;
}

let admin: User = {
    id: 1,
    name: "Admin User",
    email: "admin@example.com",
    isAdmin: true
};

let guest: User = {
    id: 2,
    name: "Guest User"
};

type Point = [number, number]; // 튜플 타입에 대한 별칭
let coordinate: Point = [10, 20];

type ID = string | number; // 유니온 타입에 대한 별칭 (아래 설명)
let userId: ID = "abc-123";
let productId: ID = 456;

2-8 인터페이스

인터페이스는 객체의 모양(shape)을 정의하는 방법. 객체가 가져야 할 속성과 메서드를 명시. type 별칭과 비슷하지만, 주로 객체의 구조를 정의하는 데 사용되며 확장(extends) 및 구현(implements)이 가능.

interface Person {
    name: string;
    age: number;
    greet(): string; // 메서드 정의
}

class Employee implements Person { // 클래스가 인터페이스를 '구현'
    name: string;
    age: number;
    employeeId: string; // Employee에만 있는 속성

    constructor(name: string, age: number, employeeId: string) {
        this.name = name;
        this.age = age;
        this.employeeId = employeeId;
    }

    greet() {
        return `Hello, my name is ${this.name} and I am an employee.`;
    }
}

let john: Person = {
    name: "John",
    age: 30,
    greet: function() {
        return `Hello, my name is ${this.name}.`;
    }
};

interface Animal {
    name: string;
}

interface Dog extends Animal { // 인터페이스 확장
    breed: string;
}

let myDog: Dog = {
    name: "Buddy",
    breed: "Golden Retriever"
};



interface User{
	name: string
}

interface User{
	age: number
}

const user: User = { //같은 이름의 인터페이스는 병합됨. type은 불가능
	name: "kim",
    age: 20
}

2-9

유니온 타입은 두 개 이상의 타입 중 하나가 될 수 있음을 의미. 파이프 기호(|)를 사용하여 정의.

function printId(id: number | string) {
    console.log(`Your ID is: ${id}`);
    // 여기서 id는 number 또는 string 타입일 수 있으므로,
    // 해당 타입에 공통적으로 사용 가능한 속성/메서드만 직접 접근 가능.

    // 예를 들어
    // id.toUpperCase(); // 오류: number 타입에는 toUpperCase 메서드가 없음
    if (typeof id === "string") {
        console.log(id.toUpperCase()); // 타입 좁히기 후 사용 가능
    }
}

printId(101); // Your ID is: 101
printId("202"); // Your ID is: 202
// printId(true); // 오류: 'boolean' 타입의 인수는 'number | string' 타입에 할당될 수 없음

2-10 인터섹션 타입

인터섹션 타입은 두 개 이상의 타입을 모두 만족하는 타입을 생성하는 것. 앰퍼샌드 기호(&)를 사용하여 정의

interface Draggable {
    drag(): void;
}

interface Resizable {
    resize(): void;
}

type UIElement = Draggable & Resizable; // Draggable과 Resizable의 모든 속성을 가짐

let button: UIElement = {
    drag() { console.log("드래그!"); },
    resize() { console.log("리사이즈!"); }
};

button.drag();
button.resize();

2-11 리터럴 타입

리터럴 타입은 특정 고정된 값 자체를 타입으로 사용하는 것. 특정 문자열, 숫자, 불리언 값만 허용하도록 제한할 때 유용.

TypeScript

type Direction = "north" | "south" | "east" | "west"; // 유니온 리터럴 타입

let move: Direction = "north";
// move = "up"; // 오류: '"up"' 타입은 'Direction' 타입에 할당될 수 없음

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";

function fetchData(url: string, method: HTTPMethod) {
    // ...
}

fetchData("/api/users", "GET");
// fetchData("/api/users", "PATCH"); // 오류

Next.js 두 번째

자바응애 — Tue, 22 Jul 2025 14:15:09 +0900

서버 컴포넌트 / 클라이언트 컴포넌트

서버 컴포넌트는 말 그대로 보여주기적 요소만 있는 컴포넌트, 또는 동적 기능이 없는 컴포넌트

정적 렌더링과 보안적 특성이 강함 -> 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 <ItemList initialItems={items} />;
}

가장 먼저 파일 최상단에 "use client" 작성.

클라이언트 컴포넌트는 실질적 기능과 로직을 수행하는 컴포넌트. useState나 useEffect 등을 사용 가능함. 또한 이벤트 핸들러를 여기서 작성

ajax 중 put, post, delete는 클라이언트 컴포넌트에서 수행. get만 서버 컴포넌트에서 사용. 왜냐하면 앞의 세 메서드는 사용자와의 상호작용과 함께 실행하는게 보통이기 때문

그래서 put, post,delete를 사용할 함수들은 가장 첫 줄에 "use server" 를 달아 함수가 서버에서 실행되도록 명시.

export async function createItem(formData: FormData) {
  'use server';
  const name = formData.get('name');
  const description = formData.get('description');
  // DB 작업...
  console.log('서버에서 아이템 생성:', { name, description });
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 생성되었습니다.' };
}

export async function updateItem(id: string, formData: FormData) {
  'use server';
  const name = formData.get('name');
  // DB 작업...
  console.log(`서버에서 아이템 ${id} 업데이트:`, { name });
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 업데이트되었습니다.' };
}

export async function deleteItem(id: string) {
  'use server';
  // DB 작업...
  console.log(`서버에서 아이템 ${id} 삭제`);
  await new Promise(resolve => setTimeout(resolve, 500));
  revalidatePath('/practice03');
  return { success: true, message: '아이템이 성공적으로 삭제되었습니다.' };
}

또한 Next.js 에서는 axios 보단 fetch를 주로 사용.

axios는 재검증과 캐싱 방식을 제어할 수 없어서 개선된 fetch를 주로 사용한다고 한다.

일단 Next.js는 여기까지 알아보고 클론코딩하면서 막히면 더 알아보는 식으로 진행

아쿠아플라넷 일산 클론 코딩 (개인 프로젝트)

자바응애 — Fri, 18 Jul 2025 13:15:23 +0900

클론 코딩 기간 : 2025.05.16 - 2025.07.17

네트리파이 주소 : https://clone-aquaplanet-ilsan.netlify.app/aquaplanet/ilsan

아쿠아플라넷 일산

clone-aquaplanet-ilsan.netlify.app

깃 주소 : https://github.com/kimsanghoTT/clone-aquaplanet-ilsan.git

GitHub - kimsanghoTT/clone-aquaplanet-ilsan

Contribute to kimsanghoTT/clone-aquaplanet-ilsan development by creating an account on GitHub.

github.com

원본 사이트 아쿠아플라넷 일산 주소 : https://www.aquaplanet.co.kr/ilsan/index.do

아쿠아플라넷 일산

도심 속 해저여행과 정글탐험을 동시에 즐기는 국내 최초 놀이형 생태체험 아쿠아플라넷 일산 입니다.

www.aquaplanet.co.kr

네트리파이 시연용 입력값은 깃 주소 README 참조.

사용 기술 스택

프론트 엔드

사용 언어

JavaScript, CSS, HTML

사용 라이브러리

React, Ant Design, Axios, GSAP, Swiper, Moment, React Scroll, React Barcode, ESLint, Prettier

백 엔드

사용 언어

Java

사용 라이브러리

SpringBoot, Mybatis, Lombok, Spring Mail

데이터베이스

MySQL

Next.js 시작

자바응애 — Fri, 18 Jul 2025 12:47:21 +0900

설치 명령어

일반

npx create-next-app 프로젝트명

yarn

yarn create next-app 프로젝트명

설치 시 설정 분기

Would you like to use TypeScript? ... Yes
Would you like to use ESLint? ... Yes
Would you like your code inside a src/ directory? ... Yes
Would you like to use App Router? (recommended) ... Yes
Would you like to use Turbopack for next dev? ... Yes
Would you like to customize the import alias (@/* by default)? ... No

리액트와 next.js의 다른점은 라우터를 따로 쓸 필요가 없다는 것.

게다가 App.js가 없다. app폴더가 곧 Router가 된다.

그리고 폴더경로가 곧 url이 된다.

app 폴더에 만든 폴더 이름 = url

연습용 폴더 구성

components 폴더 = 실질적으로 페이지를 구성하는 컴포넌트들

app 폴더 = components 폴더에서 만든 컴포넌트의 최종 렌더링 단위.

components/practice01/index.tsx

"use client";
import Practice01_01 from "./sub_components/practice01_01";
import Practice01_02 from "./sub_components/practice01_02";

const NextPractice01 = () => {

    return (
        <div>
            <Practice01_01/>
            <Practice01_02/>
        </div>
    )
}
export default NextPractice01;

app/practice01/page.tsx

import NextPractice01 from "@/components/practice01";

const Practice01 = () => {

    return (
        <NextPractice01/>
    )
}
export default Practice01;

page.tsx에서 불러올 컴포넌트의 이름이 index.tsx면 임포트 경로에서 바로 직전 폴더명까지만 적어도 된다.

이 때 해당 페이지로 가는 경로는 localhost:3000/practice01 이 된다. 굳이 라우터로 지정하지 않아도 폴더만으로 경로가 자동 생성된다.

Layout의 경우 기존 리액트 처럼 따로 wrapper에 넣는게 아니라

Layout.tsx로 공통의 레이아웃을 정한다.

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

export default function RootLayout({children,}: {children: React.ReactNode;}) {
  return (
    <html lang="ko">
      <body>
      <Header/>
        {children}
      <Footer/>
        </body>
    </html>
  );
}

여기서 children은 app 폴더에 있는 page.tsx이 들어간다.

next.js에서 Link는 리액트와 달리 to와 state 대신 href와 query를 사용

리액트

오늘은 여기까지

하루 하나 c언어 문제 정리

자바응애 — Mon, 26 May 2025 09:45:42 +0900

(2020 1회차)

12. 다음은 C언어 소스 코드이다. 출력 결과를 쓰시오.

 #include <stdio.h>
 void main(){
 	int i,j;
    int temp;
    int a[5] = {75,95,85,100,50};
    
    for(i=0; i<4; i++){
    	for(j=0; j<4-i; j++){
        	if(a[j] > a[j+1]){
            	temp=a[j];
                a[j] = a[j+1];
                a[j+1] = temp;
             }
           }
        }
        
       	for(i=0; i<5; i++){
        	printf("%d", a[i]);
        }
  }

#정렬, #for문, #이중for문, #배열, #서식 지정자 주의

a[j] > a[j+1] 일 때 큰 수가 뒤로 가는 로직이 실행되고, 서식 지정자에서 다른 형식이 없으므로

출력 결과는 50758595100

(2020 3회차)

2. 다음은 C언어 소스 코드이다. 출력 결과를 쓰시오.

#include <stdio.h>
	void main(){
    	int i=0, c=0;
        while (i<10){
        i++;
        c*=i;
        }
        printf("%d",c);
   }

#while문 #후위 연산자

i = 0 시작 > i++로 인해 i = 1, c = 0 * 1 = 0

이후 i 값이 얼마나 늘어나든 0에 i를 곱하는 형태이므로

출력 결과는 0

(2020 3회차)

13. 다음은 C언어 소스 코드이다. 출력 결과를 쓰시오.

#include <studio.h>
int r1(){
	return 4;
}
int r10(){
	return (30+r1());
}
int r100(){
	return (200+r10());
}
int main(){
	printf("%d\n", r100());
    return 0;
}

#함수 호출 #함수 호출 중첩

r100() 호출 > 200 + r10()

r10() 호출 > 30 + r1()

r1() 호출 > 4

r10() = 30 + 4 = 34

r100() = 200 + 34 = 234

출력 결과는 234

(2021 1회차)

15. 다음은 C언어 프로그램이다. 실행 결과를 쓰시오.

#include <stdio.h>

struct good {
	char name[10];
    int age;
 };
 
 void main(){
 	struct good s[] = {"Kim",28,"Lee",38,"Seo",50,"Park",35};
    
    struct good *p;
    p = s;
    p++;
    printf("%s\n", p-> name);
    printf("%d\n", p-> age);

#구조체 #포인터 #포인터연산 #후위연산자 #배열

p = s 로 포인터 변수 p는 배열 s의 첫 번째 값, s[0] ("kim", 28)의 주소를 저장한다.

그리고 p++ 로 인해 인덱스 하나 뒤의 값, s[1]의 주소를 저장한다.

즉 p = s + 1이 된다.

따라서 출력 결과는

Lee

(2021 2회차)

16. 다음은 C언어에 관한 소스코드이다. 실행 결과값을 작성하시오.

int main(){
   int res;
   res = mp(2,10);
   printf("%d",res);
   return 0;
}

int mp(int base, int exp) {
   int res = 1;
   for(int i=0; i < exp; i++){
      res = res * base;
   }
   
   return res;
}

#함수 #반복문 #return

res = mp(2, 10)

mp(2, 10) 은

{

int res = 1

for(int i = 0; i < 10; i++) { res = res * 2 }

}

이므로

1. res = 1 x 2
2. res = 2 x 2
3. res = 4 x 2
4. res = 8 x 2
5. res = 16 x 2
6. res = 32 x 2
7. res = 64 x 2
8. res = 128 x 2
9. res = 256 x 2
10. res = 512 x 2

따라서 1024 반환

출력 결과는 1024

27일차

자바응애 — Fri, 13 Sep 2024 11:54:21 +0900

이제 정말 마지막.

내가 담당한 페이지들은 다음과 같다.

메인 페이지 + 날씨 위젯

실시간 스트리밍 + 채팅

내가 제작한 페이지들을 총 정리하자면

메인페이지(모든 페이지에 들어갈 헤더, 푸터 포함)

날씨 위젯

실시간 스트리밍 + 채팅

주요 기능은

실시간 채팅

실시간 비디오 스트리밍

실시간 채팅 삭제

실시간 채팅 금지 / 허용

실시간 INPUT 비활성화

특정 사용자 채팅 내역 검색

이모지 메시지

캐러셀

날씨 API 받고, 사용자 위치를 역산해 시/도 단위 날씨 예보

아이템 랜덤으로 뽑아오기

프로젝트 기간 동안 내 주요역할은

실시간 스트리밍 + 채팅

메인 페이지

전체적인 css 테마 지정

팀원들의 에러 수집 및 지원

자세한 최종 결과물은 링크와 시연 영상을 걸도록 하며 프로젝트를 마감하도록 한다.

https://github.com/kimsanghoTT/B2O4.git

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

jsp-EL

자바응애 — Wed, 11 Sep 2024 15:35:16 +0900

EL : Expression Language
EL 형식을 통해 자바 코드를 최소화하고 데이터를 쉽게 출력하거나 조작할 수 있음

표현 방법: ${ } (예시 : ${username})
<% %>를 이용해 자바에서 전달할 값을 설정, 설정받은 값을 전달

예제

<%
request.setAttribute("username", "홍길동");
request.setAttribute("userage", 20);
request.setAttribute("balance", 160.88);
request.setAttribute("fruits", new String[] { "사과", "바나나", "포도" });
%>
<!-- 변수 출력 -->
<p>사용자 이름 : ${username }</p>
<p>사용자 나이 : ${userage }</p>
<p>사용자 잔고 : ${balance }</p>

<!-- 배열 출력 -->
<ul>
    <c:forEach var="fruit" items="${fruits }">
        <li>${fruit }</li><!-- EL 태그 -->
    </c:forEach>
</ul>

** EL / JSTL 차이

EL(Expression Language)
    - JSP 페이지에서 요청(request)이나 세션(session) 같은 데이터를 쉽게 가져와서 출력하는 데 사용
    - 사용법 : ${ } 사용해서 값을 출력
    - 단점 : 반복문, 조건문 불가능

JSTL(JSP Standard Tag Library)
    - JSP 페이지에서 반복, 조건문, 데이터 포맷팅, 데이터베이스 접근과 같은 작업을 수행할 때 사용
    - 사용법 : prefix="설정한변수명" 후 <설정한변수명:기능>
        - prefix 안의 변수명을 설정할 떄는 http://java.sun.com/jsp/jstl/core 같은 주소에서 마지막에 끝나는 단어 첫 글자를 따서 주로 사용
    - 단점 : 문법이 복잡함. 태그를 익히는 데 시간 소모

** request

- request.setAttribute() : JSP에서 요청(request) 범위에 데이터를 저장하는 데 사용되는 메서드
- HttpServletRequest 객체에 저장해서 JSP 페이지 내에서 그 데이터를 다른 페이지로 전달하거나 그 페이지 내에서 사용할 수 있도록 설정
- 문법 : request.setAttribute(String name, 자료형 value)
name : 데이터를 저장할 때 사용할 key. 이 것을 사용해서 데이터를 가져올 수 있음
value : 저장할 실제 값. 어떠한 데이터 유형이든 저장할 수 있음

예제

<%
String name = "홍길동";
int age = 20;

//데이터를 request 객체에 저장
request.setAttribute("username", name); //username 변수명 안에 홍길동이라는 이름을 저장
request.setAttribute("userage", age); //userage 변수명 안에 20이라는 숫자를 저장
%>
<!-- JSP 페이지에서 데이터를 EL로 출력 -->
<p>이름 : ${username }</p>
<p>나이 : ${userage }</p>

<!-- request에 저장된 값을 다른 페이지로 전달해서 출력 -->
<%
request.setAttribute("msg", "index.jsp에서 hello.jsp로 데이터 전달");

//hello.jsp로 데이터 전달
RequestDispatcher dispatcher = request.getRequestDispatcher("hello.jsp");

//servlet springboot를 사용하지 않을 때 작성법 -> springboot의 controller로 넘겨줄 떄는 사용 x
//RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/hello.jsp");
dispatcher.forward(request, response);
%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인사메시지 페이지</title>
</head>
<body>
	<h1>index.jsp에서 받은 데이터 출력</h1>
	
	<!-- request로 전달된 데이터 출력 -->
	<p>받은 메시지 : ${msg }</p>
</body>
</html>

** forTokens

forTokens : 특정 값을 기준으로 구분해서 반복 출력
    - var : 구분자(delims)로 인해 끊어진 값들을 하나씩 담아 출력하기 위해 설정하는 변수명
    - items : 어떤 값을 구분자(delims)로 끊을 것인지 작성. 변수값이나 구분자가 들어간 값을 직접 넣을 수 있음
    - delims : 기준이 되는 구분자(특정 기호나 값)를 설정

<c:set var="str" value="사과,배,포도" />
<c:forTokens var="fruit" items="${str}" delims=",">
    <li>${fruit }</li>
</c:forTokens>
<c:forTokens var="s" items="키위!참외!수박" delims="!">
    <li>${s}</li>
</c:forTokens>
<c:set var="food" value="햄버거~피자~오렌지~치킨~파스타~냉모밀~냉면~라멘"/>
<c:forTokens var="fd" items="${food }" delims="~">
    <li>${fd}</li>
</c:forTokens>

** remove

- JSTL에서 특정 변수값을 삭제하는 태그
- 작성법
c:remove var="값을 삭제할 변수명"

※ JSTL에서 system.out.println은 c:out을 이용해서 작성

- 작성법
c:out defult="작성될 내용"

- 특정 변수의 값 출력
c:out var="변수명" default="변수명을 불러오지 못하거나 특정 값이 없으면 보여줄 내용"

<c:set var="tempVar" value="삭제될 값 입니다"/>
<c:out value="${tempVar}"/>
<c:remove var="tempVar"/>
<c:out value="${tempVar }" default="없는 값입니다"/>

** catch

특정 문제나 에러가 발생했을 때 예외처리를 작성할 수 있음

c:catch
- 특정 문제가 발생할 것을 대비해서 감싸주는 것. 에러 방지
- c:if를 사용할 때 catch 안에 주로 사용

에러 관련 구문이 보이지 않다면
-> 계산이나 태그 안에 문제가 발생할 경우, jsp에서 문제 처리를 미리 진행한 다음에 코드를 보여주기 때문에 보이지 않음

<c:catch var="e">
    <c:set var="result" value="${10/0 }"/> <!-- 계산 에러 유도 -->
    <c:if test="${not empty e}">
        에러 발생 : ${e.message}
    </c:if>
</c:catch>

jsp - jstl

자바응애 — Tue, 10 Sep 2024 17:48:51 +0900

JSTL : JSP Standard Tag Library, jsp 표준 태그 라이브러리
    - JSP에서 반복문, 조건문, 변수 처리
    - 사용 방법
        taglib로 맨 위에 사용한다고 설정
        < %@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"% >

        <c:set var="이름" value="홍길동"/>
        <p>NAME : ${이름}</p>

c:로 jstl에 저장된 기능을 가져올 수 있음.
set = setter, 이름이라는 변수명에 value로 설정한 홍길동을 넣음을 명시

** if문 설정
- c:if test="${테스트할 조건 작성}"
- c:if문은 else가 존재하지 않음. if만 사용

	<c:set var="age" value="20"/>
	<c:if test="${age >= 18 }">
		<p>당신은 성인 입니다.</p>
	</c:if>
	<c:if test="${age < 18 }">
		<p>청소년입니다.</p>
	</c:if>

** c:forEach

<%
String[] fruits = {"apple", "banana", "grape"};
pageContext.setAttribute("fruits", fruits);
//pageContext : 페이지 내에서 변수명에 담긴 내용을 전체적으로 사용할 수 있도록 유지하는 역할
//setAttribute("저장할이름",저장할변수명)
%>

이때 EL과 JSTL이 좀 다른데

EL : <c:set var="fruits" value="${['apple', 'banana', 'grape'] }"/>
JSTL : 배열을 <% 에 담아서 사용해야함

이후 forEach문은

<ul>
    <c:forEach var="fruit" item="${fruits }">
        <li>${fruit}</li>
    </c:forEach>
</ul>

** fmt:format

uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"
: 날짜, 숫자를 쉽게 포맷팅할 수 있도록 도와주는 태그
    -> 날짜의 형식을 바꾸거나 숫자를 통화, 퍼센트 형식으로 변환할 수 있음

숫자 포멧팅 태그
fmt:formatNumber :: 숫자를 특정 형식으로 변환할 때 사용
    type="currency" : 숫자를 현재 위치한 지역에 맞춰 통화 기호가 자동으로 추가 ($, ₩, €)
    type="percent" : 숫자를 퍼센트 형식으로 변환
    type="number" : 숫자를 소수점 자리까지 조정하면서 표현

    maxFractionDigits : 지정한 소수점 자리 이하까지만 보여주기. 2로 작성 시 소수점 두 자리까지만 표기
    maxIntegerDigits : 지정한 소수점 자리 이상을 보여주기. 2로 작성시 최소 소수점 두 자리부터 표기

<c:set var="n" value="1234567.89"/>
<p>일반적인 숫자 : <fmt:formatNumber value="${n}" type="number"/></p>
<p>소수점 2자리까지 표현 : <fmt:formatNumber value="${n}" type="number" maxFractionDigits="2"/></p>

- c:choose :: 다중 조건을 처리할 때 사용하는 태그
- c:when test="" :: 조건이 true일 때 실행되는 태그
- c:otherwise :: 모든 조건이 false일 때 실행되는 태그

<c:set var="grade" value="B" />
<c:choose>
    <c:when test="${grade == 'A'}">
        <p>훌륭한 성적입니다.</p>
    </c:when>
    <c:if test="${ grade == 'B' }">
        <p>공부 열심히 하셨네요</p>
    </c:if>
    <c:otherwise>
        <p>좀 더 노력합시다</p>
    </c:otherwise>
</c:choose>

JSP + springboot 연결

자바응애 — Mon, 9 Sep 2024 17:57:46 +0900

- 컨트롤러에서 jsp를 연결할 때 src/main/webapp/WEB-INF/jsp 폴더를 지정해서 연결
- jsp 폴더 안에 .jsp 관련 파일을 작성해서 코드를 수행할 수 있도록 설정

※ 주의점
src/main/webapp/WEB-INF/jsp -> 옳은 경로
src/main/resources/webapp/WEB-INF/jsp -> 잘못된 경로. resources에 작성하는 게 아님.

<%@ %> : 지시자 태그

JSP 페이지에서 설정을 정의. 다른 jsp 파일을 포함해서 재사용율을 높일 수 있음
대표적으로 page, include, taglib 지시자가 존재

- page : jsp 페이지의 속성 설정. html 형식인지, 글자타입은 무엇인지(utf-8) 설정

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

- include : 다른 jsp 파일을 포함해서 사용 -> jsp 파일을 가져옴

<%@ include file="파일명.jsp" %>

- taglib : 외부에서 bootstrap이나 jquery, ajax 같은 기능을 가져와 사용할 수 있도록 설정

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

uri : 숫자(urn)나 주소(url)로 된 값 가져오기
prefix : 가져온 값을 c라는 이름으로 지칭해서 사용

이제 index.jsp와 header.jsp 를 통합해서 화면에 보이기

header.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<header>
    <div style="background-color: #333; color: white; padding: 15px 10px;">
        <h1 style="display: inline; margin-right: 50px;">My Website</h1>
        <img src="/images/logo.png" alt="Website Logo" style="height: 50px; vertical-align: middle;" />

        <nav style="display: inline; float: right;">
            <a href="/" style="color: white; margin-right: 15px;">Home</a>
            <a href="/array" style="color: white; margin-right: 15px;">과일들</a>
            <a href="/list" style="color: white; margin-right: 15px;">리스트</a>
            <a href="/for" style="color: white;">for문</a>
        </nav>
    </div>
</header>
<hr>

index.jsp

<%@ include file="header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsp 파일 경로 설정</title>
</head>
<body>
	<h1>연결확인</h1>

</body>
</html>

<%@ %>를 사용해서 헤더가 합쳐짐