// 2005년의 현실: 브라우저별로 다른 코드
function addClickEvent() {
  var button = document.getElementById('myButton');
  
  if (button.addEventListener) {
    // Firefox, Safari, Opera
    button.addEventListener('click', handleClick, false);
  } else if (button.attachEvent) {
    // Internet Explorer
    button.attachEvent('onclick', handleClick);
  } else {
    // 구형 브라우저
    button.onclick = handleClick;
  }
}

function handleClick() {
  var element = document.getElementById('content');
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

// jQuery의 마법: 한 줄로 끝
$('#myButton').click(function() {
  $('#content').toggle();
});

// 슬라이더 추가
$('.slider').bxSlider();

// 날짜 선택기 추가  
$('.datepicker').datepicker();

// 모달 창 추가
$('.modal-trigger').fancybox();

// 폼 검증 추가
$('#myForm').validate();

// 실제 jQuery 프로젝트의 모습 (2012년경)
$(document).ready(function() {
  // 1000줄의 초기화 코드...
  
  $('#button1').click(function() {
    // 100줄의 비즈니스 로직...
    updateUI();
    validateForm();
    sendAjaxRequest();
  });
  
  $('#button2').click(function() {
    // 또 다른 100줄의 로직...
    // 어디서 뭐가 변경되는지 추적 불가능
  });
  
  // 수백 개의 이벤트 핸들러들...
});

function updateUI() {
  // DOM 조작 코드 200줄...
  // 어떤 데이터가 어떤 UI를 업데이트하는지 불분명
}

// jQuery 방식: 모든 것이 뒤섞임
$('#saveButton').click(function() {
  var name = $('#nameInput').val();
  var email = $('#emailInput').val();
  
  // 검증 로직
  if (!name || !email) {
    $('#error').show();
    return;
  }
  
  // AJAX 요청
  $.post('/api/users', {name: name, email: email})
    .done(function() {
      $('#success').show();
      $('#userList').append('<li>' + name + '</li>');
    });
});

// AngularJS 방식: 관심사의 분리
angular.module('myApp', [])
  .controller('UserController', function($scope, UserService) {
    $scope.user = {};
    
    $scope.saveUser = function() {
      UserService.save($scope.user)
        .then(function() {
          $scope.message = '저장되었습니다';
          $scope.users.push($scope.user);
          $scope.user = {};
        });
    };
  })
  .service('UserService', function($http) {
    return {
      save: function(user) {
        return $http.post('/api/users', user);
      }
    };
  });

<!-- 마법 같은 동기화 -->
<input ng-model="user.name" />
<h1>안녕하세요, {{user.name}}님!</h1>

<!-- 입력하면 즉시 화면에 반영됨 -->

// AngularJS 프로젝트의 현실 (2014년경)
angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap'])
  .config(function($routeProvider, $locationProvider) {
    // 복잡한 라우팅 설정...
  })
  .controller('MainController', function($scope, $rootScope, $timeout, 
    UserService, AuthService, NotificationService, $q) {
    
    // 수십 개의 의존성들...
    // $scope의 프로퍼티들이 어디서 변경되는지 추적 불가능
    
    $scope.$watch('user.name', function(newVal, oldVal) {
      // 무한 루프 위험성...
    });
    
    // Digest cycle 성능 문제로 인한 $timeout 남용
    $timeout(function() {
      $scope.$apply();
    });
  });

// React의 혁신적 접근법
function TodoApp() {
  const [todos, setTodos] = useState([]);
  
  // 상태가 변경되면 전체를 다시 "그린다"
  // 하지만 실제로는 변경된 부분만 업데이트됨
  return (
    <div>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={() => toggleTodo(todo.id)}
        />
      ))}
    </div>
  );
}

// 재사용 가능한 컴포넌트
function Button({ children, onClick, variant = 'primary' }) {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// 컴포넌트 조합
function App() {
  return (
    <div>
      <Button onClick={handleSave}>저장</Button>
      <Button onClick={handleCancel} variant="secondary">취소</Button>
    </div>
  );
}

// React 생태계의 조합 (2016년경)
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import styled from 'styled-components';

const StyledButton = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
`;

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </BrowserRouter>
    </Provider>
  );
}

<!-- 1단계: 기존 HTML에 Vue 추가 -->
<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">클릭</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        message: '안녕하세요!'
      }
    },
    methods: {
      changeMessage() {
        this.message = '버튼이 클릭되었습니다!';
      }
    }
  }).mount('#app');
</script>

<!-- Vue.js의 직관적인 문법 -->
<template>
  <div class="todo-app">
    <h1>할 일 목록</h1>
    
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="새로운 할 일을 입력하세요"
    />
    
    <ul>
      <li 
        v-for="todo in todos" 
        :key="todo.id"
        :class="{ completed: todo.done }"
        @click="toggle(todo)"
      >
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          done: false
        });
        this.newTodo = '';
      }
    },
    toggle(todo) {
      todo.done = !todo.done;
    }
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  opacity: 0.6;
}
</style>

// Next.js 13+ App Router
// 파일 시스템 기반 라우팅 + 서버 컴포넌트
export default async function Page({ params }) {
  // 서버에서 실행되는 컴포넌트
  const data = await fetch(`/api/posts/${params.id}`);
  const post = await data.json();
  
  return (
    <div>
      <h1>{post.title}</h1>
      <ClientComponent data={post} />
    </div>
  );
}