디자인 패턴(Design Pattern)은 소프트웨어 개발 과정에서 반복적으로 발생하는 문제들을 해결하기 위한 검증된 솔루션입니다.

🔍 디자인 패턴의 의미

💡 "이런 상황에서는 이런 패턴을 사용하면 좋다"는 일종의 방향성을 제시하는 것입니다.

디자인 패턴은 다음과 같은 이점을 제공합니다:

• 경험 기반의 증명된 해결책 제공
• 코드의 재사용성과 유지보수성 향상
• 개발자 간 의사소통 효율화
• 코드 구조의 표준화

🌟 주요 디자인 패턴 종류

JavaScript/프론트엔드에서 자주 사용되는 패턴들:

• 모듈 패턴 - 코드를 모듈화하여 캡슐화
• 싱글톤 패턴 - 단 하나의 인스턴스만 생성
• 팩토리 패턴 - 객체 생성을 추상화
• 믹스인 패턴 - 객체 간 기능 공유
• 위임/상속 패턴 - 프로토타입 기반 코드 재사용

2. 모듈 패턴 📦

모듈 패턴(Module Pattern)은 코드를 논리적 단위로 분리하고, 캡슐화와 은닉화를 통해 보안성을 높이는 패턴입니다.

💡 방법 1: Object Literal (기본)

가장 간단한 모듈 생성 방법으로, 객체 리터럴을 사용합니다.

// Object Literal 방식
const calculator = {
    result: 0,

    add(num) {
        this.result += num;
        return this;
    },

    subtract(num) {
        this.result -= num;
        return this;
    },

    getResult() {
        return this.result;
    }
};

// 사용 예시
calculator.add(10).subtract(3);
console.log(calculator.getResult()); // 7

// ⚠️ 문제점: 내부 데이터에 직접 접근 가능
calculator.result = 999; // 보안 취약! 🚨
console.log(calculator.getResult()); // 999

장점: 간편하고 직관적
단점: 모든 프로퍼티가 public이라 보안에 취약

💡 방법 2: IIFE + 클로저 (개선된 모듈 패턴)

즉시실행함수(IIFE)와 클로저를 활용하여 private 공간을 만듭니다.

// IIFE + 클로저를 활용한 모듈 패턴
const secureCalculator = (function() {
    // Private 변수 (외부에서 접근 불가) 🔒
    let result = 0;

    // Private 함수
    function validate(num) {
        if (typeof num !== 'number') {
            throw new Error('숫자만 입력 가능합니다!');
        }
    }

    // Public API 반환
    return {
        add(num) {
            validate(num);
            result += num;
            return this;
        },

        subtract(num) {
            validate(num);
            result -= num;
            return this;
        },

        multiply(num) {
            validate(num);
            result *= num;
            return this;
        },

        divide(num) {
            validate(num);
            if (num === 0) throw new Error('0으로 나눌 수 없습니다!');
            result /= num;
            return this;
        },

        getResult() {
            return result;
        },

        reset() {
            result = 0;
            return this;
        }
    };
})();

// 사용 예시
secureCalculator.add(10).multiply(2).subtract(5);
console.log(secureCalculator.getResult()); // 15

// ✅ 보안 강화: private 변수에 직접 접근 불가
console.log(secureCalculator.result); // undefined
secureCalculator.result = 999; // 영향 없음!
console.log(secureCalculator.getResult()); // 여전히 15

🎯 모듈 패턴의 핵심

Public/Private 개념으로 객체를 나누는 캡슐화 및 은닉화가 핵심입니다.

3. 싱글톤 패턴 👑

싱글톤 패턴(Singleton Pattern)은 한 클래스에서 인스턴스를 단 1개만 생성하도록 제한하는 패턴입니다.

🔍 싱글톤이 필요한 경우

• 애플리케이션 전역에서 하나의 상태만 관리해야 할 때
• 데이터베이스 연결, 로거, 설정 관리자 등

💡 싱글톤 구현 예시

// 싱글톤 패턴 구현
const Database = (function() {
    let instance; // private 변수로 인스턴스 저장

    function createInstance() {
        // 실제 데이터베이스 객체
        return {
            connection: null,

            connect() {
                if (!this.connection) {
                    this.connection = '데이터베이스 연결됨 🔗';
                    console.log(this.connection);
                }
            },

            query(sql) {
                if (!this.connection) {
                    throw new Error('먼저 연결해주세요!');
                }
                console.log(`쿼리 실행: ${sql}`);
            },

            disconnect() {
                this.connection = null;
                console.log('연결 종료 ❌');
            }
        };
    }

    return {
        getInstance() {
            if (!instance) {
                instance = createInstance();
                console.log('✨ 새 인스턴스 생성');
            } else {
                console.log('♻️ 기존 인스턴스 반환');
            }
            return instance;
        }
    };
})();

// 사용 예시
const db1 = Database.getInstance(); // ✨ 새 인스턴스 생성
db1.connect(); // 데이터베이스 연결됨 🔗

const db2 = Database.getInstance(); // ♻️ 기존 인스턴스 반환

console.log(db1 === db2); // true (같은 인스턴스!)

🎯 싱글톤의 장단점

장점:

• 메모리 효율성 (인스턴스가 하나만 존재)
• 전역 상태 관리 용이
• 리소스 공유 최적화

단점:

• 전역 상태로 인한 테스트 어려움
• 의존성 증가
• 멀티스레드 환경에서 주의 필요

4. 팩토리 패턴 🏭

팩토리 패턴(Factory Pattern)은 비슷한 객체를 공장에서 찍어내듯 반복적으로 생성할 수 있도록 하는 패턴입니다.

🔍 팩토리 패턴의 특징

new 키워드를 사용한 생성자 함수가 아니라, 일반 함수에서 객체를 반환하는 것을 팩토리 함수라고 합니다.

💡 예시 1: 사용자 생성 팩토리

// 팩토리 함수
function createUser(name, role) {
    // 공통 속성
    const user = {
        name: name,
        role: role,
        createdAt: new Date(),

        // 공통 메서드
        getInfo() {
            return `${this.name} (${this.role})`;
        }
    };

    // 역할별 특수 메서드 추가
    if (role === 'admin') {
        user.deleteUser = function(userId) {
            console.log(`관리자 ${this.name}가 사용자 ${userId}를 삭제했습니다.`);
        };
    } else if (role === 'editor') {
        user.editContent = function(contentId) {
            console.log(`편집자 ${this.name}가 콘텐츠 ${contentId}를 수정했습니다.`);
        };
    }

    return user;
}

// 사용 예시
const admin = createUser('Alice', 'admin');
const editor = createUser('Bob', 'editor');
const viewer = createUser('Charlie', 'viewer');

console.log(admin.getInfo()); // "Alice (admin)"
admin.deleteUser(123); // "관리자 Alice가 사용자 123을 삭제했습니다."

console.log(editor.getInfo()); // "Bob (editor)"
editor.editContent(456); // "편집자 Bob가 콘텐츠 456을 수정했습니다."

💡 예시 2: UI 컴포넌트 팩토리

// UI 컴포넌트 팩토리
function createButton(type, text) {
    const button = {
        type: type,
        text: text,

        render() {
            return `<button class="btn-${this.type}">${this.text}</button>`;
        },

        onClick(handler) {
            console.log(`${this.text} 버튼 클릭 이벤트 등록`);
            this.clickHandler = handler;
        }
    };

    // 타입별 스타일 설정
    switch(type) {
        case 'primary':
            button.style = 'background: blue; color: white;';
            break;
        case 'danger':
            button.style = 'background: red; color: white;';
            break;
        case 'success':
            button.style = 'background: green; color: white;';
            break;
        default:
            button.style = 'background: gray; color: black;';
    }

    return button;
}

// 사용 예시
const submitBtn = createButton('primary', '제출');
const deleteBtn = createButton('danger', '삭제');
const saveBtn = createButton('success', '저장');

console.log(submitBtn.render());
// <button class="btn-primary">제출</button>

deleteBtn.onClick(() => console.log('삭제 확인'));
// "삭제 버튼 클릭 이벤트 등록"

🎯 팩토리 패턴의 장점

• 객체 생성 로직을 한 곳에 집중
• 생성자 대신 명확한 함수명 사용 (예: createUser, createButton)
• 조건부 객체 생성이 쉬움
• 코드 재사용성 향상

5. 믹스인 패턴 🎨

믹스인 패턴(Mixin Pattern)은 한 객체의 프로퍼티를 다른 객체에 복사해 사용하는 패턴으로, 코드를 재사용하는 효과를 냅니다.

🔍 믹스인의 목적

기존 객체의 기능을 그대로 보존하면서 다른 객체에 추가할 때 사용합니다.

💡 예시 1: 기본 믹스인 구현

// 믹스인 함수
function mixin(target, source) {
    for (let key in source) {
        if (source.hasOwnProperty(key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 공통 기능들
const canEat = {
    eat(food) {
        console.log(`${this.name}이(가) ${food}를 먹습니다. 🍽️`);
    }
};

const canWalk = {
    walk() {
        console.log(`${this.name}이(가) 걷습니다. 🚶`);
    }
};

const canSwim = {
    swim() {
        console.log(`${this.name}이(가) 수영합니다. 🏊`);
    }
};

// 사용 예시
const person = { name: '철수' };
mixin(person, canEat);
mixin(person, canWalk);

person.eat('사과'); // "철수이(가) 사과를 먹습니다. 🍽️"
person.walk(); // "철수이(가) 걷습니다. 🚶"

const duck = { name: '오리' };
mixin(duck, canEat);
mixin(duck, canWalk);
mixin(duck, canSwim);

duck.eat('빵'); // "오리이(가) 빵을 먹습니다. 🍽️"
duck.swim(); // "오리이(가) 수영합니다. 🏊"

💡 예시 2: Object.assign을 활용한 믹스인

// Object.assign을 사용한 믹스인
const eventEmitterMixin = {
    on(event, handler) {
        if (!this._events) this._events = {};
        if (!this._events[event]) this._events[event] = [];
        this._events[event].push(handler);
    },

    emit(event, ...args) {
        if (!this._events || !this._events[event]) return;
        this._events[event].forEach(handler => handler(...args));
    },

    off(event, handler) {
        if (!this._events || !this._events[event]) return;
        this._events[event] = this._events[event].filter(h => h !== handler);
    }
};

const loggingMixin = {
    log(message) {
        console.log(`[${new Date().toISOString()}] ${message}`);
    },

    error(message) {
        console.error(`[ERROR] ${message}`);
    }
};

// 여러 믹스인을 한 번에 적용
class Component {
    constructor(name) {
        this.name = name;
    }
}

Object.assign(Component.prototype, eventEmitterMixin, loggingMixin);

// 사용 예시
const myComponent = new Component('MyComponent');

myComponent.on('dataLoaded', (data) => {
    myComponent.log(`데이터 로드됨: ${data}`);
});

myComponent.emit('dataLoaded', '사용자 목록'); 
// "[2024-01-15T12:00:00.000Z] 데이터 로드됨: 사용자 목록"

myComponent.error('데이터 로드 실패!');
// "[ERROR] 데이터 로드 실패!"

🎯 믹스인 패턴의 특징

장점:

• 다중 상속과 유사한 효과
• 코드 재사용성 극대화
• 유연한 기능 조합

단점:

• 메서드 이름 충돌 가능성
• 출처 추적이 어려울 수 있음

6. 위임/상속 패턴 🔗

Behavior Delegation (위임) / Inheritance (상속)은 부모 프로토타입에 저장되어있는 변수나 메소드를 자식 쪽에서 위임받아 사용하는 패턴입니다.

🔍 프로토타입 체인의 이해

하위 클래스(객체)에서는 상위 프로토타입에 있는 변수나 메소드들을 위임받아 언제든지 사용할 수 있습니다.

💡 예시 1: 프로토타입 상속

// 상위 프로토타입 (부모)
function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function(food) {
    console.log(`${this.name}이(가) ${food}를 먹습니다.`);
};

Animal.prototype.sleep = function() {
    console.log(`${this.name}이(가) 잠을 잡니다. 💤`);
};

// 하위 프로토타입 (자식)
function Dog(name, breed) {
    Animal.call(this, name); // 부모 생성자 호출
    this.breed = breed;
}

// 프로토타입 체인 연결
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Dog만의 메서드 추가
Dog.prototype.bark = function() {
    console.log(`${this.name}: 멍멍! 🐕`);
};

// 사용 예시
const myDog = new Dog('바둑이', '진돗개');

myDog.eat('사료'); // "바둑이이(가) 사료를 먹습니다." (Animal에서 상속)
myDog.sleep(); // "바둑이이(가) 잠을 잡니다. 💤" (Animal에서 상속)
myDog.bark(); // "바둑이: 멍멍! 🐕" (Dog 자체 메서드)

console.log(myDog.breed); // "진돗개"

💡 예시 2: ES6 Class 문법으로 상속

// 부모 클래스
class Vehicle {
    constructor(name, speed) {
        this.name = name;
        this.speed = speed;
    }

    move() {
        console.log(`${this.name}이(가) ${this.speed}km/h로 이동합니다. 🚗`);
    }

    stop() {
        console.log(`${this.name}이(가) 정지합니다. 🛑`);
    }
}

// 자식 클래스
class Car extends Vehicle {
    constructor(name, speed, brand) {
        super(name, speed); // 부모 생성자 호출
        this.brand = brand;
    }

    // 메서드 오버라이딩
    move() {
        console.log(`${this.brand} ${this.name}이(가) 도로 위를 달립니다! 🏎️`);
        super.move(); // 부모 메서드 호출
    }

    // 자식만의 메서드
    honk() {
        console.log(`${this.name}: 빵빵! 📯`);
    }
}

class Airplane extends Vehicle {
    constructor(name, speed, altitude) {
        super(name, speed);
        this.altitude = altitude;
    }

    fly() {
        console.log(`${this.name}이(가) ${this.altitude}m 상공을 비행합니다. ✈️`);
    }
}

// 사용 예시
const myCar = new Car('소나타', 180, '현대');
myCar.move();
// "현대 소나타이(가) 도로 위를 달립니다! 🏎️"
// "소나타이(가) 180km/h로 이동합니다. 🚗"

myCar.honk(); // "소나타: 빵빵! 📯"
myCar.stop(); // "소나타이(가) 정지합니다. 🛑"

const myPlane = new Airplane('보잉747', 900, 10000);
myPlane.move(); // "보잉747이(가) 900km/h로 이동합니다. 🚗"
myPlane.fly(); // "보잉747이(가) 10000m 상공을 비행합니다. ✈️"

💡 예시 3: Delegation 패턴 (위임)

// 위임 방식: 상속 대신 객체 간 연결
const AnimalBehavior = {
    init(name) {
        this.name = name;
    },

    eat(food) {
        console.log(`${this.name}이(가) ${food}를 먹습니다.`);
    }
};

const DogBehavior = Object.create(AnimalBehavior);

DogBehavior.setup = function(name, breed) {
    this.init(name);
    this.breed = breed;
};

DogBehavior.bark = function() {
    console.log(`${this.name}: 멍멍!`);
};

// 사용 예시
const dog = Object.create(DogBehavior);
dog.setup('바둑이', '진돗개');

dog.eat('간식'); // AnimalBehavior에 위임
dog.bark(); // DogBehavior 자체 메서드

🎯 상속 vs 위임

7. 실전 활용 예시 ⚡

🎯 패턴 조합: 싱글톤 + 팩토리

// 앱 설정 관리자 (싱글톤 + 팩토리)
const ConfigManager = (function() {
    let instance;

    function createConfig() {
        let config = {
            apiUrl: 'https://api.example.com',
            timeout: 5000,
            theme: 'light'
        };

        return {
            get(key) {
                return config[key];
            },

            set(key, value) {
                config[key] = value;
                console.log(`설정 변경: ${key} = ${value}`);
            },

            getAll() {
                return { ...config };
            }
        };
    }

    return {
        getInstance() {
            if (!instance) {
                instance = createConfig();
            }
            return instance;
        }
    };
})();

// 사용
const config1 = ConfigManager.getInstance();
const config2 = ConfigManager.getInstance();

console.log(config1 === config2); // true

config1.set('theme', 'dark');
console.log(config2.get('theme')); // 'dark' (같은 인스턴스!)

🎯 패턴 조합: 모듈 + 믹스인

// 기능별 믹스인
const validationMixin = {
    validate(data, rules) {
        for (let field in rules) {
            if (!rules[field](data[field])) {
                return { valid: false, field };
            }
        }
        return { valid: true };
    }
};

const ajaxMixin = {
    async request(url, options = {}) {
        try {
            const response = await fetch(url, options);
            return await response.json();
        } catch (error) {
            this.handleError(error);
        }
    }
};

// 모듈 패턴으로 전체 구조 생성
const UserModule = (function() {
    let users = [];

    const module = {
        addUser(user) {
            const result = this.validate(user, {
                name: (val) => val && val.length > 0,
                email: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
            });

            if (result.valid) {
                users.push(user);
                console.log('✅ 사용자 추가 성공');
            } else {
                console.log(`❌ 유효성 검사 실패: ${result.field}`);
            }
        },

        async fetchUsers() {
            const data = await this.request('/api/users');
            users = data;
            return users;
        },

        handleError(error) {
            console.error('에러 발생:', error.message);
        },

        getUsers() {
            return [...users];
        }
    };

    // 믹스인 적용
    Object.assign(module, validationMixin, ajaxMixin);

    return module;
})();

// 사용
UserModule.addUser({ name: '철수', email: 'chulsoo@example.com' });
// ✅ 사용자 추가 성공

UserModule.addUser({ name: '', email: 'invalid' });
// ❌ 유효성 검사 실패: name

HTTP Method는 클라이언트와 서버가 통신하기 위해 사용하는 메소드입니다.

서버에게 "이 리소스를 어떻게 처리해주세요"라고 요청하는 방식을 정의하는 것으로, RESTful API의 핵심 개념입니다.

주요 HTTP Method

1️⃣ GET - 데이터 조회

개념

GET은 서버로부터 데이터를 조회하기 위한 용도로 사용합니다.

GET /users/123 HTTP/1.1
Host: api.example.com

특징

✅ 데이터 전송 방식

URL에 Query String 형식으로 데이터를 전송합니다.

❌ Body 사용 안 함
✅ URL 사용

예시:
https://api.example.com/search?keyword=nextjs&page=1&limit=10
                              ↑
                         Query String

📊 상세 특징

사용 예시

기본 조회

GET /api/users HTTP/1.1
Host: example.com

→ 모든 사용자 목록 조회

특정 리소스 조회

GET /api/users/123 HTTP/1.1
Host: example.com

→ ID가 123인 사용자 조회

Query String 사용

GET /api/products?category=electronics&price_max=50000&sort=latest HTTP/1.1
Host: example.com

→ 필터링 + 정렬된 제품 목록 조회

코드 예시

JavaScript (Fetch API)

// 기본 GET 요청
fetch('https://api.example.com/users/123')
  .then(response => response.json())
  .then(data => console.log(data));

// Query String 포함
const params = new URLSearchParams({
  keyword: 'nextjs',
  page: 1,
  limit: 10
});

fetch(`https://api.example.com/search?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));

Axios

// 기본 GET 요청
axios.get('https://api.example.com/users/123')
  .then(response => console.log(response.data));

// Query String (params 옵션)
axios.get('https://api.example.com/search', {
  params: {
    keyword: 'nextjs',
    page: 1,
    limit: 10
  }
}).then(response => console.log(response.data));

주의사항

⚠️ URL 길이 제한

브라우저마다 URL 최대 길이가 다릅니다:

❌ 나쁜 예 (긴 데이터)
GET /api/search?data=매우매우매우...긴데이터... (수천 자)

✅ 좋은 예
POST /api/search (데이터는 Body에)

⚠️ 보안 취약점

❌ 민감 정보를 GET으로 전송하지 마세요!

GET /api/login?username=admin&password=1234
                              ↑
                      URL에 노출 (위험!)

✅ 민감 정보는 POST + Body + HTTPS

캐싱의 이점

첫 번째 요청:
Client → [GET /api/products] → Server
       ← [데이터 + 캐시 헤더] ←

두 번째 요청 (같은 URL):
Client → [캐시 확인] → ⚡ 캐시에서 즉시 응답
           (서버 요청 없음!)

→ 빠른 응답 속도
→ 서버 부하 감소
→ 네트워크 비용 절감

2️⃣ POST - 데이터 생성

개념

POST는 리소스 데이터를 생성하는 목적으로 사용합니다.

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "홍길동",
  "email": "hong@example.com"
}

특징

✅ 데이터 전송 방식

HTTP 메시지의 Body에 데이터를 담아서 전송합니다.

✅ Body 사용
❌ URL에 데이터 노출 안 함

예시:
POST /api/users HTTP/1.1
Content-Type: application/json

{
  "name": "홍길동",
  "age": 30
}

📊 상세 특징

Content-Type

POST 요청 시 Content-Type 헤더에 데이터 타입을 명시해야 합니다.

사용 예시

JSON 데이터 전송

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 67

{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 30
}

폼 데이터 전송

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

name=%ED%99%8D%EA%B8%B8%EB%8F%99&email=hong@example.com&age=30

파일 업로드

POST /api/upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary

------WebKitFormBoundary
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg

[바이너리 데이터]
------WebKitFormBoundary--

코드 예시

JavaScript (Fetch API)

// JSON 데이터 전송
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '홍길동',
    email: 'hong@example.com',
    age: 30
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

// 파일 업로드
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('title', '제목');

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData // Content-Type 자동 설정
})
  .then(response => response.json())
  .then(data => console.log(data));

Axios

// JSON 데이터 전송
axios.post('https://api.example.com/users', {
  name: '홍길동',
  email: 'hong@example.com',
  age: 30
})
  .then(response => console.log(response.data));

// 파일 업로드
const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => console.log(response.data));

대용량 데이터 전송

GET의 한계:
URL 길이 제한 → 대량 데이터 전송 불가

POST의 장점:
Body 사용 → 제한 없음 ✅

예시:
- 대용량 JSON 데이터
- 이미지/동영상 파일
- 복잡한 검색 조건
- 대량의 배열 데이터

3️⃣ PUT - 전체 수정

개념

PUT은 데이터를 추가하거나 기존 데이터 전체를 바꾸는 덮어쓰기 용도로 사용합니다.

PUT /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 31,
  "address": "서울시 강남구"
}

특징

동작 방식

기존 데이터:
{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 30,
  "address": "서울시"
}

PUT 요청 (일부 필드만 전송):
{
  "name": "김철수",
  "email": "kim@example.com"
}

결과 (전체 교체):
{
  "name": "김철수",
  "email": "kim@example.com",
  "age": null,        ← ⚠️ 누락된 필드
  "address": null     ← ⚠️ null로 변경됨
}

사용 예시

사용자 정보 전체 수정

PUT /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 31,
  "address": "서울시 강남구",
  "phone": "010-1234-5678"
}

리소스 생성 (없으면)

PUT /api/users/999 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "이영희",
  "email": "lee@example.com"
}

→ ID 999가 없으면 생성, 있으면 전체 교체

코드 예시

// Fetch API
fetch('https://api.example.com/users/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '홍길동',
    email: 'hong@example.com',
    age: 31,
    address: '서울시 강남구'
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

// Axios
axios.put('https://api.example.com/users/123', {
  name: '홍길동',
  email: 'hong@example.com',
  age: 31,
  address: '서울시 강남구'
})
  .then(response => console.log(response.data));

4️⃣ PATCH - 부분 수정

개념

PATCH는 데이터의 일부만 수정하기 위한 용도로 사용합니다.

PATCH /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "age": 31
}

특징

PUT vs PATCH 비교

기존 데이터:
{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 30,
  "address": "서울시"
}

┌─────────────────────────────────────────┐
│ PUT 요청 (전체 교체)                      │
├─────────────────────────────────────────┤
│ 요청:                                    │
│ { "age": 31 }                           │
│                                         │
│ 결과:                                    │
│ {                                       │
│   "age": 31,                            │
│   "name": null,     ← ⚠️ 삭제됨         │
│   "email": null,    ← ⚠️ 삭제됨         │
│   "address": null   ← ⚠️ 삭제됨         │
│ }                                       │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ PATCH 요청 (부분 수정)                    │
├─────────────────────────────────────────┤
│ 요청:                                    │
│ { "age": 31 }                           │
│                                         │
│ 결과:                                    │
│ {                                       │
│   "name": "홍길동",     ← ✅ 유지       │
│   "email": "hong@...",  ← ✅ 유지       │
│   "age": 31,            ← ✅ 수정       │
│   "address": "서울시"   ← ✅ 유지       │
│ }                                       │
└─────────────────────────────────────────┘

사용 예시

나이만 수정

PATCH /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "age": 31
}

→ 나이만 31로 변경, 나머지 필드는 그대로 유지

여러 필드 수정

PATCH /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "age": 31,
  "address": "서울시 강남구"
}

→ 나이와 주소만 변경, name과 email은 유지

코드 예시

// Fetch API
fetch('https://api.example.com/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    age: 31 // 나이만 수정
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

// Axios
axios.patch('https://api.example.com/users/123', {
  age: 31
})
  .then(response => console.log(response.data));

실전 사용 케이스

// ✅ 좋은 예: 상태만 변경
PATCH /api/orders/456
{
  "status": "shipped"
}

// ✅ 좋은 예: 조회수 증가
PATCH /api/posts/789
{
  "views": 101
}

// ❌ 나쁜 예: 모든 필드 전송 (PUT을 쓰세요)
PATCH /api/users/123
{
  "name": "홍길동",
  "email": "hong@example.com",
  "age": 31,
  "address": "서울시",
  "phone": "010-1234-5678"
}

5️⃣ DELETE - 삭제

개념

DELETE는 특정 리소스의 삭제를 요청하는 데 사용합니다.

DELETE /api/users/123 HTTP/1.1
Host: example.com

특징

사용 예시

단일 리소스 삭제

DELETE /api/users/123 HTTP/1.1
Host: example.com

→ ID가 123인 사용자 삭제

응답 예시

HTTP/1.1 204 No Content

또는

HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "사용자가 성공적으로 삭제되었습니다.",
  "deletedId": 123
}

코드 예시

// Fetch API
fetch('https://api.example.com/users/123', {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      console.log('삭제 성공');
    }
  });

// Axios
axios.delete('https://api.example.com/users/123')
  .then(response => console.log('삭제 성공'))
  .catch(error => console.error('삭제 실패:', error));

멱등성

첫 번째 DELETE 요청:
DELETE /api/users/123 → ✅ 삭제 성공 (200 OK)

두 번째 DELETE 요청:
DELETE /api/users/123 → ✅ 이미 없음 (404 Not Found)

세 번째 DELETE 요청:
DELETE /api/users/123 → ✅ 여전히 없음 (404 Not Found)

→ 결과는 항상 동일: "리소스가 없는 상태"
→ 멱등성을 만족 ✅

🎯 GET vs POST 심층 비교

멱등성 (Idempotent)

동일한 연산을 여러 번 수행해도 동일한 결과가 나오는 성질

GET의 멱등성

첫 번째 요청:
GET /api/users/123 → { name: "홍길동", age: 30 }

두 번째 요청:
GET /api/users/123 → { name: "홍길동", age: 30 }

백 번째 요청:
GET /api/users/123 → { name: "홍길동", age: 30 }

→ 항상 동일한 결과 ✅
→ 서버 상태를 변경하지 않음

POST의 비멱등성

첫 번째 요청:
POST /api/orders → { orderId: 1, total: 50000 }

두 번째 요청:
POST /api/orders → { orderId: 2, total: 50000 }

세 번째 요청:
POST /api/orders → { orderId: 3, total: 50000 }

→ 요청마다 새로운 주문 생성 ❌
→ 결과가 매번 다름

안전성 (Safe)

서버의 상태를 변경하지 않는 성질

GET    → ✅ 안전함 (조회만 함)
POST   → ❌ 안전하지 않음 (생성)
PUT    → ❌ 안전하지 않음 (수정)
PATCH  → ❌ 안전하지 않음 (수정)
DELETE → ❌ 안전하지 않음 (삭제)

HTTP Method별 멱등성과 안전성

상세 비교표

실전 사용 가이드

GET을 사용해야 할 때

✅ 게시글 목록 조회
GET /api/posts

✅ 사용자 정보 조회
GET /api/users/123

✅ 검색 (간단한 쿼리)
GET /api/search?q=nextjs

✅ 필터링
GET /api/products?category=electronics&price_max=50000

POST를 사용해야 할 때

✅ 회원가입
POST /api/users

✅ 로그인
POST /api/auth/login

✅ 주문 생성
POST /api/orders

✅ 댓글 작성
POST /api/posts/123/comments

✅ 복잡한 검색 (많은 조건)
POST /api/search
{
  "filters": { ... },
  "sort": { ... },
  "pagination": { ... }
}

✅ 파일 업로드
POST /api/upload

📊 전체 HTTP Method 비교

빠른 참조표

*DELETE는 Body를 사용할 수 있지만 일반적으로 사용하지 않음

CRUD 매핑

RESTful API 설계 예시

리소스: 사용자 (Users)

┌────────────────────────────────────────────────┐
│ 목록 조회                                       │
│ GET /api/users                                 │
│ → 모든 사용자 목록 반환                          │
├────────────────────────────────────────────────┤
│ 상세 조회                                       │
│ GET /api/users/123                             │
│ → ID가 123인 사용자 정보 반환                    │
├────────────────────────────────────────────────┤
│ 생성                                           │
│ POST /api/users                                │
│ → 새로운 사용자 생성                            │
├────────────────────────────────────────────────┤
│ 전체 수정                                       │
│ PUT /api/users/123                             │
│ → ID가 123인 사용자 정보 전체 교체              │
├────────────────────────────────────────────────┤
│ 부분 수정                                       │
│ PATCH /api/users/123                           │
│ → ID가 123인 사용자 정보 일부 수정              │
├────────────────────────────────────────────────┤
│ 삭제                                           │
│ DELETE /api/users/123                          │
│ → ID가 123인 사용자 삭제                        │
└────────────────────────────────────────────────┘

🎨 실전 시나리오

시나리오 1: 전자상거래

// 1. 상품 목록 조회
GET /api/products?category=electronics&page=1

// 2. 상품 상세 조회
GET /api/products/789

// 3. 장바구니에 추가
POST /api/cart
{
  "productId": 789,
  "quantity": 2
}

// 4. 장바구니 수량 변경
PATCH /api/cart/items/123
{
  "quantity": 3
}

// 5. 주문 생성
POST /api/orders
{
  "items": [...],
  "shippingAddress": {...}
}

// 6. 주문 취소
DELETE /api/orders/456

시나리오 2: 소셜 미디어

// 1. 피드 조회
GET /api/feed?page=1&limit=20

// 2. 게시글 작성
POST /api/posts
{
  "content": "안녕하세요!",
  "images": [...]
}

// 3. 게시글 수정 (전체)
PUT /api/posts/123
{
  "content": "수정된 내용",
  "images": [...]
}

// 4. 좋아요 추가
POST /api/posts/123/like

// 5. 댓글 작성
POST /api/posts/123/comments
{
  "content": "좋은 글이네요!"
}

// 6. 게시글 삭제
DELETE /api/posts/123

시나리오 3: 사용자 관리

// 1. 회원가입
POST /api/auth/register
{
  "email": "user@example.com",
  "password": "password123",
  "name": "홍길동"
}

// 2. 로그인
POST /api/auth/login
{
  "email": "user@example.com",
  "password": "password123"
}

// 3. 프로필 조회
GET /api/users/me

// 4. 프로필 이미지만 변경
PATCH /api/users/me
{
  "profileImage": "https://..."
}

// 5. 비밀번호 변경
PATCH /api/users/me/password
{
  "currentPassword": "old",
  "newPassword": "new"
}

// 6. 회원탈퇴
DELETE /api/users/me

💡 Best Practices

1. 올바른 HTTP Method 선택

✅ 좋은 예:
GET    /api/users        → 목록 조회
GET    /api/users/123    → 상세 조회
POST   /api/users        → 생성
PUT    /api/users/123    → 전체 수정
PATCH  /api/users/123    → 부분 수정
DELETE /api/users/123    → 삭제

❌ 나쁜 예:
GET /api/createUser      → POST를 사용하세요
GET /api/deleteUser/123  → DELETE를 사용하세요
POST /api/getUsers       → GET을 사용하세요

2. URL 설계

✅ 명사 사용 (리소스 중심)
/api/users
/api/products
/api/orders

❌ 동사 사용 (행동 중심)
/api/getUsers
/api/createProduct
/api/deleteOrder

3. 상태 코드 사용

4. 보안

✅ HTTPS 사용
✅ 인증 토큰은 Header에
✅ 민감 정보는 POST/PUT/PATCH의 Body에
✅ CORS 설정
✅ Rate Limiting

❌ GET으로 민감 정보 전송
❌ 인증 없이 수정/삭제 허용

❓ 자주 묻는 질문

Q1. GET과 POST 중 어떤 것을 사용해야 할까요?

✅ GET을 사용하세요:
- 데이터 조회
- 검색 (간단한 쿼리)
- 필터링
- 페이지네이션
- 캐싱이 필요한 경우

✅ POST를 사용하세요:
- 데이터 생성
- 로그인/회원가입
- 파일 업로드
- 복잡한 검색 조건
- 민감한 정보 전송

Q2. PUT과 PATCH의 차이는 무엇인가요?

PUT:
- 리소스 전체 교체
- 누락된 필드는 null
- 멱등성 있음

PATCH:
- 리소스 일부만 수정
- 누락된 필드는 유지
- 멱등성 구현에 따라 다름

예시:
{ name: "홍길동", age: 30, email: "hong@example.com" }

PUT { age: 31 }
→ { age: 31, name: null, email: null }

PATCH { age: 31 }
→ { name: "홍길동", age: 31, email: "hong@example.com" }

Q3. DELETE 요청에 Body를 사용할 수 있나요?

기술적으로는 가능하지만, 권장하지 않습니다.

✅ 권장:
DELETE /api/users/123

❌ 비권장:
DELETE /api/users
Body: { id: 123 }

이유:
- RESTful 관례에 맞지 않음
- 일부 프록시/클라이언트가 무시할 수 있음
- URL로 충분히 표현 가능

Q4. 멱등성이 왜 중요한가요?

멱등성이 있으면:
✅ 네트워크 오류 시 안전하게 재시도 가능
✅ 캐싱 전략 수립 가능
✅ 예측 가능한 API 동작

예시:
PUT /api/users/123 { name: "홍길동" }
→ 네트워크 오류로 응답 못 받음
→ 다시 요청해도 안전 ✅ (결과 동일)

POST /api/orders { ... }
→ 네트워크 오류로 응답 못 받음
→ 다시 요청하면 중복 주문 발생 ⚠️

🎓 요약

HTTP Method 한눈에 보기

GET     → 🔍 조회 (안전, 멱등, 캐시)
POST    → ➕ 생성 (비안전, 비멱등, 노캐시)
PUT     → 🔄 전체 수정 (비안전, 멱등, 노캐시)
PATCH   → ✏️ 부분 수정 (비안전, 비멱등*, 노캐시)
DELETE  → 🗑️ 삭제 (비안전, 멱등, 노캐시)

*PATCH의 멱등성은 구현에 따라 다름

선택 가이드

데이터를 조회하고 싶다
→ GET

데이터를 생성하고 싶다
→ POST

데이터 전체를 바꾸고 싶다
→ PUT

데이터 일부만 바꾸고 싶다
→ PATCH

데이터를 삭제하고 싶다
→ DELETE

핵심 원칙

1. 의미에 맞는 Method 사용: GET은 조회, POST는 생성
2. RESTful 설계: 명사 기반 URL + HTTP Method
3. 멱등성 고려: 안전한 재시도 가능하도록
4. 보안: HTTPS + 적절한 인증/인가
5. 표준 상태 코드: 일관된 응답

🔗 추가 리소스

• MDN: HTTP Request Methods
• REST API Tutorial
• HTTP 상태 코드

💡 TIP: API를 설계할 때는 항상 "이 요청이 서버의 상태를 변경하는가?"를 먼저 생각하세요. 변경하지 않으면 GET, 변경한다면 POST/PUT/PATCH/DELETE를 사용하면 됩니다!

개념

HTTP는 서버와 클라이언트 모델에서 데이터를 주고받기 위한 프로토콜입니다.

• 인터넷에서 웹 브라우저와 서버 간의 통신 규약
• 1989년 팀 버너스리가 처음 설계
• 기본 포트: 80번
• 연결 방식: 비연결성(Connectionless), 무상태(Stateless)

특징

구조

클라이언트 ──── HTTP 요청 ───→ 서버
            (평문 데이터)
클라이언트 ←─── HTTP 응답 ──── 서버
            (평문 데이터)

🔒 HTTPS (HyperText Transfer Protocol Secure)

개념

HTTPS는 HTTP에 SSL/TLS라는 암호화 기반 인터넷 보안 프로토콜을 추가한 것입니다.

• HTTP + SSL/TLS = HTTPS
• 기본 포트: 443번
• 데이터 암호화, 인증, 무결성 보장

SSL vs TLS

💡 현재는 TLS를 사용하지만, 관습적으로 SSL이라는 용어를 함께 사용합니다.

특징

구조

클라이언트 ──── HTTPS 요청 ───→ 서버
         (암호화된 데이터 🔐)
클라이언트 ←─── HTTPS 응답 ──── 서버
         (암호화된 데이터 🔐)

🆚 HTTP vs HTTPS 차이점

1. 보안성 🔐

HTTP

• ❌ 암호화되지 않은 평문 전송
• ❌ 중간자 공격(MITM)에 취약
• ❌ 데이터 도청 가능
• ❌ 데이터 변조 가능

사용자 → [ID: admin, PW: 1234] → 서버
        ↓ (누구나 볼 수 있음!)
     해커 👀

HTTPS

• ✅ 데이터 암호화
• ✅ 안전한 데이터 전송
• ✅ 데이터 무결성 보장
• ✅ 서버 신원 인증

사용자 → [🔐 암호화된 데이터] → 서버
        ↓ (해독 불가능!)
     해커 ❓❓❓

2. SEO (검색엔진 최적화) 📈

구글의 HTTPS 우대 정책

• ✅ 2014년: 구글이 HTTPS를 검색 순위 결정 요소로 공식 발표
• ✅ 가산점 부여: HTTPS 사이트에 순위 가산점
• ✅ Chrome 경고: HTTP 사이트를 "안전하지 않음"으로 표시

🔒 https://example.com    ← 우선 노출
⚠️  http://example.com     ← 불이익

3. 성능 ⚡

과거

HTTP  → 빠름 ✅
HTTPS → 느림 (암호화/복호화 오버헤드) ❌

현재 (2025년)

HTTP  → 빠름 ✅
HTTPS → 거의 동일 (하드웨어 발전 + HTTP/2, HTTP/3) ✅

성능 차이가 미미한 이유:

• 현대 프로세서의 AES-NI 명령어 세트
• HTTP/2, HTTP/3의 성능 최적화
• TLS 1.3의 핸드셰이크 간소화

4. 비용 💰

HTTPS 인증서 옵션:

• 🆓 Let's Encrypt: 무료 인증서 (90일 갱신)
• 💵 상용 인증서: Comodo, DigiCert 등 (연간 수만원~수십만원)
• 💼 EV 인증서: 회사명 표시 (연간 수백만원)

🔑 HTTPS 암호화 방식

HTTPS는 대칭키와 비대칭키 암호화 방식을 하이브리드로 사용합니다.

대칭키 암호화 (Symmetric Key)

동일한 키로 암호화와 복호화를 수행합니다.

평문 ──[세션키로 암호화]──→ 암호문
암호문 ──[같은 세션키로 복호화]──→ 평문

특징:

• ⚡ 빠른 속도: 연산이 간단
• 🔐 데이터 암호화: 실제 통신 데이터 암호화에 사용
• ⚠️ 키 공유 문제: 키를 안전하게 교환하는 것이 어려움

예시: AES, DES, 3DES

비대칭키 암호화 (Asymmetric Key)

공개키와 개인키 쌍을 사용합니다.

평문 ──[공개키로 암호화]──→ 암호문 ──[개인키로 복호화]──→ 평문
평문 ──[개인키로 암호화]──→ 암호문 ──[공개키로 복호화]──→ 평문

핵심 원리:

• 🔓 공개키: 누구나 볼 수 있는 키 (암호화용)
• 🔐 개인키: 소유자만 갖고 있는 키 (복호화용)
• 🔄 상호 변환: 공개키로 암호화 → 개인키로 복호화 / 개인키로 암호화 → 공개키로 복호화

특징:

• 🐌 느린 속도: 연산이 복잡
• 🔑 키 교환: 세션키를 안전하게 전달하는데 사용
• ✅ 안전성: 공개키가 노출되어도 안전

예시: RSA, ECC

하이브리드 방식

HTTPS는 두 방식의 장점을 결합합니다:

1단계: 비대칭키로 세션키 교환 (느리지만 안전)
   ↓
2단계: 대칭키(세션키)로 데이터 암호화 (빠르고 효율적)

🔐 HTTPS 세션키 공유 과정 (SSL/TLS Handshake)

전체 흐름도

클라이언트                               서버
    |                                    |
    |────① Client Hello─────────────────→|
    |                                    |
    |←───② Server Hello + 인증서─────────|
    |                                    |
    |────③ 세션키 생성 및 암호화─────────→|
    |     (서버 공개키로 암호화)           |
    |                                    |
    |←───④ 완료 (세션키 복호화 완료)──────|
    |                                    |
    |═══⑤ 암호화된 데이터 통신 시작═══════|

상세 단계별 설명

🔹 Step 1: 클라이언트 → 서버 (최초 연결 시도)

클라이언트: "안녕하세요! HTTPS 연결을 시작하고 싶습니다."
           "제가 지원하는 암호화 방식: [TLS 1.3, AES-256, ...]"

전송 정보:

• 지원하는 TLS 버전
• 지원하는 암호화 알고리즘 목록
• 무작위 데이터 (랜덤 바이트)

🔹 Step 2: 서버 → 클라이언트 (인증서 전달)

서버: "안녕하세요! 여기 제 신분증(인증서)입니다."

서버가 전달하는 것:

• ✅ SSL/TLS 인증서
  • 서버의 공개키 포함
  • CA(인증기관)의 개인키로 암호화됨
  • 서버 정보 (도메인, 유효기간 등)

📜 인증서는 어떻게 만들어졌을까?

사전 준비 과정:

1. 서버 관리자
   └─→ 개인키/공개키 쌍 생성
   └─→ 공개키 + 서버정보를 CA에 제출
   └─→ 💰 비용 지불

2. CA (Certificate Authority)
   └─→ 서버 신원 확인
   └─→ 인증서 생성 (서버 공개키 포함)
   └─→ CA의 개인키로 인증서 암호화 🔐
   └─→ 서버에게 인증서 발급

3. 서버
   └─→ 발급받은 인증서 저장
   └─→ 클라이언트 요청 시 전달 준비 완료

주요 CA 기업:

• Let's Encrypt (무료)
• DigiCert
• Comodo
• GlobalSign

🔹 Step 3: 클라이언트의 인증서 검증

클라이언트: "이 인증서가 진짜인지 확인해볼게요!"

검증 과정:

1. 브라우저에 내장된 CA 공개키 확인
   └─→ 주요 CA들의 공개키는 브라우저에 사전 설치됨

2. CA 공개키로 인증서 복호화 시도
   └─→ 성공 = 진짜 CA가 발급한 인증서 ✅
   └─→ 실패 = 위조 인증서 ❌

3. 인증서 내용 확인
   ├─→ 도메인 일치 여부
   ├─→ 유효기간 확인
   └─→ 폐기 여부 확인 (CRL, OCSP)

검증 결과:

• ✅ 성공: 인증서에서 서버의 공개키 추출
• ❌ 실패: "안전하지 않은 연결" 경고 표시

🔹 Step 4: 클라이언트 → 서버 (세션키 전달)

클라이언트: "이제 우리가 사용할 비밀번호(세션키)를 
           안전하게 보내드릴게요!"

과정:

1. 세션키 생성
   └─→ 무작위 대칭키 생성 (예: AES-256 키)

2. 클라이언트에 세션키 저장
   └─→ 메모리에 보관

3. 서버 공개키로 세션키 암호화 🔐
   └─→ 인증서에서 추출한 서버 공개키 사용
   └─→ 암호화된 세션키 생성

4. 암호화된 세션키를 서버로 전송
   └─→ 중간에 누가 가로채도 복호화 불가능!

비유:

세션키 = "secret123"

암호화 전:  secret123  (해커가 볼 수 있음 ❌)
       ↓ [서버 공개키로 암호화]
암호화 후:  8j#kL@9x...  (해커가 못 봄 ✅)

🔹 Step 5: 서버의 세션키 복호화

서버: "받았습니다! 제 개인키로 열어볼게요."

과정:

1. 암호화된 세션키 수신
   └─→ 8j#kL@9x... (암호화된 데이터)

2. 서버의 개인키로 복호화 🔓
   └─→ 오직 서버만 갖고 있는 개인키 사용
   └─→ 복호화 성공: "secret123"

3. 서버에 세션키 저장
   └─→ 메모리에 보관

핵심:

• ✅ 서버만 개인키를 갖고 있음
• ✅ 따라서 서버만 세션키를 복호화 가능
• ✅ 중간에 누가 가로채도 무용지물

🔹 Step 6: 암호화된 통신 시작

클라이언트: "이제 우리만의 비밀번호로 얘기해요!"
서버: "좋습니다! 보안 통신 시작!"

이제 양쪽 모두 세션키를 가짐:

클라이언트                          서버
    |                              |
[세션키: secret123]      [세션키: secret123]
    |                              |
    |═══ 암호화된 데이터 전송 ═══════|
    |     (대칭키 암호화)            |
    |                              |

실제 데이터 전송:

1. 클라이언트 → 서버
   평문: "안녕하세요"
   ↓ [세션키로 암호화]
   전송: "9k#mL@2p..."

2. 서버
   수신: "9k#mL@2p..."
   ↓ [세션키로 복호화]
   평문: "안녕하세요"

🎯 핵심 포인트 정리

암호화/복호화 규칙

✅ 공개키로 암호화 → 개인키로 복호화
✅ 개인키로 암호화 → 공개키로 복호화

❌ 공개키로 암호화 → 공개키로 복호화 (불가능!)
❌ 개인키로 암호화 → 개인키로 복호화 (불가능!)

세션키 교환의 보안성

각 키의 역할

🎨 전체 과정 시각화

준비 단계 (서버)
┌─────────────────────────────────────────┐
│ 서버: 개인키/공개키 생성                  │
│   └─→ CA에 공개키 + 정보 제출            │
│   └─→ CA가 개인키로 암호화한 인증서 발급  │
└─────────────────────────────────────────┘

연결 단계 (클라이언트 ↔ 서버)
┌─────────────────────────────────────────┐
│ ① 클라이언트: 연결 요청                   │
│    "안녕하세요!"                         │
│                                         │
│ ② 서버: 인증서 전달                       │
│    [CA 개인키로 암호화된 인증서]          │
│     └─ 서버 공개키 포함                  │
│                                         │
│ ③ 클라이언트: 인증서 검증                 │
│    [CA 공개키로 복호화] ✅                │
│     └─ 서버 공개키 추출                  │
│                                         │
│ ④ 클라이언트: 세션키 생성 및 전송         │
│    세션키 생성: "secret123"              │
│     ↓ [서버 공개키로 암호화]             │
│    전송: "8j#kL@9x..."                  │
│                                         │
│ ⑤ 서버: 세션키 복호화                     │
│    수신: "8j#kL@9x..."                  │
│     ↓ [서버 개인키로 복호화]             │
│    세션키: "secret123" ✅                │
│                                         │
│ ⑥ 암호화된 통신 시작                      │
│    [양쪽 모두 세션키 보유]                │
│     └─ 대칭키 암호화로 빠른 통신          │
└─────────────────────────────────────────┘

❓ 자주 묻는 질문

Q1. 왜 세션키를 사용하나요? 그냥 공개키/개인키로 통신하면 안 되나요?

A. 비대칭키는 연산이 느립니다!

비대칭키 암호화: 🐌🐌🐌 (느림)
대칭키 암호화:   ⚡⚡⚡ (빠름)

→ 세션키 교환만 비대칭키 (안전하게)
→ 실제 데이터는 대칭키 (빠르게)

Q2. 세션키를 매번 새로 만드나요?

A. 네, 세션마다 새로운 세션키를 생성합니다.

세션 1: session_key_abc123
세션 2: session_key_xyz789
세션 3: session_key_def456

→ 이전 세션의 키가 노출되어도 안전

Q3. CA 공개키는 어디서 오나요?

A. 브라우저와 OS에 사전 설치되어 있습니다.

Chrome, Firefox, Edge, Safari 등
└─→ 주요 CA들의 공개키 내장
    (Let's Encrypt, DigiCert, ...)

🎯 실전 체크리스트

웹사이트 운영자를 위한 HTTPS 적용 가이드

✅ HTTPS 전환 체크리스트

• SSL/TLS 인증서 발급
  • 무료: Let's Encrypt
  • 유료: 상용 인증서
• 웹 서버에 인증서 설치
• HTTP → HTTPS 리다이렉트 설정
• Mixed Content 문제 해결
  • 모든 리소스를 HTTPS로 로드
• HSTS 헤더 설정
• 인증서 자동 갱신 설정
• CDN HTTPS 적용
• 서브도메인 인증서 확인

🔍 HTTPS 적용 확인 방법

# 1. 브라우저 주소창 확인
🔒 자물쇠 아이콘 확인

# 2. 온라인 도구
https://www.ssllabs.com/ssltest/
→ A+ 등급 목표

# 3. 개발자 도구 콘솔
Mixed Content 경고 없는지 확인

📚 추가 리소스

공식 문서

• MDN: HTTP
• MDN: HTTPS
• Let's Encrypt 공식 사이트

도구

• SSL Labs Test - SSL/TLS 설정 테스트
• Why No Padlock? - Mixed Content 찾기
• SSL Checker - 인증서 확인

🎓 요약

HTTP

✅ 빠른 속도
❌ 보안 취약
❌ SEO 불리
💰 무료

HTTPS

✅ 안전한 통신
✅ SEO 유리
✅ 사용자 신뢰
⚡ 성능 거의 동일 (현재)
💰 무료~유료 (Let's Encrypt 무료)

결론

2025년 현재, HTTPS는 선택이 아닌 필수입니다!

• 🔐 사용자 데이터 보호
• 📈 검색 순위 향상
• 🏆 브랜드 신뢰도 증가
• ⚡ 성능 저하 미미
• 💰 무료 옵션 존재

💡 추천: 모든 웹사이트는 HTTPS를 적용하세요. Let's Encrypt를 사용하면 무료로 시작할 수 있습니다!

📅 릴리즈: 2025년 10월 21일
🔗 공식 문서: Next.js 16 Release

🎯 개요

Next.js 16은 성능, 캐싱 전략, 그리고 React 최신 기능과의 통합에 초점을 맞춘 메이저 업데이트입니다. 이번 릴리즈의 핵심은 명시적이고 예측 가능한 캐싱, 빌드 성능 향상, 그리고 개발자 경험 개선입니다.

✨ 주요 신기능

1. Cache Components - 캐싱의 새로운 패러다임

개념

기존 App Router의 암묵적(implicit) 캐싱 방식에서 벗어나, 명시적(explicit) 캐싱으로 전환되었습니다.

Cache Components는 use cache 디렉티브를 중심으로 하며, 페이지, 컴포넌트, 함수를 캐시 가능하게 만들 수 있습니다.

주요 특징

• 기본 동작 변경: 모든 동적 코드는 기본적으로 요청 시점에 실행되며, 캐싱은 완전히 opt-in 방식
• Partial Pre-Rendering (PPR) 완성: 정적 콘텐츠와 동적 콘텐츠를 하나의 페이지에서 조합 가능
• 자동 캐시 키 생성: 컴파일러가 자동으로 캐시 키를 생성

설정 방법

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

사용 예시

1. 페이지 레벨 캐싱

// app/blog/page.tsx
"use cache";

export default async function BlogPage() {
  const posts = await fetchPosts();
  return (
    <div>
      {posts.map(post => (
        <Article key={post.id} {...post} />
      ))}
    </div>
  );
}

2. 컴포넌트 레벨 캐싱

async function ProductList() {
  "use cache";
  const products = await getProducts();
  return (
    <>
      {products.map(product => (
        <p key={product.id}>{product.name}</p>
      ))}
    </>
  );
}

3. 함수 레벨 캐싱

async function getProducts() {
  "use cache";
  cacheTag("products");
  const products = await db.query("SELECT * FROM products");
  return products;
}

관련 설정 제거

• experimental.ppr 플래그 제거
• experimental.dynamicIO 플래그 제거
• export const dynamic = 'force-dynamic' 불필요

2. Turbopack - 안정화 및 기본 번들러 지정

성능 개선

프로덕션 빌드가 2-5배 빠르고, Fast Refresh가 최대 10배 향상되었습니다.

주요 변경사항

• 안정화: 베타에서 안정 버전으로 승격
• 기본 번들러: 모든 새 Next.js 프로젝트의 기본 번들러
• 광범위한 채택: Next.js 15.3+ 이상에서 개발 세션의 50%, 프로덕션 빌드의 20% 이상이 Turbopack 사용

Webpack 사용 방법

여전히 webpack이 필요한 경우:

next dev --webpack
next build --webpack

파일시스템 캐싱 (베타)

대규모 프로젝트를 위한 추가 성능 향상 기능:

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
export default nextConfig;

효과: 재시작 간 컴파일 아티팩트를 디스크에 저장하여 컴파일 시간 대폭 단축

3. 개선된 캐싱 API

revalidateTag() - 업데이트됨

이제 stale-while-revalidate (SWR) 동작을 위한 cacheLife 프로필이 두 번째 인자로 필수입니다.

import { revalidateTag } from 'next/cache';

// ✅ 권장: 대부분의 경우 'max' 사용
revalidateTag('blog-posts', 'max');

// 다른 내장 프로필 사용
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// 커스텀 재검증 시간 사용
revalidateTag('products', { expire: 3600 });

// ⚠️ 더 이상 사용 불가
revalidateTag('blog-posts'); // 에러!

사용 시나리오:

• 최종 일관성을 허용할 수 있는 콘텐츠
• 사용자가 캐시된 데이터를 즉시 받고 백그라운드에서 재검증

updateTag() - 신규

Server Action 전용 API로 read-your-writes 시맨틱을 제공합니다.

'use server';
import { updateTag } from 'next/cache';

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);

  // 캐시 만료 및 즉시 새로운 데이터 읽기
  updateTag(`user-${userId}`);
}

사용 시나리오:

• 폼 제출
• 사용자 설정 변경
• 사용자가 즉시 변경사항을 봐야 하는 모든 경우

refresh() - 신규

캐시되지 않은 데이터만 새로고침하는 Server Action 전용 API입니다.

'use server';
import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  await db.notifications.markAsRead(notificationId);

  // 헤더의 알림 카운트만 새로고침 (캐시되지 않은 데이터)
  refresh();
}

사용 시나리오:

• 알림 카운트
• 라이브 메트릭
• 상태 표시기
• 캐시되지 않은 동적 데이터

4. proxy.ts (이전 middleware.ts)

변경 사항

middleware.ts가 proxy.ts로 이름 변경되어 앱의 네트워크 경계를 명확히 함

마이그레이션 방법:

# 파일 이름 변경
mv middleware.ts proxy.ts

// proxy.ts
import { NextRequest, NextResponse } from 'next/server';

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

주요 변경점

⚠️ 주의:

• proxy.ts는 Node.js 런타임에서만 실행
• Edge 런타임이 필요한 경우 middleware.ts를 계속 사용 (deprecated)

5. Next.js DevTools MCP

Model Context Protocol을 통한 AI 기반 디버깅 도구입니다.

기능

AI 에이전트에 Next.js 지식, 통합 로그, 자동 에러 접근, 페이지 인식 기능을 제공합니다.

• 라우팅, 캐싱, 렌더링 동작 이해
• 브라우저와 서버 로그 통합: 컨텍스트 전환 없이 확인
• 자동 에러 접근: 수동 복사 없이 상세한 스택 트레이스 제공
• 페이지 인식: 활성 라우트에 대한 컨텍스트 이해

활용

AI 도구가 프로젝트 구조를 이해하여:

• 이슈 진단
• 동작 설명
• 개발 워크플로우 내에서 직접 수정 제안

6. React 19.2 통합

Next.js 16은 React 19.2의 최신 기능들을 포함한 React Canary 릴리스를 사용합니다.

새로운 기능

View Transitions

// Transition 내부에서 애니메이션 적용
<Transition>
  <ElementThatAnimates />
</Transition>

useEffectEvent()

// Effect에서 비반응형 로직을 재사용 가능한 함수로 추출
const onVisit = useEffectEvent(() => {
  logVisit(url);
});

Activity 컴포넌트

// display: none으로 UI를 숨기면서 상태 유지 및 Effect 정리
<Activity>
  <BackgroundTask />
</Activity>

7. 향상된 라우팅 및 네비게이션

Layout Deduplication

여러 URL이 공유 레이아웃을 가질 때, 레이아웃을 한 번만 다운로드합니다.

예시: 50개의 제품 링크가 있는 페이지에서 공유 레이아웃을 50번이 아닌 1번만 다운로드

Incremental Prefetching

Next.js는 캐시에 없는 부분만 프리페치하며, 전체 페이지를 프리페치하지 않음

특징:

• 링크가 뷰포트를 벗어나면 요청 취소
• 호버 시 또는 뷰포트에 재진입 시 우선순위 지정
• 데이터가 무효화되면 링크 재프리페치
• Cache Components와 원활하게 작동

트레이드오프:

• ✅ 개별 프리페치 요청이 더 많을 수 있음
• ✅ 하지만 총 전송 크기는 훨씬 작음

8. 간소화된 create-next-app

설정 플로우 단순화, 업데이트된 프로젝트 구조, 개선된 기본값

새 템플릿 기본값

• ✅ App Router (기본)
• ✅ TypeScript 우선 설정
• ✅ Tailwind CSS
• ✅ ESLint

npx create-next-app@latest

9. React Compiler 지원 - 안정화

React Compiler의 1.0 릴리스에 따라 Next.js 16에서 안정화

기능

• 자동 메모이제이션: 컴포넌트를 자동으로 메모이제이션하여 불필요한 리렌더링 감소
• 수동 코드 변경 불필요: useMemo, useCallback 등을 수동으로 추가할 필요 없음

설정

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};
export default nextConfig;

npm install babel-plugin-react-compiler@latest

⚠️ 주의:

• 기본적으로 비활성화 (빌드 성능 데이터 수집 중)
• 개발 및 빌드 시 컴파일 시간이 증가할 수 있음 (Babel 의존성)

10. Build Adapters API (알파)

커스텀 빌드 통합을 위한 새로운 API입니다.

용도

• 배포 플랫폼이 빌드 프로세스에 hook
• Next.js 설정 수정
• 빌드 출력 처리

// next.config.js
const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};
module.exports = nextConfig;

11. 로깅 개선

개발 요청 로그

시간이 소요되는 위치를 명확히 표시:

• Compile: 라우팅 및 컴파일
• Render: 코드 실행 및 React 렌더링

빌드 로그

각 빌드 단계와 소요 시간을 표시:

▲ Next.js 16 (Turbopack)
✓ Compiled successfully in 615ms
✓ Finished TypeScript in 1114ms
✓ Collecting page data in 208ms
✓ Generating static pages in 239ms
✓ Finalizing page optimization in 5ms

🔴 Breaking Changes

1. 버전 요구사항

2. Async Params 및 SearchParams

가장 큰 변경사항 중 하나입니다.

변경 전 (Next.js 15)

export default function Page({ 
  params,
  searchParams 
}: { 
  params: { id: string };
  searchParams: { sort: string };
}) {
  const id = params.id;  // 직접 접근
  const sort = searchParams.sort;
  return <div>Product {id}</div>;
}

변경 후 (Next.js 16)

export default async function Page({ 
  params,
  searchParams 
}: { 
  params: Promise<{ id: string }>;
  searchParams: Promise<{ sort: string }>;
}) {
  const { id } = await params;  // await 필수
  const { sort } = await searchParams;
  return <div>Product {id}</div>;
}

3. 동적 함수들도 Async

// 변경 전
import { cookies } from 'next/headers';

export function getAuthToken() {
  const cookieStore = cookies();
  return cookieStore.get('token');
}

// 변경 후
import { cookies } from 'next/headers';

export async function getAuthToken() {
  const cookieStore = await cookies();
  return cookieStore.get('token');
}

적용 대상:

• cookies()
• headers()
• draftMode()

4. 제거된 기능

5. 동작 변경

기본 번들러

• 변경: Turbopack이 모든 앱의 기본 번들러
• 옵트아웃: next build --webpack

이미지 관련

• images.minimumCacheTTL: 60초 → 4시간 (14400초)
• images.imageSizes: 기본값에서 16 제거 (4.2%만 사용)
• images.qualities: [1..100] → [75]
• images.maximumRedirects: 무제한 → 3회

next/image 로컬 소스

쿼리 문자열이 있는 로컬 이미지 소스는 열거 공격 방지를 위해 images.localPatterns.search 설정이 필요

Parallel Routes

모든 parallel route 슬롯에 명시적인 default.js 파일 필요

⚠️ Deprecated (향후 제거 예정)

🚀 마이그레이션 가이드

자동 마이그레이션

Next.js는 자동 codemod를 제공합니다:

npx @next/codemod@canary upgrade latest

수동 업그레이드

npm install next@latest react@latest react-dom@latest

새 프로젝트 시작

npx create-next-app@latest

📊 성능 개선 요약

🎯 주요 사용 사례별 가이드

Case 1: 블로그 사이트

// 전체 페이지 캐싱
"use cache";

export default async function BlogPage() {
  const posts = await fetchPosts();
  return <PostList posts={posts} />;
}

Case 2: 전자상거래

// 제품 목록은 캐싱, 사용자 장바구니는 동적
export default async function ProductPage() {
  return (
    <>
      <ProductList />  {/* use cache */}
      <Suspense fallback={<Loading />}>
        <UserCart />   {/* 동적 */}
      </Suspense>
    </>
  );
}

Case 3: 대시보드

// 실시간 데이터는 캐시하지 않음
export default async function Dashboard() {
  const realtimeData = await fetchRealtimeData();
  return <MetricsDashboard data={realtimeData} />;
}

🔗 유용한 링크

• 공식 릴리스 노트
• 업그레이드 가이드
• Cache Components 문서
• Turbopack 문서
• React 19.2 발표

💡 마이그레이션 체크리스트

• Node.js 20.9+ 설치
• TypeScript 5.1+ 업그레이드
• params 및 searchParams를 async로 변경
• cookies(), headers(), draftMode()에 await 추가
• middleware.ts → proxy.ts 변경
• revalidateTag() 호출에 두 번째 인자 추가
• 제거된 기능 사용 여부 확인
• cacheComponents 플래그 고려
• 자동 codemod 실행
• 테스트 및 배포

🎉 결론

Next.js 16은 성능과 개발자 경험을 크게 개선한 릴리스입니다. 특히:

✅ 명시적 캐싱으로 더 예측 가능한 동작
✅ Turbopack 안정화로 빠른 빌드
✅ 개선된 API로 더 나은 제어
✅ React 19.2로 최신 기능 활용

기존 프로젝트는 breaking changes를 주의 깊게 검토하고, 새 프로젝트는 바로 Next.js 16으로 시작하는 것을 권장합니다!

2025년 10월 1일 - React 팀
React 19.2가 npm에서 사용 가능합니다!

📋 목차

• 들어가며
• 새로운 React 기능
  • Activity 컴포넌트
  • useEffectEvent 훅
  • cacheSignal API
  • Performance Tracks
• 새로운 React DOM 기능
  • Partial Pre-rendering
• 주목할 만한 변경사항
• 변경 로그

들어가며

이번 릴리스는 12월의 React 19와 6월의 React 19.1에 이어 지난 1년간 세 번째 릴리스입니다. React 19.2의 새로운 기능과 주목할 만한 변경사항이 어떤 게 있는지 알아보겠습니다!

🎯 주요 업데이트

새로운 React 기능

🎭 Activity 컴포넌트

<Activity>를 사용하면 앱을 제어하고 우선순위를 지정할 수 있는 "활동"으로 분할할 수 있습니다. 그리고, 컴포넌트를 언마운트하지 않고 숨기면서 state는 유지하고 effects만 정리할 수 있어, 기존 조건부 렌더링보다 유연한 제어가 가능합니다.

기본 사용법

// ❌ 이전 방식
{isVisible && <Page />}

// ✅ 새로운 방식
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

지원 모드

💡 주요 이점

• 🚀 성능 최적화: 화면에 보이는 것의 성능에 영향 없이 숨겨진 부분을 미리 렌더링
• 🔄 빠른 네비게이션: 백그라운드에서 데이터, CSS, 이미지 로드
• 💾 상태 유지: 뒤로 탐색 시 입력 필드 같은 상태 보존

🎪 useEffectEvent 훅

useEffect에서 이벤트 핸들러를 분리하여 불필요한 재실행을 방지합니다.

문제 상황

// ❌ theme이 변경되면 채팅방이 다시 연결됨
function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // theme 변경 시 재연결!
}

해결 방법

// ✅ useEffectEvent로 이벤트 분리
function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ theme은 의존성 배열에서 제외
}

⚠️ 사용 시 주의사항

언제 사용해야 할까요?

• ✅ Effect에서 발생하는 개념적인 "이벤트"에 사용
• ❌ 단순히 lint 오류를 무시하기 위해 사용 금지
• 📌 eslint-plugin-react-hooks@6.1.1 이상 필요

🔄 cacheSignal API

React Server Components 전용

cache() 수명 주기를 추적하여 불필요한 작업을 정리할 수 있습니다.

import { cache, cacheSignal } from 'react';

const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

정리 시점

• ✅ React가 렌더링을 성공적으로 완료
• 🛑 렌더링이 중단됨
• ❌ 렌더링이 실패함

📊 Performance Tracks

Chrome DevTools에 새로운 성능 프로필 트랙이 추가되었습니다!

1️⃣ Scheduler ⚛ 트랙

React가 다양한 우선순위로 작업을 처리하는 과정을 시각화합니다.

🟦 Blocking   ← 사용자 상호작용
🟩 Transition ← startTransition 업데이트

확인 가능한 정보:

• 업데이트를 예약한 이벤트
• 렌더링 발생 시점
• 우선순위 대기 상황
• Paint 대기 시간

2️⃣ Components ⚛ 트랙

컴포넌트 렌더링과 effect 실행을 추적합니다.

📌 Mount   ← 컴포넌트/effect 마운트
⏸️ Blocked ← React 외부 작업으로 양보

성능 문제 식별:

• 렌더링 시점
• Effect 실행 시점
• 작업 완료 시간

새로운 React DOM 기능

🎨 Partial Pre-rendering

앱의 일부를 미리 렌더링하고 나중에 재개하는 강력한 기능입니다.

작동 방식

graph LR
    A[Static Parts] -->|CDN| B[Prelude Shell]
    B --> C[Dynamic Content]
    C --> D[Complete Page]

구현 예제

1단계: 사전 렌더링

const { prelude, postponed } = await prerender(<App />, {
  signal: controller.signal,
});

// postponed 상태 저장
await savePostponedState(postponed);

// prelude를 CDN으로 전송

2단계: SSR 재개

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);

// 스트림을 클라이언트로 전송

3단계: SSG 재개

const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState);

// 완전한 HTML을 CDN으로 전송

📚 새로운 API

react-dom/server

• resume - Web Streams용
• resumeToPipeableStream - Node Streams용

react-dom/static

• resumeAndPrerender - Web Streams용
• resumeAndPrerenderToNodeStream - Node Streams용

주목할 만한 변경사항

🎯 SSR을 위한 Suspense 경계 일괄 처리

클라이언트와 서버의 렌더링 동작을 일치시키는 중요한 개선사항입니다.

Before vs After

이전 (19.1)

┌─────────────┐
│ Loading... │  ← 즉시 대체
├─────────────┤
│ Content A  │  ← 즉시 표시
├─────────────┤
│ Loading... │
└─────────────┘

현재 (19.2)

┌─────────────┐
│ Loading... │
├─────────────┤  ← 짧은 시간 일괄 처리
│ Content A  │
├─────────────┤
│ Content B  │  ← 함께 표시
└─────────────┘

💡 장점

• 🎬 View Transitions 지원: 더 큰 단위로 애니메이션 실행
• ⚡ 성능 최적화: 연쇄 애니메이션 방지
• 📊 Core Web Vitals: LCP 메트릭 자동 고려

참고: React는 페이지 로드 시간이 2.5초에 가까워지면 자동으로 일괄 처리를 중단하여 메트릭에 영향을 주지 않습니다.

🌊 SSR: Node용 Web Streams 지원

Node.js 환경에서도 Web Streams API를 사용할 수 있습니다!

새로 추가된 API

// Web Streams 사용 가능
✅ renderToReadableStream
✅ prerender
✅ resume
✅ resumeAndPrerender

⚠️ 중요한 권장사항

Node.js에서는 Node Streams를 권장합니다!

// 🚀 권장: Node Streams (더 빠름)
renderToPipeableStream
resumeToPipeableStream
prerenderToNodeStream
resumeAndPrerenderToNodeStream

// ⚡ Web Streams는 Node에서 느리고 압축 미지원

🔧 eslint-plugin-react-hooks v6

Flat Config가 기본값으로 설정되고, React Compiler 기반 규칙을 선택적으로 사용할 수 있습니다.

레거시 설정 사용하기

// package.json 또는 eslint.config.js
{
  // ❌ 이전
  extends: ['plugin:react-hooks/recommended']

  // ✅ 레거시 유지
  extends: ['plugin:react-hooks/recommended-legacy']
}

🆔 useId 접두사 업데이트

기본 접두사가 변경되었습니다!

변경 로그

✨ 기타 주목할 만한 변경사항

• react-dom: hoistable 스타일에 nonce 사용 허용 (#32461)
• react-dom: React 소유 노드를 Container로 사용 시 경고 추가 (#32774)

🐛 주목할 만한 버그 수정

📚 참고 자료

• React 공식 블로그
• Activity 문서
• useEffectEvent 문서
• Performance Tracks 문서
• 전체 변경 로그

🎉 마무리

React 19.2는 성능 최적화, 개발자 경험 개선, 그리고 서버 사이드 렌더링의 강화를 가져왔습니다. 특히 <Activity> 컴포넌트와 useEffectEvent 훅은 실무에서 바로 활용할 수 있는 강력한 기능입니다.

지금 바로 업데이트하고 새로운 기능을 경험해보세요! 🚀

npm install react@19.2 react-dom@19.2

웹 접근성을 개선하여 모든 사용자가 쉽게 사용할 수 있는 애플리케이션을 만드는 방법을 알아보겠습니다.

📚 목차

1. 웹 접근성이란?
2. ESLint 접근성 플러그인 설정
3. Form 접근성 향상
4. Form 유효성 검사
5. 실습: Aria 라벨 추가하기

1. 웹 접근성이란?

💡 접근성(Accessibility)은 모든 사용자가 웹 애플리케이션을 쉽게 사용할 수 있도록 설계하는 것을 의미합니다.

웹 접근성은 단순히 장애가 있는 사용자만을 위한 것이 아닙니다. 다음과 같은 다양한 요소들을 포함합니다:

• 🎹 키보드 내비게이션
• 🏷️ 시맨틱(Semantic) HTML
• 🖼️ 이미지 대체 텍스트
• 🎨 색상 대비
• 🎬 비디오 자막

2. ESLint 접근성 플러그인 설정

Next.js는 기본적으로 eslint-plugin-jsx-a11y 플러그인을 포함하여 접근성 문제를 조기에 발견할 수 있게 도와줍니다.

2.1 설정 방법

1단계: package.json에 스크립트 추가

{
  "scripts": {
    "build": "next build",
    "dev": "next dev", 
    "start": "next start",
    "seed": "node -r dotenv/config ./scripts/seed.js",
    "lint": "next lint"  // 👈 이 라인 추가
  }
}

2단계: ESLint 실행

# pnpm 사용시
pnpm lint

# npm 사용시 
npm run lint

2.2 설치 과정 스크린샷

⚠️ 주의사항: ESLint v9에서 오류가 발생하면 v8.57.0으로 다운그레이드하세요.

npm uninstall eslint
npm install -D eslint@8.57.0

2.3 접근성 검사 테스트

ESLint 설치 후 접근성 오류를 테스트해보겠습니다.

다음 코드에서 alt 속성을 제거하고 테스트해보세요:

// /app/ui/invoices/table.tsx
<Image
  src={invoice.image_url}
  className="mr-2 rounded-full"
  width={28}
  height={28}
  // alt={`${invoice.name}'s profile picture`} 👈 이 라인을 주석처리
/>

3. Form 접근성 향상

현재 프로젝트에서는 이미 Form 접근성을 위해 다음 세 가지 요소를 구현하고 있습니다:

3.1 Semantic HTML 사용

// ✅ 좋은 예: 시맨틱 요소 사용
<input type="email" />
<select>
  <option>옵션1</option>
</select>

// ❌ 나쁜 예: 비시맨틱 요소 사용
<div onClick={handleClick}>클릭</div>

3.2 레이블 지정

<label htmlFor="email" className="block text-sm font-medium">
  이메일 주소
</label>
<input 
  id="email"
  name="email"
  type="email"
  className="mt-1 block w-full rounded-md border-gray-300"
/>

3.3 포커스 아웃라인

/* 포커스 시 아웃라인 표시 */
.form-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

💡 Tip: Tab 키를 눌러 포커스 이동을 테스트해보세요!

4. Form 유효성 검사

Form 검증은 사용자 경험과 데이터 무결성을 위해 필수적입니다.

4.1 클라이언트 사이드 검증

가장 간단한 방법은 HTML5의 기본 검증을 사용하는 것입니다:

<input
  id="amount"
  name="amount" 
  type="number"
  step="0.01"
  placeholder="Enter USD amount"
  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
  required  // 👈 필수 속성 추가
/>

4.2 서버 사이드 검증

서버 사이드 검증의 장점:

• ✅ 데이터베이스 전송 전 형식 확인
• ✅ 악의적인 사용자의 클라이언트 검증 우회 방지
• ✅ 데이터 유효성에 대한 단일 신뢰 소스

4.3 useActionState Hook 사용

React의 useActionState Hook을 사용하여 폼 상태를 관리합니다:

import { useActionState } from "react";

// useActionState 사용법 예시
async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm() {
  const [state, formAction] = useActionState(increment, 0);

  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

📋 useActionState 매개변수

📤 useActionState 반환값

4.4 Form 컴포넌트 구현

"use client";

import { useActionState } from "react";
import { createInvoice, State } from "@/app/lib/actions";

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState: State = { message: null, errors: {} };
  const [state, formAction] = useActionState(createInvoice, initialState);

  return (
    <form action={formAction}>
      {/* 폼 내용 */}
    </form>
  );
}

4.5 Zod를 사용한 스키마 검증

// /app/lib/actions.ts
const FormSchema = z.object({
  id: z.string(),

  customerId: z.string({
    invalid_type_error: "Please select a customer.",
  }),

  amount: z.coerce
    .number()
    .gt(0, { message: "Please enter an amount greater than $0." }),

  status: z.enum(["pending", "paid"], {
    invalid_type_error: "Please select an invoice status.",
  }),

  date: z.string(),
});

export type State = {
  errors?: {
    customerId?: string[];
    amount?: string[];
    status?: string[];
  };
  message?: string | null;
};

4.6 서버 액션 구현

export async function createInvoice(prevState: State, formData: FormData) {
  // Zod를 사용한 폼 검증
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  // 검증 실패 시 오류 반환
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.',
    };
  }

  // 데이터 준비
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  // 데이터베이스 삽입
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

4.7 오류 메시지 표시

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState: State = { message: null, errors: {} };
  const [state, formAction] = useActionState(createInvoice, initialState);

  return (
    <form action={formAction}>
      <div className="rounded-md bg-gray-50 p-4 md:p-6">
        <div className="mb-4">
          {/* 고객 선택 필드 */}
          <select id="customer" name="customerId">
            {/* 옵션들 */}
          </select>

          {/* 오류 메시지 표시 */}
          <div id="customer-error" aria-live="polite" aria-atomic="true">
            {state.errors?.customerId &&
              state.errors.customerId.map((error: string) => (
                <p className="mt-2 text-sm text-red-500" key={error}>
                  {error}
                </p>
              ))}
          </div>
        </div>
      </div>
    </form>
  );
}

5. 실습: Aria 라벨 추가하기

이번 실습에서는 edit-form.tsx 컴포넌트에 접근성을 향상시키는 요소들을 추가해보겠습니다.

5.1 구현 목표

• ✅ useActionState를 추가하여 폼 상태 관리
• ✅ updateInvoice 액션에 Zod 검증 추가
• ✅ 오류 메시지 표시 및 ARIA 라벨 추가

5.2 Edit Form 컴포넌트

"use client";

import { CustomerField, InvoiceForm } from "@/app/lib/definitions";
import { Button } from "@/app/ui/button";
import { State, updateInvoice } from "@/app/lib/actions";
import { useFormState } from "react-dom";

export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  const initialState: State = { message: null, errors: {} };
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
  const [state, formAction] = useFormState(updateInvoiceWithId, initialState);

  return (
    <form action={formAction}>
      <div className="rounded-md bg-gray-50 p-4 md:p-6">
        {/* 숨겨진 ID 필드 */}
        <input type="hidden" name="id" value={invoice.id} />

        {/* 고객 선택 */}
        <div className="mb-4">
          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
            Choose customer
          </label>
          <div className="relative">
            <select
              id="customer"
              name="customerId"
              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
              defaultValue={invoice.customer_id}
            >
              <option value="" disabled>
                Select a customer
              </option>
              {customers.map((customer) => (
                <option key={customer.id} value={customer.id}>
                  {customer.name}
                </option>
              ))}
            </select>
          </div>

          {/* 🎯 ARIA 라벨과 오류 메시지 추가 */}
          <div id="customer-error" aria-live="polite" aria-atomic="true">
            {state.errors?.customerId &&
              state.errors.customerId.map((error: string) => (
                <p className="mt-2 text-sm text-red-500" key={error}>
                  {error}
                </p>
              ))}
          </div>
        </div>

        {/* 금액 입력 */}
        <div className="mb-4">
          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
            Choose an amount
          </label>
          <div className="relative mt-2 rounded-md">
            <input
              id="amount"
              name="amount"
              type="number"
              defaultValue={invoice.amount}
              placeholder="Enter USD amount"
              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
            />
          </div>

          {/* 금액 오류 메시지 */}
          <div id="amount-error" aria-live="polite" aria-atomic="true">
            {state.errors?.amount &&
              state.errors.amount.map((error: string) => (
                <p className="mt-2 text-sm text-red-500" key={error}>
                  {error}
                </p>
              ))}
          </div>
        </div>

        {/* 상태 선택 */}
        <div>
          <label htmlFor="status" className="mb-2 block text-sm font-medium">
            Set the invoice status
          </label>
          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
            <div className="flex gap-4">
              <div className="flex items-center">
                <input
                  id="pending"
                  name="status"
                  type="radio"
                  value="pending"
                  defaultChecked={invoice.status === "pending"}
                />
                <label htmlFor="pending" className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600">
                  Pending
                </label>
              </div>
              <div className="flex items-center">
                <input
                  id="paid"
                  name="status"
                  type="radio"
                  value="paid"
                  defaultChecked={invoice.status === "paid"}
                />
                <label htmlFor="paid" className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white">
                  Paid
                </label>
              </div>
            </div>
          </div>

          {/* 상태 오류 메시지 */}
          <div id="status-error" aria-live="polite" aria-atomic="true">
            {state.errors?.status &&
              state.errors.status.map((error: string) => (
                <p className="mt-2 text-sm text-red-500" key={error}>
                  {error}
                </p>
              ))}
          </div>
        </div>
      </div>

      <div className="mt-6 flex justify-end gap-4">
        <Link
          href="/dashboard/invoices"
          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
        >
          Cancel
        </Link>
        <Button type="submit">Edit Invoice</Button>
      </div>
    </form>
  );
}

5.3 Update Invoice 액션

// /app/lib/actions.ts

export async function updateInvoice(
  id: string,
  prevState: State,
  formData: FormData
) {
  // Zod를 사용한 폼 검증
  const validatedFields = UpdateInvoice.safeParse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  // 검증 실패 시 오류 반환
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: "Missing Fields. Failed to Update Invoice.",
    };
  }

  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;

  // 데이터베이스 업데이트
  try {
    await sql`
      UPDATE invoices
      SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
      WHERE id = ${id}
    `;
  } catch (error) {
    return {
      message: "Database Error: Failed to Update Invoice.",
    };
  }

  // 캐시 무효화 및 리다이렉트
  revalidatePath("/dashboard/invoices");
  redirect("/dashboard/invoices");
}

이전 Chapter에서는 Server Action을 사용하여 데이터를 변경하는 방법에 대해 알아보았습니다. 이번에는 JavaScript의 try/catch 문과 Next.js API를 사용하여 오류를 효과적으로 처리하는 방법을 살펴보겠습니다.

📋 이번 Chapter에서 다룰 내용

1. error.tsx 파일을 활용한 오류 처리
   라우트 세그먼트에서 발생한 오류를 잡고, 사용자에게 대체 UI를 표시하는 방법

2. 404 오류 처리
   notFound 함수와 not-found 파일을 사용하여 존재하지 않는 리소스에 대한 404 오류를 처리하는 방법

3. Server Action 오류 처리
   서버 액션에 try/catch 문을 추가하여 오류를 안전하게 처리하는 방법

1. Adding try/catch to Server Actions

JavaScript의 try/catch 문을 서버 액션에 추가하여 오류를 처리해 보겠습니다.

/app/lib/actions.ts 수정

// ...

// 송장 데이터 생성부분 수정
export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  const amountInCents = amount * 100;
  const date = new Date().toISOString().split("T")[0];

  try { // 수정
    await sql`
    INSERT INTO invoices (customer_id, amount, status, date)
    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;
  } catch (e) {
    return {
      message: "DB Error : Faileed to Create Invoice",
    };
  }

  revalidatePath("/dashboard/invoices");
  redirect("/dashboard/invoices"); // add code
}

// 송장 데이터 업데이트부분 수정
export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  const amountInCents = amount * 100;

  try {
    await sql`
    UPDATE invoices
    SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
    WHERE id = ${id}
  `;
  } catch (e) {
    return {
      message: "DB Error : Faileed to Update Invoice",
    };
  }

  // 클라이언트 캐시 무효화 및 서버 요청 갱신
  revalidatePath("/dashboard/invoices");
  // 업데이트 후 인보이스 페이지로 리다이렉트
  redirect("/dashboard/invoices");
}

// 송장 데이터 삭제부분 수정
export async function deleteInvoice(id: string) {
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath("/dashboard/invoices");
    return { message: "Deleted Invoice." };
  } catch (error) {
    return { message: "Database Error: Failed to Delete Invoice." };
  }
}

⚠️ 중요한 주의사항

위 코드에서 redirect가 try/catch 구문 밖에서 호출되는 점에 주목해야 합니다.

Next.js에서 redirect 함수는 내부적으로 오류를 던져서 redirect를 실행합니다. 따라서 redirect가 try/catch 블록 안에 있을 경우, redirect가 호출되면 오류가 발생하여 바로 catch 블록에서 잡히게 됩니다.

그래서 redirect 함수를 사용할 때는 try 영역 내 코드흐름이 성공한 다음에 도달할 수 있게끔 구현해야 합니다.

오류 테스트해보기

Server Action에서 오류가 발생했을 때 어떻게 되는지 확인해 보겠습니다. 예시로 deleteInvoice 액션에서 의도적인 오류를 발생시켜보겠습니다.

export async function deleteInvoice(id: string) {
  // 의도적 에러 발생
  throw new Error("Failed to Delete Invoice");

  // 도달불가
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath("/dashboard/invoices");
    return { message: "Deleted Invoice." };
  } catch (error) {
    return { message: "Database Error: Failed to Delete Invoice." };
  }
}

이러한 오류를 개발 중에 확인하는 것은 잠재적인 문제를 조기에 발견하는 데 도움이 됩니다. 하지만 애플리케이션이 갑작스럽게 실패하는 것을 방지하고, 사용자에게 오류를 표시하여 계속 실행되도록 하는 것이 더 중요합니다! 이때 Next.js의 error.tsx 파일이 유용하게 사용됩니다.

2. Handling all errors with error.tsx

error.tsx 파일은 특정 라우트 세그먼트에 대한 UI 경계를 정의하는 데 사용되는 Next.js의 약속된 파일입니다. 이 파일은 예상치 못한 오류를 잡아내고, 사용자에게 대체 UI를 표시할 수 있습니다.

/dashboard/invoices/error.tsx 파일 생성

"use client";

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // 필요에 따라 오류를 오류 보고 서비스에 로깅
    console.error(error);
  }, [error]);

  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={() => reset()}
      >
        Try again
      </button>
    </main>
  );
}

🔑 error.tsx 파일의 주요 특징

1. "use client": error.tsx 파일은 클라이언트 컴포넌트여야 합니다.

2. 필수 props: 해당 파일은 항상 두 개의 props를 받습니다.

   • error: JavaScript의 기본 Error 객체
   • reset: 오류 경계를 리셋하는 함수로, 실행하면 해당 라우트 세그먼트를 다시 렌더링을 시도합니다.

이제 다시 송장 데이터의 삭제를 진행하려 하면 다음과 같은 UI가 표시됩니다.

3. Handling 404 errors with the notFound function

error.tsx가 모든 오류를 처리하는 데 유용하지만, notFound 함수는 존재하지 않는 리소스를 요청할 때 더 적절한 처리를 제공합니다.

404 오류 상황 테스트

다음 URL을 방문한다고 가정해보겠습니다 (해당 UUID는 DB에 없는 값입니다).

http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit

데이터 존재 여부 확인

리소스가 존재하지 않는지 확인하기 위해 fetchInvoiceById 함수에서 console.log로 확인해보겠습니다.

export async function fetchInvoiceById(id: string) {
  noStore();

  try {
    const data = await sql<InvoiceForm>`
      SELECT
        invoices.id,
        invoices.customer_id,
        invoices.amount,
        invoices.status
      FROM invoices
      WHERE invoices.id = ${id};
    `;

    const invoice = data.rows.map((invoice) => ({
      ...invoice,
      amount: invoice.amount / 100,
    }));

    console.log("invoice is ", invoice); // 출력 : invoices is []
    return invoice[0];
  } catch (error) {
    console.error("Database Error:", error);
  }
}

notFound() 함수 적용

데이터베이스에 해당 송장데이터가 없다는 것을 확인했으니, notFound() 함수를 사용해 적절한 404 처리를 해보겠습니다.

/dashboard/invoices/[id]/edit/page.tsx 수정

import Form from "@/app/ui/invoices/edit-form";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import { fetchCustomers, fetchInvoiceById } from "@/app/lib/data";
import { notFound } from "next/navigation";

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;

  // Promise.all을 사용하여 인보이스와 고객 데이터를 동시에 가져옴
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id), // 특정 인보이스 데이터를 가져옴
    fetchCustomers(), // 고객 데이터를 가져옴
  ]);

  if (!invoice) notFound();

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: "Invoices", href: "/dashboard/invoices" },
          {
            label: "Edit Invoice",
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers} />
    </main>
  );
}

not-found.tsx 파일 생성

notFound() 함수가 호출되면 내부적으로 라우트 세그먼트 범위 내의 not-found.tsx 파일을 탐색하고, 해당 파일 내용을 렌더링합니다.

/app/dashboard/invoices/[id]/edit/not-found.tsx 생성

import Link from "next/link";
import { FaceFrownIcon } from "@heroicons/react/24/outline";

export default function NotFound() {
  return (
    <main className="flex h-full flex-col items-center justify-center gap-2">
      <FaceFrownIcon className="w-10 text-gray-400" />
      <h2 className="text-xl font-semibold">404 Not Found</h2>
      <p>Could not find the requested invoice.</p>
      <Link
        href="/dashboard/invoices"
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
      >
        Go Back
      </Link>
    </main>
  );
}

🎯 중요한 우선순위

notFound() 함수로 호출되어 표시되는 not-found.tsx는 error.tsx보다 우선순위가 높습니다.

이는 특정 오류 상황을 더 구체적으로 처리할 때 notFound() 함수와 not-found.tsx 파일을 사용할 수 있다는 의미입니다.

4. 참고: Route Segment (라우트 세그먼트)

위에서 몇 번 라우트 세그먼트라고 언급했는데, 이것이 정확히 무엇인지 알아보겠습니다.

라우트 세그먼트란?

라우트 세그먼트(route segment)는 Next.js에서 URL 경로를 구성하는 각 경로(path)의 부분을 의미합니다.

예시로 이해하기

다음과 같은 URL이 있다고 가정해보겠습니다.

http://localhost:3000/dashboard/invoices/edit

위 경로의 라우트 세그먼트는 다음과 같습니다:

• dashboard
• invoices
• edit

폴더 구조와의 관계

Next.js에서 각각의 세그먼트는 폴더 구조와 1:1로 대응됩니다.

# App Router 방식
/app/dashboard/invoices/edit/page.tsx

# Pages Router 방식  
/pages/dashboard/invoices/edit.tsx

UI 경계 설정

Next.js는 각 세그먼트별로 독립적인 UI 경계(error boundary)를 설정할 수 있습니다.

예를 들어, invoices 세그먼트에 오류가 발생했을 때, error.tsx 파일이 /dashboard/invoices/ 폴더에 정의되어 있다면, 이 세그먼트 내의 오류를 처리할 수 있게 됩니다.

정리

라우트 세그먼트는 Next.js에서 특정 경로 또는 URL의 한 부분을 의미하며, 이를 통해 각 라우트 세그먼트마다 개별적으로 다음과 같은 기능들을 관리할 수 있습니다:

• 🔥 오류 처리 (error.tsx, not-found.tsx)
• 📊 데이터 가져오기
• 🎨 레이아웃 설정
• 🛡️ 로딩 상태 관리

🎯 마무리

이번 Chapter에서는 Next.js에서 오류를 효과적으로 처리하는 세 가지 주요 방법을 살펴보았습니다:

1. Server Actions에서 try/catch 사용: 서버 단에서의 안전한 오류 처리
2. error.tsx 파일 활용: 예상치 못한 오류에 대한 사용자 친화적 UI 제공
3. notFound() 함수와 not-found.tsx: 404 오류에 대한 구체적이고 명확한 처리

이러한 오류 처리 메커니즘을 적절히 활용하면, 사용자에게 더 안정적이고 친화적인 웹 애플리케이션 경험을 제공할 수 있습니다.

🎯 개요

이번 포스트에서는 Next.js Server Actions를 활용하여 Invoice(송장) 데이터를 업데이트하고 삭제하는 방법을 다룹니다. 동적 라우팅, 폼 데이터 처리, 그리고 데이터베이스 CRUD 작업의 전체 과정을 단계별로 살펴보겠습니다.

📋 Invoice 업데이트 프로세스

Invoice를 업데이트하는 과정은 다음 5단계로 구성됩니다:

1. 동적 경로 세그먼트 생성 - Invoice ID를 사용한 동적 라우팅
2. Invoice ID 읽기 - URL 파라미터에서 ID 추출
3. 특정 Invoice 가져오기 - 데이터베이스에서 해당 Invoice 조회
4. 양식에 데이터 미리 채우기 - 기존 데이터로 폼 초기화
5. 데이터베이스 업데이트 - 수정된 데이터 저장

🛣️ 1. 동적 경로 세그먼트 생성

동적 라우팅의 개념

Next.js에서는 폴더명을 대괄호로 감싸서 동적 경로를 생성할 수 있습니다. 이는 블로그 포스트 ID나 제품 페이지 같이 데이터에 기반한 경로가 필요할 때 유용합니다.

폴더 구조 생성

/app/dashboard/invoices/[id]/edit/page.tsx

초기 페이지 설정

// /app/dashboard/invoices/[id]/edit/page.tsx
export default function Page() {
  return <>Update Page</>;
}

UpdateInvoice 버튼 연결

// /app/ui/invoices/button.tsx
export function UpdateInvoice({ id }: { id: string }) {
  return (
    <Link
      href={`/dashboard/invoices/${id}/edit`}
      className="rounded-md border p-2 hover:bg-gray-100"
    >
      <PencilIcon className="w-5" />
    </Link>
  );
}

✨ 포인트: 템플릿 리터럴을 사용하여 동적으로 경로를 생성합니다.

🔍 2. Invoice ID 읽기

URL 파라미터 추출

Next.js는 페이지 컴포넌트에 params 객체를 제공하여 동적 경로의 값을 읽을 수 있게 해줍니다.

// /app/dashboard/invoices/[id]/edit/page.tsx
import Form from "@/app/ui/invoices/edit-form";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import { fetchCustomers } from "@/app/lib/data";

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: "Invoices", href: "/dashboard/invoices" },
          {
            label: "Edit Invoice",
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers} />
    </main>
  );
}

📊 3. 특정 Invoice 가져오기 & 4. 양식에 데이터 미리 채우기

병렬 데이터 페칭

Promise.all을 사용하여 Invoice 데이터와 고객 데이터를 동시에 가져와 성능을 최적화합니다.

// /app/dashboard/invoices/[id]/edit/page.tsx
import Form from "@/app/ui/invoices/edit-form";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import { fetchCustomers, fetchInvoiceById } from "@/app/lib/data";

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;

  // 병렬로 데이터 가져오기
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: "Invoices", href: "/dashboard/invoices" },
          {
            label: "Edit Invoice",
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers} />
    </main>
  );
}

결과 화면

💡 UUID vs 자동 증가 키

이 프로젝트에서는 자동 증가 키 대신 UUID를 사용합니다.

UUID의 장점

• ✅ ID 충돌 위험 제거
• ✅ 전역적으로 고유한 식별자
• ✅ 열거 공격(enumeration attack) 방지
• ✅ 대규모 데이터베이스에서 안전성 보장

단점

• ❌ URL이 길어짐
• ❌ 가독성 저하

참고: 짧고 깔끔한 URL을 원한다면 자동 증가 키를 사용할 수도 있습니다.

🔄 5. 데이터베이스에서 Invoice 데이터 업데이트

STEP 1: Form Action 연결 시 주의사항

❌ 잘못된 방법

// 이 방식은 동작하지 않습니다!
<form action={updateInvoice(id)}>
  {/* ... */}
</form>

문제점:

• updateInvoice(id)가 즉시 실행됨
• action 속성은 URL 경로가 필요하지만 함수 실행 결과를 받게 됨
• 폼 제출 시점이 아닌 렌더링 시점에 함수가 호출됨

✅ 올바른 방법 - bind 사용

// /app/ui/invoices/edit-form.tsx
import { updateInvoice } from "@/app/lib/actions";

export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);

  return (
    <form action={updateInvoiceWithId}>
      {/* 폼 내용 */}
    </form>
  );
}

bind 메서드의 동작 방식:

• 함수의 인수(invoice.id)를 미리 설정한 새로운 함수 생성
• 폼 제출 시에만 실행되는 함수 레퍼런스 전달
• 즉시 실행이 아닌 지연 실행 구현

STEP 2: updateInvoice 서버 액션 구현

// /app/lib/actions.ts
"use server";

import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { z } from "zod";

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(), // "100" -> 100 자동 변환
  status: z.enum(["pending", "paid"]),
  date: z.string(),
});

const UpdateInvoice = FormSchema.omit({ id: true, date: true });

export async function updateInvoice(id: string, formData: FormData) {
  // 1. 폼 데이터 추출 및 검증
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  // 2. 데이터 변환 (달러를 센트로)
  const amountInCents = amount * 100;

  // 3. 데이터베이스 업데이트
  await sql`
    UPDATE invoices
    SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
    WHERE id = ${id}
  `;

  // 4. 캐시 무효화
  revalidatePath("/dashboard/invoices");

  // 5. 리다이렉트
  redirect("/dashboard/invoices");
}

주요 작업 단계

1. 📝 데이터 추출 - formData.get() 메서드 사용
2. 🔍 데이터 검증 - Zod 스키마로 타입 검증
3. 💱 데이터 변환 - 금액을 센트 단위로 변환
4. 💾 SQL 쿼리 실행 - UPDATE 쿼리로 데이터 수정
5. 🔄 캐시 무효화 - revalidatePath로 클라이언트 캐시 갱신
6. 🔀 리다이렉트 - 업데이트 완료 후 목록 페이지로 이동

결과 화면

🗑️ Invoice 삭제 기능

삭제 버튼 구현

// /app/ui/invoices/buttons.tsx
import { deleteInvoice } from '@/app/lib/actions';

export function DeleteInvoice({ id }: { id: string }) {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);

  return (
    <form action={deleteInvoiceWithId}>
      <button type="submit" className="rounded-md border p-2 hover:bg-gray-100">
        <span className="sr-only">Delete</span>
        <TrashIcon className="w-4" />
      </button>
    </form>
  );
}

삭제 서버 액션

// /app/lib/actions.ts
export async function deleteInvoice(id: string) {
  await sql`DELETE FROM invoices WHERE id = ${id}`;
  revalidatePath("/dashboard/invoices");
}

결과 화면

🎯 핵심 포인트 정리

✨ 주요 학습 내용

1. 동적 라우팅 - 대괄호를 사용한 동적 경로 생성
2. bind 메서드 - 서버 액션에 파라미터 안전하게 전달
3. 병렬 데이터 페칭 - Promise.all로 성능 최적화
4. 데이터 검증 - Zod를 활용한 타입 안전성 확보
5. 캐시 관리 - revalidatePath로 데이터 동기화

🛡️ 보안 고려사항

• UUID 사용으로 열거 공격 방지
• Zod 스키마로 입력 데이터 검증
• SQL 인젝션 방지를 위한 템플릿 리터럴 사용

🚀 성능 최적화

• Promise.all을 통한 병렬 처리
• revalidatePath를 통한 효율적인 캐시 관리
• 서버 액션을 통한 클라이언트-서버 간 최적화된 통신

이로써 Next.js Server Actions를 사용한 Invoice 데이터의 CRUD 작업 구현이 완료되었습니다. 다음 포스트에서는 에러 처리와 사용자 경험 개선에 대해 다루어보겠습니다.

이전 장에서는 URL 검색 매개변수와 Next.js API를 사용하여 검색 및 페이지네이션 기능을 구현했었습니다. 이번에는 송장 페이지(Invoices page)에 송장 생성, 수정 및 삭제 기능을 추가하는 작업을 진행하려 합니다.

이번에 소개드릴 내용은 분량이 길기 때문에, 해당 챕터는 2개의 포스트로 분리하여 소개드리겠습니다!

1. Server Action이란?

React Server Actions는 비동기 코드를 서버에서 직접 실행할 수 있게 해주는 기능입니다. 이를 통해 데이터 변형을 위한 API 엔드포인트를 생성할 필요가 없어집니다.

API 엔드포인트: 애플리케이션 프로그래밍 인터페이스(API)에서 특정한 요청을 처리하는 URL

대신 서버에서 실행되는 비동기 함수를 작성하고, 이를 클라이언트 또는 서버 컴포넌트에서 호출할 수 있습니다.

보안 측면에서의 장점

웹 애플리케이션은 다양한 위협에 취약할 수 있기 때문에 보안이 최우선입니다. Server Actions는 강력한 보안 솔루션을 제공하여 여러 유형의 공격으로부터 데이터를 보호하고, 권한 있는 접근만 허용합니다.

Server Actions가 사용하는 보안 기술:

• POST 요청
• 암호화된 클로저
• 엄격한 입력 검사
• 오류 메시지 해싱
• 호스트 제한

이러한 기술들을 통해 앱의 안전성을 크게 향상시킬 수 있습니다.

2. fetch와 Server Action의 차이점

데이터 처리 방식

fetch 함수 사용 방식

• 목적: 주로 데이터 가져오기(Read)
• 특징: 단방향 데이터 처리
• 실행 위치: 서버 컴포넌트에서 실행되지만, 데이터 변형은 클라이언트에서 별도 API 요청으로 처리

export default async function Page() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return (
    <div>
      {/* 데이터를 렌더링 */}
    </div>
  );
}

Server Actions 방식

• 목적: 데이터 변형(Create, Update, Delete)
• 특징: 양방향 데이터 처리 가능
• 실행 위치: 서버에서 실행되며, 클라이언트나 서버 컴포넌트에서 호출

// 서버 컴포넌트 내에서 서버 액션 정의
export default function Page() {
  // 액션 함수
  async function create(formData: FormData) {
    'use server';

    // 데이터 변형 로직
  }

  // 폼을 사용하여 액션 호출
  return <form action={create}>...</form>;
}

보안 측면 비교

요약

1. fetch 함수: 주로 데이터 읽기 용도, 별도 API 필요, 추가 보안 작업 필요
2. Server Actions: 데이터 읽기/변형 모두 처리, 강화된 보안, 효율적인 통신

Server Actions는 보안과 효율성 측면에서 더 나은 솔루션을 제공하며, 데이터 변형 작업을 더 간편하게 수행할 수 있게 해줍니다.

3. Server Action과 Form 활용

React에서 <form> 요소의 action 속성을 사용하면 Server Actions를 호출할 수 있습니다. action은 캡처된 데이터를 포함하는 native FormData 객체를 자동으로 받습니다.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';

    // 데이터 변형 로직...
  }

  // action 속성을 사용하여 action 호출
  return <form action={create}>...</form>;
}

점진적 향상(Progressive Enhancement)

서버 컴포넌트 내에서 Server Action을 호출하는 가장 큰 장점 중 하나는 점진적 향상입니다.

점진적 향상이란? 웹 애플리케이션의 기능이 점진적으로 개선될 수 있음을 의미합니다. 클라이언트의 환경이나 기능에 상관없이 기본적인 동작이 보장되고, 추가적인 기능이 가능할 때 이를 활용할 수 있다는 뜻입니다.

점진적 향상의 원칙:

1. 기본 기능 보장: 최소한의 기능을 모든 사용자가 이용할 수 있도록 보장
2. 추가 기능 제공: 사용자의 브라우저나 네트워크 상태가 더 좋은 경우, 추가 기능으로 사용자 경험 개선

Server Action과 점진적 향상 예시

// 서버 컴포넌트 내에서 Server Action 정의
export default function Page() {
  // 서버 액션 함수
  async function create(formData: FormData) {
    'use server';

    // 서버에서 데이터 처리 로직
    // 예: 데이터베이스에 새 항목 추가
  }

  // form을 사용하여 서버 액션 호출
  return (
    <form action={create} method="post">
      <input type="text" name="name" required />
      <button type="submit">Submit</button>
    </form>
  );
}

1. 기본 기능 보장: JavaScript가 비활성화되어 있어도 Form이 작동합니다. 브라우저는 Form 데이터를 서버로 POST 요청을 통해 전송하고, 서버에서 데이터를 처리합니다.

2. 추가 기능 제공: JavaScript가 활성화된 환경에서는 Form 제출 후 페이지를 다시 로드하지 않고도 결과를 표시할 수 있습니다.

Next.js 캐싱과의 연동

Server Actions는 Next.js의 캐싱과도 긴밀하게 연관되어 있습니다. Server Action을 통해 Form이 제출되면 데이터를 변형하는 것뿐만 아니라 revalidatePath 및 revalidateTag 같은 API를 사용하여 관련 캐시를 재검증할 수도 있습니다.

4. Invoice 생성 구현하기

4-1. Invoice 생성 단계

Invoice를 생성하는 전체 과정은 다음과 같습니다:

1. 사용자의 입력을 수집하기 위한 양식 생성
2. 서버 작업을 생성하고 양식에서 호출
3. 서버 작업 내부에서 formData 객체로부터 데이터 추출
4. 데이터베이스에 삽입할 데이터를 검증하고 준비
5. 데이터를 삽입하고 오류 처리
6. 캐시를 다시 검증하고 사용자를 송장 페이지로 리디렉션

4-2. 새로운 라우트와 폼 생성

먼저 /invoices/create에 해당하는 route를 생성하고, 이 페이지에서 invoice를 생성하기 위한 폼을 렌더링합니다.

/app/dashboard/invoices/create/page.tsx

import Form from "@/app/ui/invoices/create-form";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import { fetchCustomers } from "@/app/lib/data";

export default async function Page() {
  const customers = await fetchCustomers();

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: "Invoices", href: "/dashboard/invoices" },
          {
            label: "Create Invoice",
            href: "/dashboard/invoices/create",
            active: true,
          },
        ]}
      />
      <Form customers={customers} />
    </main>
  );
}

주요 코드 내용:

• fetchCustomers()를 통해 고객 데이터를 가져와 <Form> 컴포넌트에 전달
• <Form> 컴포넌트는 고객 선택 드롭다운, 금액 입력 필드, 상태 선택 라디오 버튼, 제출 버튼으로 구성

4-3. 서버 액션 생성

폼이 제출될 때 호출될 서버 액션을 생성합니다. lib/actions.ts 파일을 만들고 createInvoice 함수를 정의합니다.

/app/lib/actions.ts

"use server";

export async function createInvoice(formData: FormData) {}

이후 <Form> 컴포넌트에서 createInvoice 함수를 import하고 <form> 요소에 action 속성을 추가합니다.

"use client";

import { CustomerField } from "@/app/lib/definitions";
import Link from "next/link";
import {
  CheckIcon,
  ClockIcon,
  CurrencyDollarIcon,
  UserCircleIcon,
} from "@heroicons/react/24/outline";
import { Button } from "../button";
import { createInvoice } from "@/app/lib/actions";

export default function Form({ customers }: { customers: CustomerField[] }) {
  return (
    <form action={createInvoice}> {/* 서버 액션 연결 */}
     {/* ... */}
    </form>
  );
}

참고사항

• HTML에서는 action 속성에 URL을 전달하여 폼 데이터를 제출할 대상(API 엔드포인트)을 지정합니다.
• React에서는 action 속성이 특별한 prop으로 간주되어 액션 함수를 직접 호출할 수 있습니다.
• 백그라운드에서 서버 액션은 POST API 엔드포인트를 생성하므로, 수동으로 API 엔드포인트를 만들 필요가 없습니다.

4-4. Form 데이터에서 데이터 추출

actions.ts 파일에서 formData에서 값을 추출합니다. .get(name) 메서드를 사용합니다.

/app/lib/actions.ts

"use server";

export async function createInvoice(formData: FormData) {
  const rawFormData = {
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  };
  // 출력 테스트
  console.log("rawFormData is ", rawFormData);
}

[이미지 삽입 위치: create invoice step 3 form 입력.png - 폼 입력 예시] [이미지 삽입 위치: create invoice step 3 form 입력결과.png - 콘솔 출력 결과]

4-5. 데이터 검증 및 준비

폼 데이터를 데이터베이스로 보내기 전에 사용자 입력값이 올바른 형식과 타입인지 확인해야 합니다.

현재 Form에서 받는 데이터: customerId, amount, status

Invoice Table이 기대하는 데이터 형식:

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  status: "pending" | "paid"; // string union type
};

타입 검증 및 강제 변환

type="number"인 입력 요소도 실제로는 문자열을 반환합니다:

console.log(typeof rawFormData.amount); // output: string

TypeScript 우선 검증 라이브러리인 Zod를 사용하여 validation을 진행합니다:

"use server";

import { z } from "zod";

// 전체 폼 데이터를 검증하는 스키마
const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(), // 문자열을 숫자로 자동 변환
  status: z.enum(["pending", "paid"]), // 열거형
  date: z.string(),
});

// id와 date 필드를 제거한 새 스키마
const CreateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  // 스키마로 데이터 검증 및 변환
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  console.log(typeof amount); // output: number
}

센트 단위로 값 저장

JavaScript의 부동 소수점 오류를 제거하고 더 높은 정확성을 보장하기 위해 데이터베이스에 금액을 센트 단위로 저장합니다:

const amountInCents = amount * 100;

새 날짜 생성

Invoice 생성날짜를 "YYYY-MM-DD" 형식으로 생성합니다:

const date = new Date().toISOString().split("T")[0];
console.log("date is ", date); // output: 2024-08-23 (현재날짜기준)

날짜 변환 과정:

1. new Date(): 현재 날짜와 시간을 나타내는 Date 객체 생성
2. .toISOString(): ISO8601 형식의 문자열로 변환 ("YYYY-MM-DDTHH:MM:SS.SSSZ")
3. .split("T")[0]: "T" 문자 기준으로 분리하여 날짜 부분만 추출

console.log("date is ", new Date()); // 2024-08-23T05:31:18.628Z
console.log("date is ", new Date().toISOString()); // 2024-08-23T05:31:18.630Z
console.log("date is ", new Date().toISOString().split("T")); // [ '2024-08-23', '05:31:18.630Z' ]
console.log("date is ", date); // 2024-08-23

4-6. 데이터베이스에 데이터 삽입

준비된 값으로 데이터베이스에 새로운 Invoice 데이터를 삽입하는 SQL 쿼리를 생성합니다:

"use server";

import { sql } from "@vercel/postgres";
import { z } from "zod";

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(["pending", "paid"]),
  date: z.string(),
});

const CreateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  const amountInCents = amount * 100;
  const date = new Date().toISOString().split("T")[0];

  // 데이터베이스에 새 Invoice 삽입 (오류처리 미구현)
  await sql`
    INSERT INTO invoices (customer_id, amount, status, date)
    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;
}

4-7. 캐시 재검증 및 리디렉션

캐시 재검증

Next.js는 클라이언트 사이드에서 사용자의 브라우저에 route segment를 일정 시간 동안 저장하는 라우터 캐시를 가지고 있습니다.

라우터 캐시 사용자가 웹 페이지를 이동할 때, 이전에 방문한 페이지나 데이터의 정보를 브라우저에 저장하는 기능입니다. 이를 통해 웹 애플리케이션이 더 빠르게 반응하고 부드럽게 작동할 수 있습니다.

사전 로딩(Prefetching) 사용자가 현재 보고 있는 페이지와 다른 페이지를 미리 로드해 놓는 기술입니다. 사용자가 특정 페이지로 이동하기 전에 그 페이지의 리소스를 미리 받아오는 것입니다.

라우터 캐시와 사전 로딩의 장점:

• 사용자가 route 간에 빠르게 이동 가능
• 서버에 대한 요청 수 감소
• 페이지 전환의 매끄러운 진행

Invoice 경로에서 표시되는 데이터를 업데이트했으므로, 캐시를 지우고 서버에 새로운 요청을 트리거해야 합니다. Next.js의 revalidatePath 함수를 사용합니다:

import { revalidatePath } from "next/cache";

// ... 기존 코드 ...

await sql`
  INSERT INTO invoices (customer_id, amount, status, date)
  VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
`;

revalidatePath("/dashboard/invoices"); // 캐시 재검증

사용자 리디렉션

데이터베이스 업데이트 후 사용자를 /dashboard/invoices 페이지로 리디렉션합니다. Next.js의 redirect 함수를 사용합니다:

최종 완성된 createInvoice 함수:

"use server";

import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { z } from "zod";

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(["pending", "paid"]),
  date: z.string(),
});

const CreateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  const amountInCents = amount * 100;
  const date = new Date().toISOString().split("T")[0];

  await sql`
    INSERT INTO invoices (customer_id, amount, status, date)
    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;

  revalidatePath("/dashboard/invoices"); // 캐시 재검증
  redirect("/dashboard/invoices"); // 사용자 리디렉션
}

이제 데이터베이스에 새로운 Invoice가 추가된 후, 사용자가 자동으로 /dashboard/invoices 경로로 리디렉션되어 업데이트된 목록을 확인할 수 있습니다.

이전 Chapter에서는 Partial Prerendering을 통해 Next.js에서 경로의 정적 부분을 미리 렌더링하고, 동적 부분은 사용자가 요청할 때까지 지연시키는 방법에 대해 알아보았습니다.

이번 Chapter에서는 URL 검색 매개변수를 사용하여 검색 및 페이징을 구현하는 방법에 대해 알아보겠습니다.

📋 목차

1. 시작 코드 설정
2. 검색 기능 추가
3. 디바운싱으로 성능 최적화
4. 페이징 기능 구현

1. 시작 코드 설정

본격적으로 시작하기 앞서, /app/dashboard/invoices/page.tsx 경로에 파일을 추가하고 아래 코드를 붙여넣어주세요.

주요 컴포넌트 소개

• <Search/>: 사용자가 특정 송장을 검색할 수 있도록 하는 컴포넌트
• <Pagination/>: 사용자가 송장의 페이지 간을 탐색할 수 있게 하는 컴포넌트
• <Table/>: 송장을 표시하는 컴포넌트

import Pagination from "@/app/ui/invoices/pagination";
import Search from "@/app/ui/search";
import Table from "@/app/ui/invoices/table";
import { CreateInvoice } from "@/app/ui/invoices/buttons";
import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
import { Suspense } from "react";
import { lusitana } from "../ui/font";

export default async function Page() {
  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      {/*  <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense> */}
      <div className="mt-5 flex w-full justify-center">
        {/* <Pagination totalPages={totalPages} /> */}
      </div>
    </div>
  );
}

검색 기능의 작동 원리

검색 기능은 클라이언트와 서버 두 곳에 걸쳐 작동합니다.

1. 클라이언트: 사용자가 검색하면 URL 매개변수가 업데이트
2. 서버: 업데이트된 매개변수를 통해 데이터를 불러옴
3. 렌더링: 테이블 컴포넌트가 새로운 데이터를 기반으로 서버에서 다시 렌더링

개발 단계 개요

1. 사용자의 입력을 감지
2. 검색 매개변수로 URL을 업데이트
3. 입력 필드와 URL을 동기화
4. 검색 쿼리에 따라 테이블을 업데이트

💡 왜 URL 검색 매개변수를 사용할까?

클라이언트 측 상태로 검색 상태를 관리하는 것에 익숙하다면, 이 패턴이 새로울 수 있습니다. URL 매개변수를 통해 검색 상태를 관리하는 방법은 다음과 같은 이점이 있습니다:

1. 북마크 가능 및 공유 가능한 URL

검색 매개변수가 URL에 포함되어 있기 때문에 사용자는 검색 쿼리와 필터를 포함한 현재 애플리케이션 상태를 북마크하거나 공유할 수 있습니다.

2. 서버 사이드 렌더링 및 초기 로드

URL 매개변수는 서버에서 초기 상태를 렌더링하는 데 직접 사용될 수 있어 SSR(서버 사이드 렌더링)을 처리하기가 더 쉬워집니다.

3. 분석 및 추적

검색 쿼리와 필터가 URL에 직접 포함되어 있기 때문에, 추가 클라이언트 측 로직 구현 없이 사용자 행동을 추적하기가 더 쉽습니다.

2. 검색 기능 추가

검색 기능을 구현하기 위해 사용할 Next.js 클라이언트 hook들을 알아보겠습니다.

주요 Hook 소개

• useSearchParams: 현재 URL의 매개변수에 접근
  • 예: URL /dashboard/invoices?page=1&query=pending의 검색 매개변수는 {page: '1', query: 'pending'}
• usePathname: 현재 URL의 경로명을 읽기
  • 예: 경로 /dashboard/invoices의 경우 '/dashboard/invoices'를 반환
• useRouter: 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로 간 이동 가능

2-1. 사용자 입력 감지

먼저 <Search> 컴포넌트의 내용을 확인해보겠습니다.

참고: "use client" 지시어는 클라이언트 컴포넌트(RSC)에서 사용되며, 이벤트 리스너 및 hook을 사용하기 위해 필요합니다.

"use client";

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";

export default function Search({ placeholder }: { placeholder: string }) {

  function handleSearch(term: string) {
    console.log(term);
  }

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

위 코드에서는 <input> 태그에서 사용자 입력이 발생할 때마다 handleSearch() 메소드를 호출합니다.

2-2. 검색 매개변수로 URL 업데이트

이제 useSearchParams hook을 import하여 URL을 업데이트해보겠습니다.

"use client";

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useSearchParams, usePathname, useRouter } from "next/navigation";

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);

    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }

    replace(`${pathname}?${params.toString()}`);
  }

  return (
    // ... 이전과 동일한 JSX
  );
}

• 매개변수가 없을 때

• 매개변수가 있을 때 (URLSearchParams의 size가 늘어남)

주요 개념 설명

• URLSearchParams: URL 쿼리 매개변수를 조작하기 위한 유틸리티 메서드를 제공하는 Web API
• pathname: 현재 URL 경로명 (예: "/dashboard/invoices")
• replace(): 사용자의 검색 데이터를 포함하여 URL을 업데이트
  • 예: 사용자가 "Lee"를 검색하면 /dashboard/invoices?query=lee가 됨

🚀 클라이언트 측 탐색의 장점

Next.js의 클라이언트 측 탐색 기능으로 페이지를 새로고침하지 않고도 URL을 업데이트할 수 있습니다. 이는 SPA(Single Page Application) 방식으로 동작하며, 더 빠르고 부드러운 사용자 경험을 제공합니다.

2-3. URL과 입력 상태 동기화

입력 필드가 URL과 동기화되고 공유할 때 입력 필드가 자동으로 채워지도록 하기 위해 searchParams에서 값을 읽어와 defaultValue로 전달합니다.

<input
  className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
  placeholder={placeholder}
  onChange={(e) => {
    handleSearch(e.target.value);
  }}
  defaultValue={searchParams.get("query")?.toString()}
/>

💡 defaultValue vs. value

• defaultValue: 입력값을 state로 관리하지 않는 경우, 네이티브 입력이 자체적으로 값을 관리
• value: 입력값을 state로 관리하는 경우, React가 input 태그의 입력 상태를 관리 (제어 컴포넌트)

2-4. 테이블 업데이트

마지막으로 검색 쿼리를 반영하여 테이블 컴포넌트를 업데이트해야 합니다.

기본 페이지 컴포넌트는 searchParams라는 props를 받아올 수 있습니다. Next.js는 URL의 search params를 props로 자동으로 전달해주며, 이를 전달받는 컴포넌트는 디렉터리 경로별 기본 페이지 컴포넌트입니다.

import Pagination from "@/app/ui/invoices/pagination";
import Search from "@/app/ui/search";
import Table from "@/app/ui/invoices/table";
import { CreateInvoice } from "@/app/ui/invoices/buttons";
import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
import { Suspense } from "react";
import { lusitana } from "../../ui/font";

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {
  const query = searchParams?.query || "";
  const currentPage = Number(searchParams?.page) || 1;

  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      <div className="mt-5 flex w-full justify-center">
        {/* <Pagination totalPages={totalPages} /> */}
      </div>
    </div>
  );
}

Table 컴포넌트에서 데이터 처리

<Table> 컴포넌트에서는 query와 currentPage의 props를 받아 fetchFilteredInvoices() 함수를 호출하여 해당 쿼리에 맞는 invoices 데이터를 반환받습니다.

// /app/ui/invoices/table.tsx
export default async function InvoicesTable({
  query,
  currentPage,
}: {
  query: string;
  currentPage: number;
}) {
  const invoices = await fetchFilteredInvoices(query, currentPage);
  // ...
}

📌 useSearchParams hook vs searchParams props 사용 시기

검색 파라미터를 추출하는 방법으로 2가지 방법을 사용했습니다. 어떤 방법을 사용할지는 클라이언트/서버 중 어디에서 작업을 수행하는지에 따라 다릅니다.

• 클라이언트 컴포넌트: useSearchParams hook 사용
• 서버 컴포넌트: searchParams props 사용

3. 디바운싱으로 성능 최적화

현재 코드에서는 사용자가 값을 입력할 때마다 handleSearch() 메소드가 실행되어 URL이 업데이트됩니다. 이는 매 입력마다 데이터베이스 쿼리를 날리게 되어 성능상 문제가 될 수 있습니다.

디바운싱이란?

디바운싱(Debouncing)은 함수가 실행되는 빈도를 제한하는 프로그래밍 방법입니다. 사용자가 입력을 멈췄을 때만 데이터베이스에 쿼리를 날리는 것이 목표입니다.

디바운싱 미사용: 입력할 때마다 입력값 감지하여 검색 API 호출

디바운싱 사용: 입력 멈출 때 입력값 완전감지하여 검색 API 호출

🔄 디바운싱 vs 쓰로틀링

• 쓰로틀링: 마지막 함수가 호출되고 일정시간이 지나기 전에는 다시 호출되지 않도록 하는 방법
• 디바운싱: 연이어 호출되는 함수 중, 마지막이나 처음 함수만 호출되도록 하는 방법

디바운싱 구현

use-debounce 라이브러리를 사용하여 디바운싱을 구현해보겠습니다.

pnpm i use-debounce

"use client";

import { useDebouncedCallback } from "use-debounce";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useSearchParams, usePathname, useRouter } from "next/navigation";

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const handleSearch = useDebouncedCallback((term: string) => {
    const params = new URLSearchParams(searchParams);

    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
        defaultValue={searchParams.get("query")?.toString()}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

이제 사용자가 입력을 멈춘 후 300ms 동안 재입력이 발생하지 않아야 콜백함수가 실행됩니다.

4. 페이징 기능 구현

4-1. 페이징 구현 전 알아둘 점

검색 기능을 도입한 후, 테이블에는 한 번에 6개의 송장만 표시됩니다. 이는 fetchFilteredInvoices() 함수가 페이지당 최대 6개의 송장을 반환하기 때문입니다.

페이징 기능을 추가하면 사용자가 모든 송장to 보기 위해 다른 페이지로 이동할 수 있게 됩니다.

🔒 보안 고려사항

<Pagination/> 컴포넌트는 클라이언트 컴포넌트입니다. 클라이언트에서 데이터를 가져오게 되면 데이터베이스 비밀이 노출될 수 있으므로, 서버에서 데이터를 가져와 컴포넌트에 props로 전달하는 것이 좋습니다.

4-2. 페이징 코드 구현

먼저 페이지 컴포넌트를 수정하여 전체 페이지 수를 계산하고 Pagination 컴포넌트에 전달합니다.

// /app/dashboard/invoices/page.tsx
import Pagination from "@/app/ui/invoices/pagination";
import Search from "@/app/ui/search";
import Table from "@/app/ui/invoices/table";
import { CreateInvoice } from "@/app/ui/invoices/buttons";
import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
import { Suspense } from "react";
import { lusitana } from "../../ui/font";
import { fetchInvoicesPages } from "@/app/lib/data";

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {
  const query = searchParams?.query || "";
  const currentPage = Number(searchParams?.page) || 1;
  const totalPages = await fetchInvoicesPages(query);

  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      <div className="mt-5 flex w-full justify-center">
        <Pagination totalPages={totalPages} />
      </div>
    </div>
  );
}

Pagination 컴포넌트 구현

// /app/ui/invoices/pagination.tsx
'use client';

import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import Link from 'next/link';
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';

export default function Pagination({ totalPages }: { totalPages: number }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get('page')) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  // ... 나머지 컴포넌트 로직
}

검색 시 페이지 리셋

사용자가 새 검색 쿼리를 입력할 때 페이지 번호를 1로 리셋해야 합니다.

// /app/ui/search.tsx
'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const { replace } = useRouter();
  const pathname = usePathname();

  const handleSearch = useDebouncedCallback((term) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', '1'); // 검색 시 페이지를 1로 리셋

    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  // ... 나머지 컴포넌트
}

🎯 마무리

이번 챕터에서는 Next.js에서 URL 검색 매개변수를 활용하여 다음 기능들을 구현했습니다:

• ✅ 검색 기능: URL 매개변수를 통한 실시간 검색
• ✅ 디바운싱: 성능 최적화를 위한 검색 지연
• ✅ 페이징: 대량 데이터의 효율적인 표시
• ✅ URL 동기화: 북마크 가능하고 공유 가능한 상태 관리

이러한 패턴들은 사용자 경험을 향상시키고, SEO에 유리하며, 서버 사이드 렌더링을 효과적으로 활용할 수 있게 해줍니다.

📚 참고자료

• Next.js 공식 문서 - useSearchParams
• use-debounce 라이브러리
• URLSearchParams - MDN

지금까지 빌드 및 revalidation 시간에 데이터 fetch 및 렌더링을 진행하는 정적 렌더링과 사용자 요청 등이 발생할 때 렌더링을 진행하는 동적 렌더링에 대해 알아보았습니다.

이번 포스팅에서는 PPR(Partial Prerendering)을 사용하여 정적 렌더링, 동적 렌더링, 스트리밍을 동일한 경로로 결합하는 방법을 알아보겠습니다.

1. Static vs. Dynamic Routes

오늘날 대부분의 웹 애플리케이션에서는 전체 애플리케이션 또는 특정 경로(route)에 한해 정적 렌더링과 동적 렌더링 중 하나를 선택합니다.

• Next.js에서는 특정 경로(route)에서 동적 함수를 호출하면 (noStore(), cookies() 등) 해당 경로 전체가 동적으로 변화합니다.

하지만 보통 대부분의 경로는 완전히 정적이거나 동적이지 않습니다.

예를 들어, 전자상거래 사이트를 생각해보겠습니다. 제품 정보 페이지의 대부분을 정적으로 렌더링하고 싶을 수 있지만, 사용자의 장바구니와 추천 제품 등은 동적으로 가져와야 합니다.

대시보드 페이지 예시

지금까지 만들어 본 대시보드 페이지를 생각해보면:

• 페이지 사이드에 위치한 <SideNav/>는 fetch해오는 데이터에 의존하지 않기 때문에 정적으로 개발할 수 있습니다.
• 그러나 실질적으로 fetch해오는 데이터를 기반으로 화면을 구성하는 <Page/> 내의 컴포넌트들은 동적으로 개발해야 합니다.

<SideNav/> 컴포넌트 (정적)

import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline';

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <Link
        className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
        href="/"
      >
        <div className="w-32 text-white md:w-40">
          <AcmeLogo />
        </div>
      </Link>
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form>
          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}

cards.tsx 컴포넌트 (동적)

import {
  BanknotesIcon,
  ClockIcon,
  UserGroupIcon,
  InboxIcon,
} from "@heroicons/react/24/outline";
import { lusitana } from "../font";
import { fetchCardData } from "@/app/lib/data";

const iconMap = {
  collected: BanknotesIcon,
  customers: UserGroupIcon,
  pending: ClockIcon,
  invoices: InboxIcon,
};

export default async function CardWrapper() {
  // 동적 데이터 fetch
  const {
    numberOfCustomers,
    numberOfInvoices,
    totalPaidInvoices,
    totalPendingInvoices,
  } = await fetchCardData();

  return (
    <>
      <Card title="Collected" value={totalPaidInvoices} type="collected" />
      <Card title="Pending" value={totalPendingInvoices} type="pending" />
      <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
      <Card
        title="Total Customers"
        value={numberOfCustomers}
        type="customers"
      />
    </>
  );
}

export function Card({
  title,
  value,
  type,
}: {
  title: string;
  value: number | string;
  type: "invoices" | "customers" | "pending" | "collected";
}) {
  const Icon = iconMap[type];

  return (
    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
      <div className="flex p-4">
        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
        <h3 className="ml-2 text-sm font-medium">{title}</h3>
      </div>
      <p
        className={`${lusitana.className}
          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
      >
        {value}
      </p>
    </div>
  );
}

2. What is Partial Prerendering?

공식 문서에서는 동일한 경로에서 정적 렌더링과 동적 렌더링의 장점을 결합할 수 있는 새로운 렌더링 모델로써 Partial Prerendering을 소개하고 있습니다.

이 모델은 빠른 초기 로드를 보장하면서도 개인화되고 자주 업데이트되는 콘텐츠를 제공하여 성능과 사용자 만족도를 모두 향상시킬 수 있습니다.

PPR의 주요 효과

사용자가 경로를 방문할 때 다음과 같은 효과를 제공합니다:

• 빠른 초기 로드: 사전 렌더링된 정적 셸을 제공함으로써 사용자는 빠른 초기 로드 시간을 경험할 수 있습니다.
• 향상된 사용자 경험: 동적 콘텐츠가 비동기적으로 병렬 로드되기 때문에 사용자는 대기 시간 없이 정적 부분과 상호작용할 수 있으며, 동적 데이터는 준비되자마자 표시됩니다.
• SEO 최적화: 페이지의 주요 부분이 사전 렌더링되므로 검색 엔진이 정적 콘텐츠를 효과적으로 인덱싱(indexing)할 수 있어 SEO가 향상됩니다.

인덱싱이란?

인덱싱이란 데이터베이스 또는 검색 엔진에서 데이터 검색 속도를 높이기 위해 사용하는 기술을 의미합니다. 데이터베이스나 검색 엔진에서 인덱스는 특정 키를 기준으로 데이터의 위치를 저장한 구조체로, 대량의 데이터를 효율적으로 조회할 수 있도록 돕습니다.

3. How does Partial Prerendering work?

Partial Prerendering(부분 사전 렌더링)은 React의 Suspense를 활용하여 애플리케이션 일부를 렌더링하는 시점을 데이터 로딩과 같은 조건이 충족될 때까지 지연시키는 방식입니다.

동작 원리

1. Suspense의 fallback은 초기 HTML 파일에 정적 콘텐츠와 함께 삽입됩니다.
2. 빌드 시간에 (또는 재검증 중에) 정적 콘텐츠는 Prerendering되고 CDN이나 Edge Network에 캐시됩니다.
3. 동적 콘텐츠의 렌더링은 사용자가 경로를 요청할 때까지 지연됩니다.

중요한 개념: Suspense는 경계선 역할

Suspense로 컴포넌트를 감싸는 것은 컴포넌트 자체를 동적으로 만드는 것이 아닙니다. 오히려 Suspense는 정적과 동적 코드 사이의 경계로 사용됩니다.

정적과 동적 코드의 차이점

• 정적 코드: 렌더링할 때 변하지 않는 부분 (컴포넌트의 구조나 UI 레이아웃)
• 동적 코드: 런타임(run-time) 중에 데이터에 따라 변하는 부분 (데이터 fetch)

Suspense의 역할

• Suspense는 React에서 동적으로 데이터를 불러오거나 다른 비동기 작업을 수행할 때 사용됩니다.
• Suspense는 이러한 작업이 완료될 때까지 대기하고, 그 사이에 사용자에게 로딩 상태를 보여주는 역할을 합니다. (이를 fallback이라고 합니다)
• 따라서 Suspense는 애플리케이션에서 정적인 부분과 동적인 부분 사이를 나누는 역할을 하며, 정적인 부분은 바로 렌더링되고, 동적인 부분은 필요할 때까지 지연됩니다.

4. Partial Prerendering(PPR) 구현

대시보드 경로에 부분적 프리렌더링(PPR)을 구현하는 방법을 살펴보겠습니다.

Step 1: PPR 활성화

먼저 next.config.js에 다음 코드를 추가하여 PPR을 활성화합니다.

/** @type {import('next').NextConfig} */

const nextConfig = {
  experimental: {
    ppr: "incremental",
  },
};

module.exports = nextConfig;

ppr: "incremental" 옵션을 사용하면 특정 경로에 대해 PPR을 선택적으로 적용할 수 있습니다.

Step 2: 레이아웃에서 PPR 설정

대시보드 레이아웃에서 experimental_ppr segment 구성 옵션을 추가합니다.

import SideNav from "@/app/ui/dashboard/sidenav";

export const experimental_ppr = true; // PPR 활성화

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

설정 완료

• 개발 중에는 애플리케이션에서 큰 차이를 느끼지 못할 수 있지만, 배포 환경(production)에서 성능 향상을 눈에 띄게 느낄 것입니다.
• 이렇게 하면 Next.js는 경로의 정적 부분을 미리 렌더링하고, 동적 부분은 사용자가 요청할 때까지 지연시킵니다.

PPR의 큰 장점

Partial Prerendering의 큰 장점 중 하나는 코드를 변경하지 않고도 사용할 수 있다는 것입니다.

특정 경로의 동적 부분을 Suspense로 감싸주기만 하면, Next.js가 어떤 부분이 정적이고 어떤 부분이 동적인지를 확실히 알 수 있도록 할 수 있습니다.

마무리

PPR(Partial Prerendering)은 Next.js에서 제공하는 혁신적인 렌더링 모델로, 정적 렌더링과 동적 렌더링의 장점을 모두 활용할 수 있게 해줍니다.

간단한 설정만으로 성능과 사용자 경험을 크게 향상시킬 수 있으니, 여러분의 Next.js 프로젝트에도 한번 적용해보시기 바랍니다!

• 자료구조로서의 배열은 데이터를 일정한 순서와 구조를 갖춘 집합으로 저장하는 방법을 의미한다.
  • 배열은 프로그래밍에서 기본적인 자료구조 중 하나로, 메모리 내에서 연속적인 공간에 요소를 저장한다.
  • 배열의 핵심적인 특성과 개념은 다음과 같다.

(1) 연속 메모리 배치

정적 배열

• 대부분의 배열은 메모리에서 연속적으로 저장된다.
• 이는 배열의 인덱스에 직접 접근할 수 있게 해 주며, 상수 시간 O(1) 복잡도로 요소에 접근할 수 있게 한다.

동적 배열

• 동적 배열은 필요에 따라 크기를 조절할 수 있으며, 초기에는 연속 메모리 공간을 사용하다가 크기가 커지면 재배치할 수 있다.
• 이 과정은 추가적인 연산이 필요하지만, 배열의 기본 속성은 유지된다.

&nbsp

(2) 인덱스 기반 접근

• 배열의 요소는 인덱스를 사용하여 접근한다.
  • 인덱스는 일반적으로 0부터 시작하여 배열의 각 요소에 위치를 제공한다.
  • 예를 들어, 배열의 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1이다.

&nbsp

(3) 고정 크기와 가변 크기

고정 크기 배열:

• 배열의 크기가 고정되어 있으며, 배열이 생성될 때 크기가 결정된다.
• 배열의 크기를 변경하려면 새로운 배열을 생성하고 기존의 요소를 복사해야 한다.

가변 크기 배열

• 배열의 크기를 동적으로 조절할 수 있으며, 필요에 따라 배열의 크기를 증가시키거나 줄일 수 있다.
• 많은 고급 프로그래밍 언어에서 가변 크기 배열(예: ArrayList in Java, vector in C++)을 제공한다.

&nbsp

(4) 동일한 타입의 요소

정적 타입 언어

• 배열의 요소는 동일한 데이터 타입이어야 한다.
• 예를 들어, C나 Java에서는 배열의 모든 요소가 같은 타입을 가져야 한다.

동적 타입 언어

• 배열의 요소는 다양한 타입일 수 있다.
• 예를 들어, JavaScript에서는 숫자, 문자열, 객체 등 다양한 타입의 요소를 포함할 수 있다.

&nbsp

(5) 자료구조로서의 배열의 주요 속성

인덱스 접근

• 배열의 요소는 인덱스를 통해 빠르게 접근할 수 있다.

순서

• 배열은 요소의 순서를 유지하며, 각 요소의 위치가 인덱스로 표현된다.

고정 및 가변 크기

• 배열의 크기가 고정된 경우와 가변된 경우가 있으며, 데이터의 추가 및 삭제에 따라 배열의 크기를 조정할 수 있는 방식이 다르다.

&nbsp

(6) 응용 및 활용

정렬 및 검색

• 배열은 데이터를 정렬하고 검색하는 알고리즘에서 기본적으로 사용된다.
• 예를 들어, quick sort(퀵 정렬)나 merge sort(병합 정렬) 알고리즘은 배열을 정렬하는 데 사용됩니다.

스택과 큐

• 배열을 사용하여 stack(스택)과 queue(큐)와 같은 다른 자료구조를 구현할 수 있다.

다차원 배열

• 2차원 배열 또는 3차원 배열과 같은 다차원 배열을 사용하여 매트릭스와 같은 복잡한 데이터를 표현할 수 있다.

&nbsp

1. 밀집 배열

const denseArray = [1, 2, 3, 4, 5];

• 밀집 배열(dense array) 은 배열의 모든 인덱스가 사용되며, 인덱스가 연속적이고 배열의 크기와 같은 방식으로 데이터를 저장하는 배열이다.
  • 즉, 배열의 모든 요소가 초기화되어 있고, 인덱스가 차례로 순서대로 존재한다는 특징이 있다.

• 위 예시 코드의 배열은 인덱스 0부터 4까지 모두 값이 할당되어 있으며, 배열의 길이와 같은 방식으로 연속된 인덱스를 가지고 있다.
  • 이 배열은 모든 요소가 정의되어 있으므로 밀집 배열이라 부른다.

// 밀집 배열에 서로 다른 데이터 타입의 요소가 포함된 경우
const mixedArray = [1, "hello", { key: "value" }, [1, 2, 3], function() { return "function"; }];

• 여기서 헷갈리지 말아야 할 것이 있는데, 바로 밀집 배열이라고, 모든 배열 요소들이 꼭 동일한 타입을 가져야 하는 것은 아니라는 것이다.
  • 밀집 배열(dense array)에서는 요소의 타입이 동일할 필요는 없다. 배열의 모든 인덱스가 정의되어 있고 연속적으로 값을 가지는 것은 밀집 배열의 특징이지만, 배열의 요소 타입에 대한 제약은 없다.
    • 동일한 타입의 요소: 배열의 모든 요소가 동일한 데이터 타입을 가지는 경우가 많지만, JavaScript와 같은 동적 타입 언어에서는 배열의 요소가 다양한 데이터 타입을 가질 수 있다.
    • 다양한 타입의 요소: JavaScript 배열은 다양한 데이터 타입을 혼합하여 저장할 수 있다. 예를 들어, 숫자, 문자열, 객체, 함수 등 다양한 타입의 요소를 같은 배열에 넣을 수 있다.

• 위 예제 코드의 배열 mixedArray는 숫자, 문자열, 객체, 배열, 함수 등 다양한 타입의 요소를 포함하고 있다.
  • 모든 요소가 정의되어 있으며, 배열의 인덱스가 연속적이기 때문에 밀집 배열로 간주된다.

&nbsp

3. 희소 배열

const sparseArray = []; 
sparseArray[2] = 'a'; 
sparseArray[5] = 'b';

• 하지만 자바스크립트의 배열은, 배열의 요소를 넣기 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되며, 또한 연속적으로 이어져 있지 않을 수도 있다.

• 희소 배열(sparse array)은 배열의 인덱스 중 일부만이 정의되어 있고, 나머지 인덱스는 정의되어 있지 않거나 비어 있는 배열을 의미한다.
  • 즉, 배열의 대부분의 인덱스가 값을 가지지 않으며, 배열의 크기보다 적은 수의 요소만 저장될 수 있다는 뜻이다.

• 위 예시코드의 배열에서는 인덱스 2와 5에만 값이 있으며, 나머지 인덱스는 정의되지 않았다.
  • 배열의 길이는 6이지만, 실제로는 2와 5에만 값이 있다.

&nbsp

4. 밀집 배열과 희소 배열의 차이

※ 메모리 사용

• 밀집 배열은 모든 인덱스가 채워져 있기 때문에 메모리를 연속적으로 사용한다.
• 희소 배열은 메모리를 비효율적으로 사용할 수 있으며, 배열의 많은 부분이 비어있거나 정의되지 않는다.
  • 희소 배열에서는 데이터가 저장된 인덱스만 메모리에 할당된다.

※ 성능

• 밀집 배열은 인덱스가 연속적이므로 배열의 요소에 접근하는 속도가 빠르다.
• 희소 배열은 비어있는 인덱스가 많기 때문에 특정 인덱스에 접근하는 데 시간이 더 걸릴 수 있다.

※ 장점과 단점

• 밀집 배열은 배열의 모든 인덱스에 값이 있어 접근이 간단하지만, 불필요하게 큰 배열을 만들 수 있다.
• 희소 배열은 메모리를 절약할 수 있지만, 배열의 요소에 접근할 때 추가적인 계산이 필요할 수 있다.

&nbsp

5. 자바스크립트에서 희소 배열의 동작

• JavaScript에서, 희소 배열은 배열의 특정 인덱스만 정의된 경우 발생한다.
  • 배열의 크기(length 속성)는 정의된 최대 인덱스보다 클 수 있으며, 정의되지 않은 인덱스는 undefined로 간주된다.
  • 희소 배열에서 정의된 인덱스만 실제로 값이 저장된다.

const sparseArray = [];
sparseArray[100] = 'a';

console.log(sparseArray.length); // 101
console.log(sparseArray[0]); // undefined
console.log(sparseArray[100]); // 'a'

• 여기서 sparseArray의 길이는 101로 설정되어 있지만, 실제로는 인덱스 100에만 값이 있으며 나머지는 정의되지 않은 상태이다.

&nbsp

6. 요약

• 밀집 배열: 모든 인덱스가 사용되고, 연속적인 값을 가지는 배열.
• 희소 배열: 일부 인덱스만 사용되며, 많은 인덱스가 정의되지 않은 배열.

• 코드 스플리팅(Code Splitting)은 웹 애플리케이션에서 코드를 작은 청크(chunk)로 분리하여 애플리케이션의 초기 로딩 속도를 개선하는 기술이다.
• 이 기술은 번들 파일을 여러 개로 나누고, 사용자가 필요로 하는 부분만 로드함으로써 네트워크 비용과 사용자 대기 시간을 줄이는 데 효과적이다.

2. 코드 스플리팅의 필요성

• SPA(Single Page Application)와 같은 현대 웹 애플리케이션은 모든 코드를 하나의 번들로 묶으면 초기 로딩 시간이 길어지게 되는 문제가 발생할 수 있다.
  • 아래는 모든 코드를 하나의 번들로 묶었을 때 발생할 수 있는 문제와 해결방안이다.

• 문제점
  • 모든 코드가 한 번에 로드되면 대규모 애플리케이션의 경우 초기 로딩이 느려짐
  • 사용자가 필요하지 않은 기능이나 페이지의 코드도 미리 로드됨

• 해결책
  • 코드 스플리팅을 통해 필요한 시점에 필요한 코드만 로드하여 최소한의 리소스로 동작할 수 있도록 한다.

3. 코드 스플리팅의 장점

• 초기 로딩 속도 개선
  • 앱에서 반드시 필요한 코드만 먼저 로드하고, 나머지는 나중에 로드

• 사용자 경험 향상
  • 사용자가 더 빠르게 페이지와 상호작용할 수 있도록 지원

• 효율적인 네트워크 사용
  • 페이지별로 코드를 분리해 불필요한 리소스를 로드하지 않음

• 확장성
  • 기능별 모듈화로 코드 관리 및 유지보수가 쉬워짐

4. 코드 스플리팅 구현방법

4-1. Webpack 기반 코드 스플리팅

1. Dynamic Import를 사용한 코드 스플리팅

   • Webpack의 import() 구문을 활용해 동적으로 모듈을 로드한다.

     function loadComponent() {
     import('./MyComponent').then((module) => {
     const MyComponent = module.default;
     // 모듈 사용
     });
     }

2. Webpack 설정으로 자동 코드 스플리팅

   • Webpack 설정에서 splitChunks 옵션을 사용하면 청크 파일을 자동으로 생성할 수 있다.

     module.exports = {
     optimization: {
     splitChunks: {
     chunks: 'all', // 모든 청크에 대해 스플리팅 수행
     },
     },
     };

4-2. React에서의 코드 스플리팅

1. React.lazy와 Suspense 사용
   • React는 React.lazy와 Suspense를 통해 컴포넌트를 동적 로드하고, 로드 중 상태를 표시할 수 있다.

     import React, { Suspense } from 'react';
     

// React.lazy : 동적으로 컴포넌트 로드 const MyComponent = React.lazy(() => import('./MyComponent'));

function App() { return ( {/* Suspense : 로딩 중일 때 fallback 속성으로 전달한 element를 표시한다. */} <Suspense fallback={

2. React Router와의 코드 스플리팅
    - React Router와 결합하여 페이지 단위로 코드를 스플리팅할 수 있다.
```jsx
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

import dynamic from 'next/dynamic';

// 동적 로드 설정
const DynamicComponent = dynamic(() => import('./MyComponent'), {
  loading: () => <p>Loading...</p>, // 로딩 중 표시할 컴포넌트
});

function App() {
  return <DynamicComponent />;
}

"use client";

import dynamic from "next/dynamic";
import styles from "./DashboardClient.module.scss";
import { User } from "next-auth";
import Loading from "@/components/common/Loading/Loading";

interface IProps {
  user: User;
}
const MonthlyEmissionsChart = dynamic(() => import("./MonthlyEmissionsChart"), {
  ssr: false,
  loading: () => (
    <>
      <Loading text="탄소배출량 현황 정보를 불러오고 있습니다." open={true} />
      <div className={styles.w100_box}>
        <div className={styles.w100}>
          <div className={styles.tit}>
            <p>
              탄소배출량 현황 <span>&#40;단위 : CO2eq&#41;</span>
            </p>
          </div>
          <div className={styles.chart_box}>
            차트 데이터를 불러오고 있습니다...
          </div>
        </div>
      </div>
    </>
  ),
});
const ScopeEmissionsChart = dynamic(() => import("./ScopeEmissionsChart"), {
  ssr: false,
  loading: () => (
    <>
      <Loading
        text="Scope별 탄소배출량 현황 정보를 불러오고 있습니다."
        open={true}
      />
      <div className={styles.w30}>
        <div className={styles.tit}>
          <p>
            Scope별 탄소배출량 현황 <span>&#40;단위 : CO2eq&#41;</span>
          </p>
        </div>
        <div className={styles.chart_box}>
          차트 데이터를 불러오고 있습니다...
        </div>
      </div>
    </>
  ),
});
const ProcessEmissionsChart = dynamic(() => import("./ProcessEmissionsChart"), {
  ssr: false,
  loading: () => (
    <>
      <Loading
        text="공정별 탄소배출량 현황 정보를 불러오고 있습니다."
        open={true}
      />
      <div className={styles.w30}>
        <div className={styles.tit}>
          <p>
            공정별 탄소배출량 현황 <span>&#40;단위 : CO2eq&#41;</span>
          </p>
        </div>
        <div className={styles.chart_box}>
          차트 데이터를 불러오고 있습니다...
        </div>
      </div>
    </>
  ),
});
const SourceEmissionsChart = dynamic(() => import("./SourceEmissionsChart"), {
  ssr: false,
  loading: () => (
    <>
      <Loading
        text="배출원별 탄소배출량 현황 정보를 불러오고 있습니다."
        open={true}
      />
      <div className={styles.w30}>
        <div className={styles.tit}>
          <p>
            배출원별 탄소배출량 현황 <span>&#40;단위 : CO2eq&#41;</span>
          </p>
        </div>
        <div className={styles.chart_box}>
          차트 데이터를 불러오고 있습니다...
        </div>
      </div>
    </>
  ),
});
export default function DashboardClient({ user }: IProps) {
  return (
    <div className={styles.wrap}>
      {/* 탄소배출량 현황 */}
      <MonthlyEmissionsChart user={user} />

      <div className={styles.w100_box}>
        {/* Scope별 탄소배출량 현황 */}
        <ScopeEmissionsChart user={user} />

        {/* 공정별 탄소배출량 현황 */}
        <ProcessEmissionsChart user={user} />

        {/* 배출원별 탄소배출량 현황 */}
        <SourceEmissionsChart user={user} />
      </div>
    </div>
  );
}

JavaScript에서 코드가 실행되는 환경을 정의하는 핵심 개념입니다.

🔍 실행 컨텍스트의 정의

실행 컨텍스트(Execution Context)는 자바스크립트가 코드를 실행할 때 필요한 모든 정보를 담고 있는 박스라고 생각하면 됩니다.

• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 구성된 객체
• 코드가 실행될 때 필요한 변수, 객체, 함수 등을 정의
• 콜 스택에 쌓아올려지며, 가장 위에 있는 컨텍스트의 코드가 실행됨

💡 왜 중요한가?

실행 컨텍스트를 이해하면 다음을 알 수 있습니다:

• 스코프(Scope): 변수의 유효 범위
• 호이스팅(Hoisting): 변수와 함수 선언의 끌어올림
• 클로저(Closure): 함수와 렉시컬 환경의 조합
• this 바인딩: this 키워드의 동작 원리

💡 자바스크립트의 동적 언어 특성
실행 컨텍스트는 자바스크립트의 동적 언어로서의 성격을 가장 잘 보여주는 개념입니다!

2. 실행 컨텍스트의 생성과 실행 🔄

📋 실행 컨텍스트의 단계

1️⃣ 생성 단계 (Creation Phase)
   - 변수 환경 생성 (호이스팅 발생)
   - 렉시컬 환경 생성
   - this 바인딩 결정

2️⃣ 실행 단계 (Execution Phase)
   - 코드 실행
   - 변수 할당
   - 함수 호출

🎯 생성 단계 상세

1️⃣ 변수 환경 생성

// 코드 작성
console.log(name); // undefined (호이스팅!)
var name = "Alice";
console.log(name); // "Alice"

생성 단계에서 일어나는 일:

• var 변수는 undefined로 초기화
• 함수 선언문은 전체가 메모리에 저장

2️⃣ 렉시컬 환경 생성

function outer() {
    let x = 10; // 렉시컬 환경에 저장
    function inner() {
        console.log(x); // 외부 환경 참조로 접근
    }
    inner();
}
outer(); // 10

렉시컬 환경의 구성:

• 환경 레코드: 변수와 함수 저장
• 외부 환경 참조: 상위 스코프 연결

3️⃣ this 바인딩

const obj = {
    name: "JavaScript",
    greet() {
        console.log(this.name);
    }
};
obj.greet(); // "JavaScript"

3. 실행 컨텍스트의 종류 📦

🌐 전역 실행 컨텍스트

프로그램이 시작될 때 생성되는 기본 컨텍스트입니다.

var globalVar = "전역 변수";

function globalFunction() {
    console.log("전역 함수! 🌍");
}

// 전역 컨텍스트에서 실행
globalFunction(); // "전역 함수! 🌍"

특징:

• 프로그램 실행 시 가장 먼저 생성
• 단 하나만 존재
• 브라우저에서는 window, Node.js에서는 global 객체와 연결
• 프로그램 종료까지 유지

// 브라우저 환경
var a = 5;
console.log(window.a); // 5
window.globalFunction(); // "전역 함수! 🌍"

🔧 함수 실행 컨텍스트

함수가 호출될 때마다 생성됩니다.

function first() {
    console.log("First! 1️⃣");
    second();
}

function second() {
    console.log("Second! 2️⃣");
    third();
}

function third() {
    console.log("Third! 3️⃣");
}

first();
/* 출력:
First! 1️⃣
Second! 2️⃣
Third! 3️⃣
*/

특징:

• 함수 호출 시마다 생성
• 함수마다 고유한 컨텍스트 보유
• 실행 종료 후 콜 스택에서 제거

4. 실행 컨텍스트의 구성 요소 🧩

📊 구성 요소 개요

실행 컨텍스트
├── Lexical Environment (렉시컬 환경)
│   ├── Environment Record (환경 레코드)
│   └── Outer Environment Reference (외부 환경 참조)
│
├── Variable Environment (변수 환경)
│   └── Environment Record (환경 레코드)
│
└── This Binding (this 바인딩)

1️⃣ Lexical Environment (렉시컬 환경)

정의: 코드의 스코프와 관련된 정보를 관리하는 구조

function outer() {
    let x = 10; // outer의 환경 레코드

    function inner() {
        let y = 20; // inner의 환경 레코드
        console.log(x + y); // 외부 환경 참조로 x 접근
    }

    inner(); // 30
}
outer();

구성 요소:

📝 환경 레코드 (Environment Record)

현재 스코프의 변수와 함수를 저장합니다.

function example() {
    let a = 1;
    const b = 2;
    function helper() {}

    // 환경 레코드: { a: 1, b: 2, helper: function }
}

🔗 외부 환경 참조 (Outer Environment Reference)

상위 스코프를 참조하여 스코프 체인을 만듭니다.

let global = "전역";

function level1() {
    let x = 10;

    function level2() {
        let y = 20;

        function level3() {
            let z = 30;
            // 스코프 체인: level3 → level2 → level1 → global
            console.log(global + x + y + z);
        }
        level3();
    }
    level2();
}
level1(); // "전역102030"

2️⃣ Variable Environment (변수 환경)

정의: var로 선언된 변수와 함수 선언을 관리

function test() {
    console.log(x); // undefined (호이스팅)
    var x = 10;
    console.log(x); // 10
}
test();

변수 환경 vs 렉시컬 환경:

function outer() {
    var x = 10; // 변수 환경에 저장

    function inner() {
        console.log(x); // 렉시컬 환경의 외부 참조로 접근
    }

    x = 20; // 값 변경
    inner(); // 20 (렉시컬 환경은 변경된 값 참조)
}
outer();

3️⃣ This Binding

정의: 현재 실행 컨텍스트의 this 값 결정

// 1. 전역 컨텍스트
console.log(this); // window (브라우저)

// 2. 함수 호출
function showThis() {
    console.log(this);
}
showThis(); // window (또는 undefined in strict mode)

// 3. 메서드 호출
const obj = {
    name: "객체",
    method() {
        console.log(this.name);
    }
};
obj.method(); // "객체"

// 4. 생성자 함수
function Person(name) {
    this.name = name;
}
const person = new Person("Alice");
console.log(person.name); // "Alice"

// 5. 화살표 함수
const obj2 = {
    name: "화살표",
    method: () => {
        console.log(this.name);
    }
};
obj2.method(); // undefined (상위 스코프의 this)

5. 콜 스택과 실행 컨텍스트 📚

🔄 콜 스택의 동작

var x = 'xxx';

function foo() {
    var y = 'yyy';

    function bar() {
        var z = 'zzz';
        console.log(x + y + z);
    }

    bar();
}

foo(); // "xxxyyyzzz"

실행 순서:

1️⃣ 전역 실행 컨텍스트 생성
   └── 콜 스택: [전역]

2️⃣ foo() 호출
   └── 콜 스택: [전역, foo]

3️⃣ bar() 호출
   └── 콜 스택: [전역, foo, bar]

4️⃣ bar() 종료
   └── 콜 스택: [전역, foo]

5️⃣ foo() 종료
   └── 콜 스택: [전역]

💡 상세 예시

function first() {
    console.log("1️⃣ First function start");
    second();
    console.log("1️⃣ First function end");
}

function second() {
    console.log("  2️⃣ Second function start");
    third();
    console.log("  2️⃣ Second function end");
}

function third() {
    console.log("    3️⃣ Third function");
}

console.log("🌐 Global start");
first();
console.log("🌐 Global end");

/* 출력:
🌐 Global start
1️⃣ First function start
  2️⃣ Second function start
    3️⃣ Third function
  2️⃣ Second function end
1️⃣ First function end
🌐 Global end
*/

6. 스코프 체인 🔗

🎯 스코프 체인이란?

변수를 찾을 때 현재 스코프에서 시작하여 상위 스코프로 이어지는 연결 고리입니다.

let level1 = "L1";

function outer() {
    let level2 = "L2";

    function middle() {
        let level3 = "L3";

        function inner() {
            let level4 = "L4";

            // 스코프 체인을 통한 변수 검색
            console.log(level4); // 현재 스코프
            console.log(level3); // 상위 스코프 (middle)
            console.log(level2); // 상위 스코프 (outer)
            console.log(level1); // 전역 스코프
        }

        inner();
    }

    middle();
}

outer();
/* 출력:
L4
L3
L2
L1
*/

📊 스코프 체인 시각화

let x = 10;

function foo() {
    let y = 20;

    function bar() {
        let z = 30;
        console.log(x + y + z); // 10 + 20 + 30
    }

    bar();
}

foo(); // 60

스코프 체인 구조:

bar의 렉시컬 환경
├── 환경 레코드: { z: 30 }
└── 외부 환경 참조 → foo의 렉시컬 환경
                      ├── 환경 레코드: { y: 20 }
                      └── 외부 환경 참조 → 전역 환경
                                           └── 환경 레코드: { x: 10 }

⚠️ 스코프 체인의 한계

function outer() {
    let x = 10;
}

function other() {
    console.log(x); // ReferenceError: x is not defined
}

outer();
other();

스코프 체인은 선언된 위치(렉시컬)를 기준으로 형성됩니다!

7. 클로저와 실행 컨텍스트 🔐

🎯 클로저란?

클로저(Closure): 반환된 내부 함수와 내부 함수가 선언되었던 렉시컬 환경의 조합

function makeCounter() {
    let count = 0; // 외부 함수의 변수

    return function() {
        count++; // 클로저: 외부 함수 종료 후에도 접근 가능
        return count;
    };
}

const counter1 = makeCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

const counter2 = makeCounter();
console.log(counter2()); // 1 (독립적인 클로저)

💡 클로저의 동작 원리

function outer() {
    let privateVar = "비밀 변수 🔒";

    return {
        getPrivate() {
            return privateVar;
        },
        setPrivate(value) {
            privateVar = value;
        }
    };
}

const instance1 = outer();
console.log(instance1.getPrivate()); // "비밀 변수 🔒"

instance1.setPrivate("변경된 값 ✨");
console.log(instance1.getPrivate()); // "변경된 값 ✨"

const instance2 = outer();
console.log(instance2.getPrivate()); // "비밀 변수 🔒" (독립적)

🌟 실용적인 클로저 예시

// 1. 데이터 은닉
function createBankAccount(initialBalance) {
    let balance = initialBalance;

    return {
        deposit(amount) {
            balance += amount;
            return `입금 완료! 잔액: ${balance}원 💰`;
        },
        withdraw(amount) {
            if (balance >= amount) {
                balance -= amount;
                return `출금 완료! 잔액: ${balance}원 💸`;
            }
            return "잔액 부족! ⚠️";
        },
        getBalance() {
            return `현재 잔액: ${balance}원 💵`;
        }
    };
}

const myAccount = createBankAccount(10000);
console.log(myAccount.deposit(5000));   // "입금 완료! 잔액: 15000원 💰"
console.log(myAccount.withdraw(3000));  // "출금 완료! 잔액: 12000원 💸"
console.log(myAccount.getBalance());    // "현재 잔액: 12000원 💵"
// console.log(balance); // ReferenceError (외부에서 접근 불가)

// 2. 함수 팩토리
function createMultiplier(multiplier) {
    return function(num) {
        return num * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
const quadruple = createMultiplier(4);

console.log(double(5));     // 10
console.log(triple(5));     // 15
console.log(quadruple(5));  // 20

8. this 바인딩 상세 가이드 🎭

📌 바인딩이란?

바인딩: 식별자와 값을 연결하는 과정

🎯 this 바인딩 규칙

1️⃣ 전역 컨텍스트

console.log(this); // window (브라우저) / global (Node.js)

function showGlobalThis() {
    console.log(this);
}
showGlobalThis(); // window (non-strict) / undefined (strict)

2️⃣ 암시적 바인딩 (메서드 호출)

const person = {
    name: "Alice",
    greet() {
        console.log(`안녕하세요, ${this.name}입니다! 👋`);
    }
};

person.greet(); // "안녕하세요, Alice입니다! 👋"

// ⚠️ 주의: 메서드를 변수에 할당하면?
const greetFunc = person.greet;
greetFunc(); // "안녕하세요, undefined입니다! 👋" (this가 전역 객체)

3️⃣ 명시적 바인딩 (call, apply, bind)

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function introduce(greeting, punctuation) {
    console.log(`${greeting}, 저는 ${this.name}입니다${punctuation}`);
}

// call: 인자를 개별적으로 전달
introduce.call(person1, "안녕하세요", "!");
// "안녕하세요, 저는 Alice입니다!"

// apply: 인자를 배열로 전달
introduce.apply(person2, ["Hello", "."]);
// "Hello, 저는 Bob입니다."

// bind: 새로운 함수 생성
const aliceIntroduce = introduce.bind(person1);
aliceIntroduce("Hi", "~");
// "Hi, 저는 Alice입니다~"

4️⃣ new 바인딩 (생성자 함수)

function User(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`${this.name} (${this.age}세) 👤`);
    };
}

const user1 = new User("Alice", 25);
const user2 = new User("Bob", 30);

user1.greet(); // "Alice (25세) 👤"
user2.greet(); // "Bob (30세) 👤"

5️⃣ 화살표 함수

// ❌ 일반 함수: this가 호출 방식에 따라 달라짐
const obj1 = {
    name: "일반 함수",
    regularFunc: function() {
        setTimeout(function() {
            console.log(this.name); // undefined (this가 전역)
        }, 100);
    }
};

// ✅ 화살표 함수: 상위 스코프의 this 사용
const obj2 = {
    name: "화살표 함수",
    arrowFunc: function() {
        setTimeout(() => {
            console.log(this.name); // "화살표 함수"
        }, 100);
    }
};

obj1.regularFunc(); // undefined
obj2.arrowFunc();   // "화살표 함수"

9. 호이스팅 완벽 이해 🎈

🔍 호이스팅이란?

변수와 함수 선언이 코드 실행 전에 메모리에 저장되어 마치 코드의 최상단으로 끌어올려진 것처럼 동작하는 현상

📝 var 호이스팅

console.log(x); // undefined (선언은 호이스팅, 할당은 X)
var x = 10;
console.log(x); // 10

// 위 코드는 실제로 이렇게 동작:
// var x;            // 선언 호이스팅
// console.log(x);   // undefined
// x = 10;           // 할당은 원래 위치
// console.log(x);   // 10

🚫 let, const 호이스팅

// ❌ TDZ (Temporal Dead Zone) 에러
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 30;

TDZ (일시적 사각지대):

let x = 10;

function example() {
    // TDZ 시작
    console.log(x); // ReferenceError (외부 x가 아닌 내부 x 참조 시도)
    let x = 20;     // TDZ 종료
    // x 사용 가능
}

🔧 함수 호이스팅

// ✅ 함수 선언문: 전체 호이스팅
hello(); // "Hello! 👋" (호출 가능)

function hello() {
    console.log("Hello! 👋");
}

// ❌ 함수 표현식: 변수만 호이스팅
greet(); // TypeError: greet is not a function

var greet = function() {
    console.log("Greet! 🎉");
};

// ❌ 화살표 함수: 변수만 호이스팅
wave(); // TypeError: wave is not a function

const wave = () => {
    console.log("Wave! 🌊");
};

10. 실전 활용 패턴 ⚡

🎯 즉시 실행 함수 (IIFE)

// 전역 스코프 오염 방지
(function() {
    var private = "비공개 변수";
    console.log("IIFE 실행! 🚀");
})();

// console.log(private); // ReferenceError

// 매개변수 전달
(function(name) {
    console.log(`Hello, ${name}! 👋`);
})("Alice");

🔒 모듈 패턴

const calculator = (function() {
    // Private 변수
    let result = 0;

    // Private 함수
    function log(message) {
        console.log(`[Calculator] ${message}`);
    }

    // Public API 반환
    return {
        add(num) {
            result += num;
            log(`Added ${num}, result: ${result}`);
            return this;
        },
        subtract(num) {
            result -= num;
            log(`Subtracted ${num}, result: ${result}`);
            return this;
        },
        multiply(num) {
            result *= num;
            log(`Multiplied by ${num}, result: ${result}`);
            return this;
        },
        getResult() {
            return result;
        },
        reset() {
            result = 0;
            log("Reset!");
            return this;
        }
    };
})();

// 메서드 체이닝
calculator
    .add(10)        // [Calculator] Added 10, result: 10
    .multiply(2)    // [Calculator] Multiplied by 2, result: 20
    .subtract(5);   // [Calculator] Subtracted 5, result: 15

console.log(calculator.getResult()); // 15

🏭 팩토리 패턴

function createUser(name, role) {
    // Private 변수
    let isAuthenticated = false;

    return {
        // Public 메서드
        getName() {
            return name;
        },
        getRole() {
            return role;
        },
        login() {
            isAuthenticated = true;
            console.log(`${name} logged in as ${role} ✅`);
        },
        logout() {
            isAuthenticated = false;
            console.log(`${name} logged out ❌`);
        },
        isLoggedIn() {
            return isAuthenticated;
        }
    };
}

const admin = createUser("Alice", "admin");
const user = createUser("Bob", "user");

admin.login();  // Alice logged in as admin ✅
console.log(admin.isLoggedIn()); // true

user.login();   // Bob logged in as user ✅
console.log(user.isLoggedIn()); // true

• 제너레이터(Generator) 는 함수 실행을 일시 중지하고 다시 시작할 수 있는 특별한 함수이다.
• 일반 함수와 달리, 제너레이터는 function* 키워드로 정의되며, 호출 시 즉시 실행되지 않고 이터레이터(Iterator) 객체를 반환한다.
  • 이를 통해 값을 순차적으로 생성하거나 제어할 수 있는데, 제너레이터는 특히 비동기 처리나 큰 데이터 집합을 단계별로 처리할 때 유용하다.

&nbsp

2. iterable, iterator

• 제너레이터는 iterable하고 iterator한 특징을 가지는데 각 내용은 아래와 같다.

iterable

• JavaScript에서 iterable은 반복 가능한 객체를 의미하며, for...of 루프나 전개 연산자(...) 등과 같은 반복문에서 사용할 수 있는 객체이다.
• 이 반복 가능한 객체(iterable한 객체)는 항상 Symbol.iterator() 메소드를 구현하고 있어야 하며, 이 메소드는 객체가 어떻게 반복될지 정의한다.

iterator

• 반복 작업을 제어하는 객체로, 반복되는 시퀀스의 값을 하나씩 반환할 수 있다.
• next() 메서드를 호출할 때마다 순차적으로 값을 반환하며, 반복이 끝나면 done: true가 반환된다.

&nbsp

3. 제너레이터의 특징

• 제너레이터 함수를 실행하면, iterator한 제너레이터 객체가 반환된다.
  • 반환된 iterator 객체가 갖고있는 next() 메소드를 사용하면, 가장 가까운 yield 키워드를 만날 때까지 코드를 실행할 수 있다.

3-1. 제너레이터 함수 정의

function* myGenerator() {
    yield 1; 
    yield 2; 
    yield 3; 
}

• function* 키워드와 함께 yield 키워드를 사용해 값을 생성한다.

3-2. 제너레이터 호출

function* fn() {
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    console.log(5);

    return "finish!!";
}

// iterator한 제너레이터 객체가 반환됨.
// 이 객체는 내부적으로 next()메소드를 가지고 있어, 사용 가능
const a = fn(); 

// 1 출력 -> next()는 {value:1, done: false} 반환 후 출력
console.log(a.next()); 

// 2 출력 -> next()는 {value:2, done: false} 반환 후 출력
console.log(a.next());

// 3,4 출력 -> next()는 {value:3, done: false} 반환 후 출력
console.log(a.next());

// 5 출력 -> next()는 {value: finish!!, done: true} 반환 후 출력
console.log(a.next());

// next()는 {value: undefined, done: true} 반환 후 출력
console.log(a.next());

• 제너레이터 함수 호출은 iterator 객체를 반환하며, next() 메서드를 호출해 하나씩 값을 얻을 수 있다.

3-3. return 메소드를 사용한 제너레이터 중지

function* func() {
    console.log(11);
    yield 1;
    console.log(22);
    yield 2;
    console.log(33);
    console.log(44);
    yield 3;
    console.log(55);

    return "finish!!";
}

const a = func(); 

// 11 출력 -> next()는 {value:1, done: false} 반환 후 출력
console.log(a.next()); 

// 22 출력 -> next()는 {value:2, done: false} 반환 후 출력
console.log(a.next());

// 33,44 출력 -> next()는 {value: undefined, done: true} 반환 후 출력
console.log(a.return());

// iterator.next().return() 사용으로 함수 실행이 종료됨
// {value: undefined, done: true} 반환 후 출력
console.log(a.next());

• 제너레이터 객체의 return 메소드 func().return()를 사용하면, 즉시 done은 true가 되고, value는 undefined가 된다.
  • iterator.next().return()을 사용하면, 이후 yield 키워드를 만날 때까지 함수 내부의 코드를 실행하는 것이 아니라, 바로 그 즉시 함수 실행을 종료하기 때문에 value가 undefined가 된다.

&nbsp

4. 제너레이터 활용 예시

- 무한 시퀀스 생성

function* infiniteSequence() {
    let i = 0;
    while (true) {
        yield i++;
    }
}

const seq = infiniteSequence();
console.log(seq.next().value); // 0
console.log(seq.next().value); // 1

- iterable 객체 생성

function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

for (let value of range(1, 5)) {
    console.log(value); // 1, 2, 3, 4, 5
}

• 제너레이터는 기본적으로 iterable 객체이므로 for...of 루프에서 사용할 수 있다.
• 이외에도 제너레이터는 yield를 사용해 중간 중간 작업을 멈추고 다시 시작할 수 있어, 비동기 흐름을 관리하기에도 좋다.

Overview

• Node.js 프로젝트에서는 패키지를 설치할 때, 해당 패키지가 프로젝트에서 어떻게 사용되는지에 따라 dependencies 또는 devDependencies 로 구분하여 관리한다.
• 이 두 가지는 package.json 파일의 중요한 필드이며, 설치한 패키지의 용도를 명확히 구분하는 데에 사용된다.

1. dependencies

※ 정의

• production 환경에서 애플리케이션 실행 시 필수적인 패키지이다.

※ 특징

• 런타임에 필요한 라이브러리

  • 예: 웹 서버용 라이브러리, 프론트엔드 UI 라이브러리

• 배포 환경에서 dependencies에 명시된 패키지들은 반드시 설치된다.

※ 설치 방법

npm install <패키지>

• 혹은 명시적으로 --save 옵션을 사용

  npm install <패키지> --save 

※ 예시파일 : package.json

• 프로젝트 'project-name'을 실행하기 위해 필요한 패키지

{
  "name": "project-name",
   // ...
  "dependencies": {
    "@ckeditor/ckeditor5-react": "8.0.0",
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.5",
    "@mui/icons-material": "5.15.20",
    "@mui/material": "5.15.20",
    "@mui/styles": "^5.15.20",
    "@mui/x-data-grid": "^7.19.0",
    "@react-pdf/renderer": "3.4.4",
    "@tanstack/react-query": "5.48.0",
    "@tomickigrzegorz/react-circular-progress-bar": "1.1.2",
    "@types/leaflet": "1.9.12",
    "@types/navermaps": "3.7.5",
    "@types/proj4": "2.5.5",
    "@types/react-leaflet": "3.0.0",
    "apexcharts": "3.49.2",
    "axios": "1.7.2",
    "chart.js": "4.4.3",
    "chartjs-plugin-datalabels": "2.2.0",
    "ckeditor5": "42.0.0",
    "echarts": "5.5.0",
    "echarts-for-react": "3.0.2",
    "exceljs": "4.4.0",
    "form-data": "4.0.0",
    "formidable": "2.1.2",
    "framer-motion": "11.2.12",
    "geolib": "3.3.4",
    "html2canvas": "1.4.1",
    "jspdf": "2.5.1",
    "jwt-decode": "^4.0.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "1.0.4",
    "leaflet-easyprint": "2.1.9",
    "lodash": "^4.17.21",
    "moment": "2.30.1",
    "next": "14.2.3",
    "next-auth": "4.24.7",
    "ol": "9.2.4",
    "proj4": "2.11.0",
    "proj4leaflet": "1.0.2",
    "react": "18.3.1",
    "react-apexcharts": "1.4.1",
    "react-barcode": "^1.5.3",
    "react-calendar": "4.8.0",
    "react-chartjs-2": "5.2.0",
    "react-datepicker": "7.2.0",
    "react-daum-postcode": "^3.1.3",
    "react-dom": "18.3.1",
    "react-hook-form": "7.52.0",
    "react-icons": "5.2.1",
    "react-kakao-maps-sdk": "1.1.27",
    "react-leaflet": "4.2.1",
    "react-leaflet-cluster": "2.1.0",
    "react-leaflet-draw": "0.20.4",
    "react-leaflet-easyprint": "2.0.0",
    "react-loader-spinner": "6.1.6",
    "react-pdf": "7.7.3",
    "react-scroll": "1.9.0",
    "react-share": "5.1.0",
    "react-slick": "0.30.2",
    "react-to-print": "^2.15.1",
    "react-youtube": "10.1.0",
    "read-excel-file": "5.8.3",
    "recoil": "0.7.7",
    "sass": "^1.78.0",
    "slick-carousel": "1.8.1",
    "styled-components": "6.1.11",
    "swiper": "11.1.4",
    "url-parse": "1.5.10",
    "xlsx": "0.18.5",
    "zod": "3.23.8"
  },
// ...
}

2. devDependencies

※ 정의

• 애플리케이션 개발 또는 빌드 과정에서만 필요한 패키지이다.

※ 특징

• 테스트, 코드 빌드, 린트, 문법 체크 등 개발 도구를 포함한다.
  (예: Webpack, ESLint, Jest 등)

• 배포 환경에서는 설치되지 않는다.
  (NODE_ENV=production 설정 시 무시됨)

※ 설치 방법

npm install <패키지> -save-dev

※ 예시

• Webpack, ESLint와 같은 개발도구

  {
  "name": "project-name",
   // ...
  "devDependencies": {
    "@types/formidable": "2.0.5",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.17.10",
    "@types/node": "20.16.1",
    "@types/react": "18.3.4",
    "@types/react-dom": "18",
    "@types/uuid": "^10.0.0",
    "eslint": "8",
    "eslint-config-next": "14.2.5",
    "typescript": "5.5.4"
  }
  // ...
  }

3. 비교

4. 실제 사용 예시

1. dependencies에 추가할 패키지

• React 프로젝트에서 사용자 인터페이스를 구성하기 위한 React 라이브러리

  npm install react react-dom

2. devDependencies에 추가할 패키지

• 코드 린트와 테스트를 위한 ESLint와 Jest 설치

  npm install eslint jest --save-dev

3. 배포 환경에서의 설치

• 배포 시에는 devDependencies를 제외한 dependencies만 설치하도록 설정해야 한다.

  npm install --production

이전 Chapter에서는 대시보드 페이지를 동적으로 만드는 데 성공했지만, 데이터 Fetch 속도가 느린 경우 애플리케이션의 성능에 어떤 영향을 미칠 수 있는지 논의했습니다.

이번 코스에서는 느린 데이터 요청이 있을 때 사용자 경험을 어떻게 개선할 수 있는지에 대해 살펴보겠습니다.

1. 기존 SSR의 한계

기존 SSR의 flow를 생각해보면 다음과 같습니다:

1. 백엔드 서버(API)로부터 Data를 가져온다
2. 프론트엔드 서버(Next.js)에서 HTML을 렌더링한다
3. 클라이언트(브라우저)에서 HTML을 받는다
4. 클라이언트(브라우저)는 자바스크립트(bundle.js)를 다운로드 한 후, 상호작용성있는 웹을 만든다

문제점: 위의 과정이 모두 끝나기 전까지는 사용자가 페이지와 상호작용을 할 수 없습니다. Next.js에서는 이 문제를 해결하기 위해 Streaming 기술을 도입했습니다.

2. Streaming이란?

2.1 Streaming의 정의

Next.js에서는 Streaming을 다음과 같이 정의합니다:

경로를 더 작은 "청크(chunk)"로 나누어 서버에서 클라이언트로 점진적으로 스트리밍하는 데이터 전송 기술

2.2 Streaming의 작동 원리

• HTML을 작은 단위로 나누어 모든 데이터가 로드되기 전에 준비된 컴포넌트는 미리 완성해 상호작용할 수 있게 합니다
• 우선순위가 높은 컴포넌트를 먼저 작동시킬 수 있습니다

2.3 Streaming의 장점

• 느린 데이터 요청이 전체 페이지를 차단하는 것을 방지
• 사용자는 모든 데이터가 로드될 때까지 기다리지 않고 페이지의 일부를 보고 상호작용 가능
• 각 컴포넌트가 Hydrating되기까지의 시간(TTL)을 개별적으로 관리

2.4 Hydrating이란?

Hydrating은 Next.js 서버가 Pre-Rendering된 웹 페이지를 클라이언트에게 보낸 뒤, React가 bundling된 Javascript 코드들을 chunk 단위로 클라이언트에게 전송하고, 이러한 Javascript 코드들이 이전에 전송된 HTML DOM 요소 위로 리렌더링되는 과정에서 자기 자리를 찾아 매칭되는 과정입니다.

Hydrating을 통해 초기 로딩 시 클라이언트에서 즉시 상호작용이 가능하고, 이후에는 일반적인 React 애플리케이션처럼 동작할 수 있습니다.

3. Next.js Streaming 구현 방법

Next.js에서 스트리밍을 구현하는 방법은 두 가지입니다:

1. 페이지 수준에서 loading.tsx 파일 사용
2. 특정 컴포넌트에서 <Suspense> 사용

4. 페이지 레벨 Streaming: loading.tsx

4.1 기본 Loading 컴포넌트 생성

/app/dashboard 디렉터리에 loading.tsx 파일을 생성합니다:

export default function Loading() {
  return <div>Loading...</div>;
}

4.2 Loading의 작동 원리

• loading.tsx는 Suspense를 기반으로 한 Next.js의 특수 파일입니다
• 페이지 콘텐츠가 로드되는 동안 대체 UI를 보여줍니다
• <SideNav> 같은 정적 컴포넌트는 즉시 표시되며, 사용자는 동적 콘텐츠가 로드되는 동안에도 상호작용할 수 있습니다
• Interruptable navigation: 페이지가 완전히 로드되기를 기다릴 필요 없이 페이지를 떠날 수 있습니다

4.3 Loading Skeleton 추가

사용자 경험을 개선하기 위해 Loading Skeleton을 추가할 수 있습니다:

import DashboardSkeleton from "../ui/skeletons";

export default function Loading() {
  return <DashboardSkeleton />;
}

4.4 Skeleton UI의 장점

• 사용자에게 서비스가 원활히 작동 중임을 알림
• 하얀 백지 화면 대신 의미 있는 UI 제공
• 사용자 이탈 방지 효과

5. Route Groups를 활용한 Skeleton 버그 수정

5.1 문제 상황

현재 loading.tsx 파일의 대시보드 Skeleton UI가 송장 페이지와 고객 페이지에도 적용되는 문제가 발생합니다.

원인: /app/dashboard/loading.tsx가 /app/dashboard/invoices/page.tsx 및 /app/dashboard/customers/page.tsx보다 상위 레벨에 위치

5.2 Route Groups란?

Route Groups는 폴더를 경로의 URL 경로에 포함되지 않도록 표시할 수 있는 기능입니다.

• URL 경로 구조에 영향을 주지 않으면서 경로 세그먼트와 프로젝트 파일을 논리적인 그룹으로 구성
• 디렉터리명을 소괄호 ()로 감싸서 생성

5.3 해결 방법

/app/dashboard 하위에 (overview) 폴더를 생성하고, page.tsx와 loading.tsx를 이동:

5.4 Route Groups 활용 방법

1. URL 경로 구조에 영향을 주지 않고 파일을 논리적 그룹으로 구성
2. ()로 감싼 디렉터리는 URL 경로에 포함되지 않음
3. /dashboard/(overview)/page.tsx → URL: /dashboard
4. 애플리케이션을 Section별 ((marketing), (shop)) 또는 팀별로 분리 가능

6. 컴포넌트 레벨 Streaming: <Suspense>

6.1 컴포넌트별 세분화된 Streaming

전체 페이지가 아닌 특정 컴포넌트만 스트리밍하고 싶을 때 React Suspense를 사용합니다.

6.2 Suspense의 작동 원리

• 일부 조건(데이터 로드)을 충족할 때까지 애플리케이션 일부의 렌더링을 지연
• 동적 컴포넌트를 감싸고, 로드되는 동안 대체 컴포넌트(fallback) 표시

6.3 실습: RevenueChart 컴포넌트 스트리밍

Step 1: 기존 코드에서 데이터 fetch 제거

export default async function Page() {
  // const revenue = await fetchRevenue(); // 삭제
  const latestInvoices = await fetchLatestInvoices();
  // ...
}

Step 2: Suspense로 컴포넌트 감싸기

import { Suspense } from 'react';

return (
  <main>
    {/* 기존 코드 */}
    <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
      <Suspense fallback={<RevenueChartSkeleton />}>
        <RevenueChart />
      </Suspense>
      <LatestInvoices latestInvoices={latestInvoices} />
    </div>
  </main>
);

Step 3: 컴포넌트 내부에서 데이터 fetch

import { fetchRevenue } from "@/app/lib/data";

export default async function RevenueChart() {
  const chartHeight = 350;
  const revenue = await fetchRevenue(); // 추가
  const { yAxisLabels, topLabel } = generateYAxis(revenue);

  if (!revenue || revenue.length === 0) {
    return <p className="mt-4 text-gray-400">No data available.</p>;
  }

  // 컴포넌트 렌더링 로직...
}

6.4 결과 비교

이전 코드 (Suspense 없음):

// 페이지 전체가 차단되고, 모든 데이터 fetch가 완료되어야 화면 표시
<RevenueChart />

변경 코드 (Suspense 적용):

// 컴포넌트별 스트리밍으로 페이지 전체 차단 없음
// fetchRevenue() 완료 전까지 fallback 컴포넌트 표시
<Suspense fallback={<RevenueChartSkeleton />}>
  <RevenueChart />
</Suspense>

6.5 로딩 단계별 화면

1단계: fetchLatestInvoices(), fetchCardData() 진행 중

2단계: 위 함수들 완료 후, fetchRevenue() 수행 전

7. 컴포넌트 그룹핑: <Card/> 최적화

7.1 Popping 효과 문제

각 개별 카드에 대한 데이터를 따로 가져오면 Popping 효과(화면 요소가 갑자기 바뀌거나 나타나는 효과)가 발생하여 사용자에게 시각적으로 거슬릴 수 있습니다.

7.2 해결 방안: 컴포넌트 그룹화

카드들을 그룹화하여 종합된 지연 효과를 만들어 정적인 <SideNav/>가 먼저 표시되고 그 다음에 카드 데이터가 표시되도록 합니다.

7.3 구현 과정

Step 1: Page 컴포넌트 수정

import { Suspense } from "react";
import {
  CardSkeleton,
  LatestInvoicesSkeleton,
  RevenueChartSkeleton,
} from "@/app/ui/skeletons";
import CardWrapper from "@/app/ui/dashboard/cards";

export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>

      {/* 카드들을 그룹화하여 Suspense로 감싸기 */}
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Suspense fallback={<CardSkeleton />}>
          <CardWrapper />
        </Suspense>
      </div>

      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        <Suspense fallback={<LatestInvoicesSkeleton />}>
          <LatestInvoices />
        </Suspense>
      </div>
    </main>
  );
}

Step 2: CardWrapper 컴포넌트 생성

export default async function CardWrapper() {
  const {
    numberOfCustomers,
    numberOfInvoices,
    totalPaidInvoices,
    totalPendingInvoices,
  } = await fetchCardData();

  return (
    <>
      <Card title="Collected" value={totalPaidInvoices} type="collected" />
      <Card title="Pending" value={totalPendingInvoices} type="pending" />
      <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
      <Card
        title="Total Customers"
        value={numberOfCustomers}
        type="customers"
      />
    </>
  );
}

7.4 최종 결과

8. Suspense 경계 설정 가이드

8.1 고려사항

Suspense 경계를 어디에 놓을지 결정할 때 고려해야 할 사항들:

1. 사용자 경험: 페이지가 스트리밍되는 동안 사용자가 어떻게 경험하길 원하는가?
2. 우선순위: 어떤 콘텐츠를 우선순위로 두길 원하는가?
3. 데이터 의존성: 컴포넌트가 데이터 Fetch에 의존하는가?

8.2 Best Practices

✅ 권장사항

• 데이터를 필요로 하는 컴포넌트에 데이터를 불러오는 메소드를 이동
• 해당 컴포넌트를 Suspense로 래핑
• 컴포넌트별 독립적인 로딩 상태 관리

⚠️ 상황에 따른 선택

• Section 또는 전체 페이지 스트리밍도 애플리케이션 요구사항에 따라 적절할 수 있음
• 정답은 없으며, 프로젝트의 특성과 사용자 요구사항에 맞게 결정

8.3 실습에서 적용한 전략

1. 처음: 전체 페이지를 loading.tsx로 스트리밍
2. 개선: 느린 컴포넌트로 인한 전체 지연을 방지하기 위해 개별 컴포넌트 스트리밍
3. 최적화: <Card/> 컴포넌트의 popping 효과 방지를 위한 그룹화

결론

Next.js의 Streaming 기능을 통해 사용자 경험을 크게 개선할 수 있습니다. 핵심은 데이터 로딩 상태를 세밀하게 관리하고, 사용자가 기다리는 시간을 최소화하면서도 시각적으로 안정적인 인터페이스를 제공하는 것입니다.

핵심 포인트

• 페이지 레벨: loading.tsx로 전체 페이지 스트리밍
• 컴포넌트 레벨: <Suspense>로 세밀한 제어
• Route Groups: 경로별 로딩 상태 분리
• 컴포넌트 그룹화: 시각적 안정성 확보

이러한 기법들을 적절히 조합하여 사용자가 만족할 수 있는 웹 애플리케이션을 구축할 수 있습니다.

• 인라인 함수
  • 인라인 함수는 일반적으로 해당 함수를 호출하는 곳에 직접 선언된다.
  • 주로 콜백 함수나 짧은 동작을 수행하는 함수 등 간단한 작업에 사용된다.
  • 아래 코드의 function(number) { return number * 2; }는 map 메서드 안에서 인라인으로 선언된 함수이다.
    • 해당 함수는 간단한 작업을 수행하기 때문에 별도로 분리하지 않고 인라인으로 작성되었다.

// 배열의 각 요소를 두 배로 만드는 인라인 함수
const numbers = [1, 2, 3, 4];

// 인라인 함수가 map 함수의 콜백으로 사용됨
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // 출력: [2, 4, 6, 8]

&nbsp

• 모듈 함수

  • 모듈 함수는 모듈 파일의 최상위 레벨에서 선언된다.

  • 다른 모듈(별도 파일로 분리해서 선언)에서 불러와 사용할 수 있는 함수이다.

  • 아래 예시에서 add와 multiply 함수는 mathUtils.js 파일에서 모듈 함수로 선언되었으며, app.js에서 이를 가져와 사용했다.

    • 이러한 모듈 함수는 여러 곳에서 재사용이 가능하고, 코드의 유지보수성을 높여준다.

mathUtils.js

// 모듈 함수 선언
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

page.tsx (다른 모듈에서 함수 호출)

import { add, multiply } from './mathUtils.js'; // 모듈 함수 가져오기

const sum = add(5, 3);
const product = multiply(4, 2);

console.log(sum);      // 출력: 8
console.log(product);  // 출력: 8

&nbsp

2. 재사용성

• 인라인 함수
  • 주로 해당 위치에서만 사용된다.
  • 즉, 다른 곳에서 재사용되지 않고 해당 위치에서만 필요한 작업을 수행한다.

• 모듈 함수
  • 다른 모듈에서 재사용될 수 있으므로 일반적으로 더 큰 범위에서 사용된다.
  • 모듈 함수는 여러 곳에서 호출되어 동일한 작업을 수행할 수 있다.

&nbsp

3. 스코프

• 인라인 함수
  • 주로 해당 함수를 포함하는 블록의 스코프 내에서만 유효하다.
  • 함수가 선언된 블록을 벗어나면 사용할 수 없다.

• 모듈 함수
  • 모듈 함수는 모듈의 전역 스코프에 정의되며, 해당 모듈 내의 모든 함수에서 사용할 수 있다.
  • 물론, 다른 모듈에서 또다른 모듈을 가져와 사용할 수 있다.

&nbsp

4. 성능

• 인라인 함수
  • 호출할 때마다 함수가 다시 정의되므로, 반복적으로 호출되는 경우 성능에 영향을 줄 수 있다.

• 모듈 함수
  • 모듈 함수는 한 번 정의되고 다시 사용되므로 상황에 따라 성능 상의 이점이 있을 수 있다.

1. 반응형 웹 (Responsive Web) 🌊

🎯 개념

반응형 웹은 CSS의 미디어 쿼리(media query)를 사용하여 화면 크기와 관계없이 유동적으로 레이아웃을 변경합니다.

하나의 HTML과 CSS 코드 기반을 사용해 화면 크기에 맞게 요소들이 자동으로 재배치되고 크기가 조정되므로, 사용자가 어떤 기기(모바일, 태블릿, 데스크톱 등)를 사용하든 일관된 경험을 제공할 수 있습니다.

💻 코드 예시

/* 데스크톱 스타일 */
body {
  font-size: 16px;
}

@media (max-width: 768px) {
  /* 태블릿 스타일 */
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  /* 모바일 스타일 */
  body {
    font-size: 12px;
  }
}

✨ 특징

👍 장점

• ✅ 유지 보수가 편리함: 코드가 하나만 있어 관리가 쉬움
• ✅ 유연한 대응: 화면 크기 변화에 유연하게 대응 가능
• ✅ 일관된 UX: 다양한 디바이스에서 일관된 사용자 경험 제공
• ✅ 코드 중복 최소화: 단일 HTML/CSS 코드베이스 사용

👎 단점

• ⚠️ 구현 복잡도: 모든 화면 크기에서 작동하도록 고려해야 하므로 구현이 복잡해질 수 있음
• ⚠️ 설계 시간 증가: 해상도별로 보여질 화면을 꼼꼼히 정의해야 하므로 화면 설계에 많은 시간 소요
  • 하나의 템플릿으로 모든 기기에 대응해야 하기 때문
• ⚠️ UX 이슈 가능성: 화면이 커지거나 작아질 때 컨텐츠 배치나 크기가 자연스럽게 조정되지 않으면 비효율적이거나 보기 불편할 수 있음

2. 적응형 웹 (Adaptive Web) 🎛️

🎯 개념

적응형 웹은 여러 개의 고정된 레이아웃을 만들어 놓고, 사용자가 접속한 화면 크기에 맞는 레이아웃을 선택하여 표시하는 방식입니다.

반응형 웹과 달리 미리 정의된 레이아웃 중에서 선택하기 때문에 특정 화면 크기별로 세부적인 최적화가 가능합니다.

💻 코드 예시

<!-- Desktop layout -->
<div class="desktop">This is for desktop</div>

<!-- Tablet layout -->
<div class="tablet">This is for tablet</div>

<!-- Mobile layout -->
<div class="mobile">This is for mobile</div>

/* 각 레이아웃별로 CSS를 조정 */
.desktop { display: block; }
.tablet, .mobile { display: none; }

@media (max-width: 768px) {
  .desktop { display: none; }
  .tablet { display: block; }
}

@media (max-width: 480px) {
  .tablet { display: none; }
  .mobile { display: block; }
}

✨ 특징

🔄 렌딩(Landing) 프로세스

적응형 웹은 특정 기기에 맞는 레이아웃을 선택하고 로딩하는 렌딩 과정을 거칩니다.

• 화면 크기와 해상도에 따라 다양한 고정된 레이아웃을 준비
• 사용자가 웹 페이지에 접속할 때 그 중 하나를 선택
• 서버나 클라이언트 측에서 기기에 맞는 버전으로 redirect 가능

💡 실제 예시: 다음(Daum) 웹사이트

PC 접속 시
  └─→ daum.net으로 렌딩

모바일 접속 시
  └─→ 서버가 사용자 기기 확인
      └─→ 모바일 전용 페이지로 redirect
          └─→ m.daum.net으로 렌딩

👍 장점

• ✅ 최적화된 디자인: 화면 크기에 최적화된 디자인을 제공하여 성능 최적화 용이
• ✅ 맞춤형 UI: 특정 디바이스에 맞춤형 UI를 적용하기 쉬움
• ✅ 완벽한 기기별 UX: 기기별로 사용자 경험을 완벽하게 조정 가능
• ✅ 세밀한 제어: 각 디바이스에 특화된 기능과 레이아웃 구현 가능

👎 단점

• ⚠️ 유지 보수 복잡: 각 화면 크기에 맞는 레이아웃을 각각 디자인해야 하므로 유지 보수가 복잡함
  • 각 디바이스 유형에 따라 독립적인 템플릿 제작 필요
  • 각 디바이스에 맞는 페이지를 별도로 제작해야 함
• ⚠️ 확장성 이슈: 화면 크기나 해상도가 추가될 때마다 새 레이아웃 작성 필요
• ⚠️ 코드 중복: 여러 버전의 HTML/CSS를 관리해야 함

3. 비교 요약 ⚖️

📊 핵심 차이점

🎨 시각적 비교

반응형 웹의 동작 방식

┌─────────────────────────────────┐
│   하나의 HTML/CSS 코드베이스    │
└─────────────────────────────────┘
              ↓
    ┌─────────┴─────────┐
    ↓                   ↓
┌─────────┐      ┌──────────┐
│ 📱 모바일 │      │ 💻 데스크톱 │
│ 자동조정 │      │  자동조정  │
└─────────┘      └──────────┘

적응형 웹의 동작 방식

┌───────────────────────────────────┐
│  여러 개의 독립적인 레이아웃 준비  │
└───────────────────────────────────┘
         ↓          ↓          ↓
    ┌────────┐ ┌────────┐ ┌────────┐
    │ 📱 모바일│ │ 📱 태블릿│ │💻 PC │
    │  전용   │ │  전용   │ │ 전용  │
    └────────┘ └────────┘ └────────┘
         ↓          ↓          ↓
      선택 및 렌딩 (필요시 redirect)

🤔 어떤 것을 선택해야 할까?

반응형 웹을 선택하는 경우 ✅

• 유지 보수가 중요한 프로젝트
• 다양한 화면 크기에 대응해야 하는 경우
• 개발 리소스가 제한적인 경우
• 단일 코드베이스 관리를 원하는 경우

적응형 웹을 선택하는 경우 ✅

• 각 디바이스에 특화된 UX가 필요한 경우
• 성능 최적화가 매우 중요한 경우
• 디바이스별로 다른 기능을 제공해야 하는 경우
• 개발 리소스가 충분한 경우

4. 실전 팁 💡

🎯 반응형 웹 개발 팁

/* 모바일 우선(Mobile First) 접근 */
/* 기본 스타일 (모바일) */
.container {
  width: 100%;
  padding: 10px;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 데스크톱 이상 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

🎛️ 적응형 웹 개발 팁

// 서버 측 기기 감지 예시 (Node.js)
app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'];

  if (/mobile/i.test(userAgent)) {
    res.redirect('/mobile');
  } else if (/tablet/i.test(userAgent)) {
    res.redirect('/tablet');
  } else {
    res.redirect('/desktop');
  }
});

🔧 주요 브레이크포인트

&nbsp

1. 일반 함수

• 일반 함수는 function 키워드를 사용하여, 함수를 정의하는 방법이다.

  function regularFunction(param1, param2) { 
  // 함수 본
  }

• 특징은 아래와 같다.

1. this 바인딩
   • 일반 함수는 호출되는 컨텍스트에 따라 this가 다르게 바인딩된다.
   • 함수가 호출되는 위치에 따라 this의 값이 달라질 수 있다.

2. arguments 객체 o
   • 일반 함수는 arguments 객체를 사용할 수 있다.
   • 이 객체는 함수에 전달된 인수들을 배열 형태로 제공한다.

3. 생성자 함수 사용 가능
   • 일반 함수는 new 키워드를 사용하여 생성자 함수로도 사용할 수 있다.

4. 이름 붙은 함수 표현식
   • 일반 함수는 이름을 붙여 정의할 수 있다.

&nbsp

2. 화살표 함수

• 화살표 함수는 함수를 간단하게 표현할 수 있는 ES6 문법이다.

  • 화살표 함수는 => 구문을 사용하여 함수를 정의하는 방법이다.

    const arrowFunction = (param1, param2) => {
    // 함수 본문
    };

• 일반함수는 this가 호출하는 대상에 따라, 동적으로 바인딩된다. 그러나, 화살표함수를 사용했을 때의 this는 상위 스코프의 this를 가리키게 된다.

  • 이를 Lexical this라고 한다.

• 특징은 아래와 같다.

1. this 바인딩
   • 화살표 함수는 자신만의 this를 가지지 않으며, 외부 함수의 this를 그대로 사용한다. (함수가 호출되는 위치에 따라 this의 값이 달라질 수 있다.)
   • 이 때문에 콜백 함수나 이벤트 핸들러에서 유용하게 사용할 수 있다.

2. arguments 객체 x
   • 화살표 함수는 arguments 객체를 사용할 수 없다.
   • arguments 객체를 사용하지 못하는 대신, rest parameter를 사용할 수 있다.

3. 생성자 함수 사용 불가
   • 화살표 함수는 생성자 함수로 사용할 수 없다.
   • 즉, new 키워드와 함께 사용할 수 없다.

4. 짧은 문법
   • 함수 본문이 한 줄인 경우 중괄호와 return 키워드 없이도 사용할 수 있다.

     const add = (a, b) => a + b;

&nbsp

3. 요약

1. this 바인딩: 일반 함수는 동적으로 this를 바인딩하지만, 화살표 함수는 외부의 this를 그대로 사용한다.
2. arguments 객체: 일반 함수는 arguments 객체를 제공하지만, 화살표 함수는 제공하지 않는다.
3. 생성자 함수: 일반 함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 사용할 수 없다.
4. 문법: 화살표 함수는 더 간결한 문법을 제공한다.