[script] 인터페이스란? 정말 쉽게 설명하기

인터페이스를 리모컨에 비유해서 설명해드릴게요!

리모컨 비유:

TV 리모컨을 생각해보세요
리모컨에는 전원, 채널 변경, 볼륨 조절 버튼이 있죠?
우리는 TV의 복잡한 내부 회로를 알 필요 없이 리모컨만 사용하면 됩니다
이때 리모컨이 바로 "인터페이스"입니다

// 결제 시스템 인터페이스 예시

const paymentService = {

    // 외부에서 사용할 수 있는 "버튼들"

    processPayment: (amount) => { /* ... */ },

    refund: (amount) => { /* ... */ },

    checkBalance: () => { /* ... */ }

};

실제 예시:

const createPaymentProcessor = (type) => {

    // 내부 구현 (복잡한 TV 회로)

    const processInternal = (amount) => {

        // 복잡한 결제 로직

        // 보안 검증

        // 네트워크 통신

        // 등등...

    };

    // 외부로 노출되는 인터페이스 (리모컨 버튼)

    return {

        process: (amount) => {

            console.log(`${type}로 ${amount}원 결제 처리중...`);

            return processInternal(amount);

        }

    };

};

인터페이스의 특징:

const creditCard = createPaymentProcessor('신용카드');

// 인터페이스를 통한 사용 (리모컨 버튼 누르기)

creditCard.process(50000);  // ✅ 이것만 사용 가능

// 내부 구현에는 접근 불가 (TV 내부 회로 만지기 불가)

creditCard.processInternal  // ❌ 접근

정리하면:

인터페이스는 복잡한 내부 구현을 숨기고
외부에서 사용할 수 있는 간단한 "약속된 방법"을 제공합니다
마치 TV의 복잡한 회로 대신 리모컨만 제공하는 것처럼요!

다른 예시로는:

자동차의 운전대, 페달, 기어 → 운전자를 위한 인터페이스
커피머신의 버튼들 → 사용자를 위한 인터페이스
키보드와 마우스 → 컴퓨터를 위한 인터페이스

인터페이스는 복잡한 것을 단순하게 사용할 수 있게 해주는 "약속된 소통 방법"이라고 생각하시면 됩니다!






------------



펑션이 인터페이스라는 말인가?


정확히는, 함수(펑션) 자체가 인터페이스는 아니고, 함수가 인터페이스의 일부가 될 수 있습니다.

예를 들어볼게요:

// 결제 시스템의 인터페이스

const paymentService = {

    // 이 세 개의 함수들이 모여서 하나의 인터페이스를 구성합니다

    processPayment: (amount) => { /* ... */ },

    refund: (amount) => { /* ... */ },

    checkBalance: () => { /* ... */ }

};

우리의 결제 예제로 보면:

// createPaymentProcessor가 반환하는 객체가 인터페이스입니다

const createPaymentProcessor = (type) => {

    return {

        // process 함수는 이 인터페이스의 일부입니다

        process: (amount) => {

            console.log(`${type}로 ${amount}원 결제 처리중...`);

            return true;

        }

    };

};

쉽게 설명하자면:

인터페이스는 "사용설명서" 같은 거예요
그 안에 여러 함수들(메서드들)이 있을 수 있죠
각 함수들은 사용설명서의 "chapter" 같은 거예요
다시 TV 리모컨으로 비유하면:

리모컨 전체가 인터페이스
전원 버튼, 채널 버튼, 볼륨 버튼 등이 각각의 함수
이 버튼들이 모여서 TV를 제어하는 완전한 인터페이스를 구성하는 거죠!



------------------
"인터페이스 = 역할들의 모음"

// 그냥 독립적인 함수

function add(a, b) {

    return a + b;

}

// vs

// 결제 시스템이라는 목적을 가진 인터페이스의 일부가 된 함수

const paymentSystem = {

    processPayment: function(amount) {

        // 이제 이 함수는 '결제 처리'라는 역할을 가진 인터페이스의 일부

        console.log(`${amount}원 결제 처리`);

    },

    refund: function(amount) {

        // '환불'이라는 역할을 가진 인터페이스의 일부

        console.log(`${amount}원 환불 처리`);

    }

};

// "결제 시스템"이라는 하나의 인터페이스

const paymentSystem = {

    // "결제" 역할

    processPayment: function(amount) { },

   

    // "환불" 역할

    refund: function(amount) { },

   

    // "잔액 확인" 역할

    checkBalance: function() { }

};

"웨이터"라는 인터페이스는

주문 받기
음식 서빙하기
계산하기
라는 여러 역할들의 모음이에요


"리모컨"이라는 인터페이스는

전원 켜기/끄기
채널 변경하기
볼륨 조절하기
라는 여러 역할들의 모음이죠



즉, 인터페이스는 관련된 여러 역할들을 모아놓은 하나의 완성된 세트라고 볼 수 있습니다!