📝 의사코드로 보는 이벤트 루프

while (프로그램이_실행중) {
    event = 이벤트_큐에서_가져오기()
    
    if (event가_존재함) {
        switch (event.타입) {
            case 마우스_클릭:
                마우스_클릭_처리(event)
                break
            case 키보드_입력:
                키보드_입력_처리(event)
                break
            case 창_닫기:
                프로그램_종료()
                break
        }
    }
    
    화면_업데이트()
}

📝 Python Tkinter 예제: 간단한 이벤트 처리

import tkinter as tk

def on_button_click(event):
    print(f"버튼이 클릭되었습니다! 위치: ({event.x}, {event.y})")
    label.config(text="클릭됨!")

def on_mouse_move(event):
    label.config(text=f"마우스 위치: ({event.x}, {event.y})")

# 메인 윈도우 생성
root = tk.Tk()
root.title("이벤트 처리 예제")
root.geometry("400x300")

# 레이블 생성
label = tk.Label(root, text="버튼을 클릭하거나 마우스를 움직여보세요")
label.pack(pady=20)

# 버튼 생성 및 이벤트 바인딩
button = tk.Button(root, text="클릭하세요!")
button.pack(pady=10)
button.bind("<Button-1>", on_button_click)  # 왼쪽 클릭

# 윈도우에 마우스 이동 이벤트 바인딩
root.bind("<Motion>", on_mouse_move)

# 이벤트 루프 시작
root.mainloop()

이 코드에서 root.mainloop()가 바로 이벤트 루프야! 이 함수가 호출되면 프로그램은 이벤트를 기다리는 무한 루프에 들어가게 돼.

📝 Java Swing 예제

import javax.swing.*;
import java.awt.event.*;

public class EventExample extends JFrame {
    private JLabel label;
    private JButton button;
    
    public EventExample() {
        setTitle("이벤트 처리 예제");
        setSize(400, 300);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        label = new JLabel("버튼을 클릭하세요");
        button = new JButton("클릭!");
        
        // 람다식을 사용한 이벤트 처리
        button.addActionListener(e -> {
            label.setText("버튼이 클릭되었습니다!");
        });
        
        // 마우스 리스너 추가
        button.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseEntered(MouseEvent e) {
                label.setText("마우스가 버튼 위에 있습니다");
            }
            
            @Override
            public void mouseExited(MouseEvent e) {
                label.setText("마우스가 버튼을 벗어났습니다");
            }
        });
        
        JPanel panel = new JPanel();
        panel.add(label);
        panel.add(button);
        add(panel);
    }
    
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            new EventExample().setVisible(true);
        });
    }
}

📝 C# Windows Forms 예제

using System;
using System.Windows.Forms;

public class EventExample : Form
{
    private Label label;
    private Button button;
    
    public EventExample()
    {
        Text = "이벤트 처리 예제";
        Size = new System.Drawing.Size(400, 300);
        
        label = new Label
        {
            Text = "버튼을 클릭하세요",
            Location = new System.Drawing.Point(50, 50),
            AutoSize = true
        };
        
        button = new Button
        {
            Text = "클릭!",
            Location = new System.Drawing.Point(50, 100)
        };
        
        // 이벤트 핸들러 등록
        button.Click += Button_Click;
        button.MouseEnter += Button_MouseEnter;
        button.MouseLeave += Button_MouseLeave;
        
        Controls.Add(label);
        Controls.Add(button);
    }
    
    private void Button_Click(object sender, EventArgs e)
    {
        label.Text = "버튼이 클릭되었습니다!";
    }
    
    private void Button_MouseEnter(object sender, EventArgs e)
    {
        label.Text = "마우스가 버튼 위에 있습니다";
    }
    
    private void Button_MouseLeave(object sender, EventArgs e)
    {
        label.Text = "마우스가 버튼을 벗어났습니다";
    }
    
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new EventExample());
    }
}

여기서 Application.Run()이 이벤트 루프를 시작하는 함수야!

📝 JavaScript 예제

// HTML 요소 가져오기
const button = document.getElementById('myButton');
const label = document.getElementById('myLabel');

// 클릭 이벤트 리스너 추가
button.addEventListener('click', function(event) {
    label.textContent = '버튼이 클릭되었습니다!';
    console.log('클릭 위치:', event.clientX, event.clientY);
});

// 마우스 오버 이벤트
button.addEventListener('mouseenter', function() {
    label.textContent = '마우스가 버튼 위에 있습니다';
    button.style.backgroundColor = '#667eea';
});

// 마우스 아웃 이벤트
button.addEventListener('mouseleave', function() {
    label.textContent = '마우스가 버튼을 벗어났습니다';
    button.style.backgroundColor = '';
});

// 키보드 이벤트
document.addEventListener('keydown', function(event) {
    label.textContent = `${event.key} 키가 눌렸습니다`;
});

📝 Windows API의 메시지 루프 (C++)

// 전통적인 Windows 메시지 루프
MSG msg;
while (GetMessage(&msg, NULL, 0, 0)) {
    TranslateMessage(&msg);  // 키보드 메시지 변환
    DispatchMessage(&msg);   // 윈도우 프로시저로 전달
}

// 윈도우 프로시저 (이벤트 핸들러)
LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, 
                            WPARAM wParam, LPARAM lParam) {
    switch (uMsg) {
        case WM_LBUTTONDOWN:  // 왼쪽 마우스 버튼 클릭
            // 클릭 처리 코드
            return 0;
            
        case WM_KEYDOWN:  // 키 눌림
            // 키보드 처리 코드
            return 0;
            
        case WM_PAINT:  // 화면 다시 그리기
            // 그리기 코드
            return 0;
            
        case WM_DESTROY:  // 창 닫기
            PostQuitMessage(0);
            return 0;
    }
    
    return DefWindowProc(hwnd, uMsg, wParam, lParam);
}

이게 바로 Windows GUI 프로그래밍의 기본이야. 다른 고수준 프레임워크들도 내부적으로는 이런 메커니즘을 사용하고 있어.

📝 Python Threading 예제

import tkinter as tk
import threading
import time

def long_running_task():
    # 시간이 오래 걸리는 작업 시뮬레이션
    time.sleep(5)
    # UI 업데이트는 메인 스레드에서!
    root.after(0, lambda: label.config(text="작업 완료!"))

def start_task():
    label.config(text="작업 중...")
    # 별도 스레드에서 실행
    thread = threading.Thread(target=long_running_task)
    thread.start()

root = tk.Tk()
root.title("비동기 처리 예제")

label = tk.Label(root, text="버튼을 클릭하세요")
label.pack(pady=20)

button = tk.Button(root, text="긴 작업 시작", command=start_task)
button.pack(pady=10)

root.mainloop()

root.after()를 사용하면 메인 스레드에서 안전하게 UI를 업데이트할 수 있어!

📝 브라우저 이벤트 루프 동작 순서

console.log('1. 동기 코드');

setTimeout(() => {
    console.log('2. 태스크 큐 (매크로태스크)');
}, 0);

Promise.resolve().then(() => {
    console.log('3. 마이크로태스크 큐');
});

console.log('4. 동기 코드');

// 출력 순서:
// 1. 동기 코드
// 4. 동기 코드
// 3. 마이크로태스크 큐
// 2. 태스크 큐 (매크로태스크)

마이크로태스크가 매크로태스크보다 먼저 실행돼!

📝 requestAnimationFrame 예제

let position = 0;

function animate() {
    position += 1;
    element.style.left = position + 'px';
    
    if (position < 500) {
        requestAnimationFrame(animate);  // 다음 프레임에 다시 실행
    }
}

// 애니메이션 시작
requestAnimationFrame(animate);

이렇게 하면 브라우저의 리프레시 레이트에 맞춰 부드러운 애니메이션을 만들 수 있어!

📝 HTML + JavaScript 그림판

<!DOCTYPE html>
<html>
<head>
    <title>간단한 그림판</title>
    <style>
        canvas {
            border: 2px solid #667eea;
            cursor: crosshair;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button id="clearBtn">지우기</button>
        <label>색상: <input type="color" id="colorPicker" value="#000000"></label>
        <label>두께: <input type="range" id="lineWidth" min="1" max="20" value="2"></label>
    </div>
    <canvas id="canvas" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const clearBtn = document.getElementById('clearBtn');
        const colorPicker = document.getElementById('colorPicker');
        const lineWidth = document.getElementById('lineWidth');

        // 상태 관리
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        // 그리기 설정
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // 마우스 다운 이벤트
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            const rect = canvas.getBoundingClientRect();
            lastX = e.clientX - rect.left;
            lastY = e.clientY - rect.top;
        });

        // 마우스 무브 이벤트
        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;

            const rect = canvas.getBoundingClientRect();
            const currentX = e.clientX - rect.left;
            const currentY = e.clientY - rect.top;

            // 선 그리기
            ctx.strokeStyle = colorPicker.value;
            ctx.lineWidth = lineWidth.value;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(currentX, currentY);
            ctx.stroke();

            lastX = currentX;
            lastY = currentY;
        });

        // 마우스 업 이벤트
        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        // 마우스가 캔버스를 벗어났을 때
        canvas.addEventListener('mouseleave', () => {
            isDrawing = false;
        });

        // 지우기 버튼
        clearBtn.addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

        // 터치 이벤트 지원 (모바일)
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousedown', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        });

        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousemove', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        });

        canvas.addEventListener('touchend', (e) => {
            e.preventDefault();
            const mouseEvent = new MouseEvent('mouseup', {});
            canvas.dispatchEvent(mouseEvent);
        });
    </script>
</body>
</html>

📝 터치 이벤트 처리 예제

const element = document.getElementById('touchArea');

element.addEventListener('touchstart', (e) => {
    e.preventDefault();  // 기본 동작 방지 (스크롤 등)
    
    // 모든 터치 포인트 확인
    for (let i = 0; i < e.touches.length; i++) {
        const touch = e.touches[i];
        console.log(`터치 ${i}: (${touch.clientX}, ${touch.clientY})`);
    }
});

element.addEventListener('touchmove', (e) => {
    e.preventDefault();
    
    const touch = e.touches[0];  // 첫 번째 터치만 사용
    // 터치 위치로 뭔가 하기
    updatePosition(touch.clientX, touch.clientY);
});

element.addEventListener('touchend', (e) => {
    console.log('터치 종료');
});