# ═══════════════════════════════════════════
# CoffeeScript — 2010년대 초반의 힙스터 언어
# ═══════════════════════════════════════════

# 변수 선언: var 같은 거 없음. 자동으로 var 붙여줌
name = "Kim"
age = 25
isStudent = true

# 함수: -> 만 있으면 됨
square = (x) -> x * x
cube = (x) -> x * x * x

# 여러 줄 함수
greet = (name) ->
  greeting = "안녕, #{name}!"
  console.log greeting
  greeting  # 마지막 표현식이 자동 리턴됨

# 기본값 매개변수
fill = (container, liquid = "coffee") ->
  "#{container}에 #{liquid} 채우는 중..."

# 배열 순회
foods = ['짜장면', '짬뽕', '탕수육']
eat food for food in foods

# 조건문
if age >= 18
  console.log "성인"
else
  console.log "미성년"

# 후위 조건문
console.log "성인" if age >= 18
console.log "위험!" unless safe

# 존재 연산자 (Existential Operator)
street = person?.address?.street  # null safety!
# 이게 2010년에!! Optional chaining의 원조!!

# 범위
numbers = [1..5]      # [1, 2, 3, 4, 5]
partial = [1...5]     # [1, 2, 3, 4] (마지막 제외)

# 배열 컴프리헨션
squares = (x * x for x in [1, 2, 3, 4, 5])
evens = (x for x in [1..10] when x % 2 is 0)

# 디스트럭처링
[first, rest...] = [1, 2, 3, 4, 5]
{name, age} = person

# 클래스
class Animal
  constructor: (@name, @sound) ->
    # @name은 this.name의 축약

  speak: ->
    "#{@name}가 #{@sound} 함"

class Dog extends Animal
  constructor: (name) ->
    super name, "멍멍"

  fetch: (item) ->
    "#{@name}가 #{item}을 물어옴"

# 문자열 보간
message = "#{name}님은 #{age}세입니다"

# 여러 줄 문자열
html = """
  <div class="card">
    <h3>#{name}</h3>
    <p>#{age}세</p>
  </div>
"""

# this 바인딩 (fat arrow)
class Button
  constructor: ->
    @count = 0
    document.getElementById('btn').addEventListener 'click', =>
      @count++  # => 덕분에 this가 Button 인스턴스를 가리킴
      console.log @count

// ═══════════════════════════════════════════
// 같은 코드의 JavaScript ES5 버전
// 이렇게 써야 했음...
// ═══════════════════════════════════════════

// 변수 선언
var name = "Kim";
var age = 25;
var isStudent = true;

// 함수
var square = function(x) { return x * x; };
var cube = function(x) { return x * x * x; };

// 여러 줄 함수
var greet = function(name) {
    var greeting = "안녕, " + name + "!";
    console.log(greeting);
    return greeting; // 명시적 return 필요
};

// 기본값 매개변수 (우회 방법)
var fill = function(container, liquid) {
    if (liquid == null) { liquid = "coffee"; } // 수동
    return container + "에 " + liquid + " 채우는 중...";
};

// 배열 순회
var foods = ['짜장면', '짬뽕', '탕수육'];
for (var i = 0; i < foods.length; i++) {
    eat(foods[i]);
}

// null safety? 그런 거 없음
var street;
if (person != null &&
    person.address != null &&
    person.address.street != null) {
    street = person.address.street;
}
// vs CoffeeScript: street = person?.address?.street

// 클래스 (프로토타입 체인)
function Animal(name, sound) {
    this.name = name;
    this.sound = sound;
}

Animal.prototype.speak = function() {
    return this.name + "가 " + this.sound + " 함";
};

function Dog(name) {
    Animal.call(this, name, "멍멍");
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.fetch = function(item) {
    return this.name + "가 " + item + "을 물어옴";
};

// 문자열 보간? 없음. + 연산자로 이어붙이기
var message = name + "님은 " + age + "세입니다";

// this 바인딩 (bind 또는 that = this 패턴)
function Button() {
    var self = this; // that/self 패턴
    this.count = 0;
    document.getElementById('btn').addEventListener('click', function() {
        self.count++; // this가 아니라 self를 써야 함
        console.log(self.count);
    });
}

// CoffeeScript → ES6/ES2015+ 기능 계보

// 1. 화살표 함수
// CoffeeScript: -> (thin arrow), => (fat arrow, this 바인딩)
// ES6: => (항상 this 바인딩)
const add = (a: number, b: number) => a + b;

// 2. 클래스
// CoffeeScript: class, extends, super, constructor
// ES6: 거의 동일한 문법
class Dog extends Animal {
    constructor(name: string) {
        super(name, "멍멍");
    }
}

// 3. 디스트럭처링
// CoffeeScript: {name, age} = person, [first, rest...] = arr
// ES6: 거의 동일
const { name, age } = person;
const [first, ...rest] = arr;

// 4. 기본 매개변수
// CoffeeScript: fill = (container, liquid = "coffee") ->
// ES6: 동일한 문법
function fill(container: string, liquid = "coffee") {
    return `${container}에 ${liquid} 채우는 중`;
}

// 5. 전개 연산자
// CoffeeScript: args...
// ES6: ...args
function sum(...numbers: number[]) {
    return numbers.reduce((a, b) => a + b, 0);
}

// 6. 템플릿 리터럴
// CoffeeScript: "Hello, #{name}"
// ES6: `Hello, ${name}`
const greeting = `Hello, ${name}`;

// 7. Optional Chaining (ES2020)
// CoffeeScript: person?.address?.street (2010)
// ES2020: person?.address?.street (2020)
// 10년 걸림 ㅋㅋ
const street = person?.address?.street;

// 8. Nullish Coalescing (ES2020)
// CoffeeScript: value ? "default"
// ES2020: value ?? "default"
const displayName = user.name ?? "익명";

// 9. for...of
// CoffeeScript: for item in array
// ES6: for (const item of array)
for (const item of array) {
    console.log(item);
}

2015년, ES6 (ES2015) 발표.

ES6가 CoffeeScript의 장점을 대부분 흡수함:
✅ 화살표 함수 → ES6 화살표 함수
✅ 클래스 문법 → ES6 class
✅ 디스트럭처링 → ES6 디스트럭처링
✅ 기본 매개변수 → ES6 기본 매개변수
✅ 전개 연산자 → ES6 rest/spread
✅ 템플릿 리터럴 → ES6 템플릿 리터럴
✅ 모듈 시스템 → ES6 import/export

CoffeeScript만의 장점이 거의 사라짐.
게다가 CoffeeScript는 단점이 있었음:

1. 컴파일 단계 필요 (CoffeeScript → JavaScript 변환)
2. 소스맵 디버깅이 불편함
3. 들여쓰기 기반 문법이 호불호 갈림
4. JavaScript 지식이 여전히 필요함 (디버깅할 때)
5. TypeScript라는 더 나은 대안이 등장함

TypeScript가 결정타였음:
- CoffeeScript: "JavaScript를 더 예쁘게 쓰자" (문법 개선)
- TypeScript: "JavaScript를 더 안전하게 쓰자" (타입 시스템)

개발자들이 원한 건 예쁜 코드가 아니라 안전한 코드였음.

// 2010년, jQuery로 앱 만들기의 현실
// (스파게티 코드의 극한)

$(function() {
    var users = [];
    var currentFilter = 'all';
    var sortBy = 'name';

    // 데이터 로딩
    function loadUsers() {
        $.get('/api/users', function(data) {
            users = data;
            renderUsers();
            updateStats();
            bindEvents(); // 매번 이벤트를 다시 바인딩해야 함
        });
    }

    // 렌더링
    function renderUsers() {
        var filtered = users.filter(function(u) {
            if (currentFilter === 'active') return u.active;
            if (currentFilter === 'inactive') return !u.active;
            return true;
        });

        filtered.sort(function(a, b) {
            return a[sortBy] > b[sortBy] ? 1 : -1;
        });

        var html = '';
        for (var i = 0; i < filtered.length; i++) {
            html += '<tr data-id="' + filtered[i].id + '">';
            html += '<td>' + filtered[i].name + '</td>';
            html += '<td>' + filtered[i].email + '</td>';
            html += '<td>' + (filtered[i].active ? '활성' : '비활성') + '</td>';
            html += '<td><button class="edit-btn">수정</button>';
            html += '<button class="delete-btn">삭제</button></td>';
            html += '</tr>';
        }
        $('#user-table tbody').html(html);
    }

    // 이벤트 바인딩 (지옥)
    function bindEvents() {
        $('.edit-btn').off('click').on('click', function() {
            var id = $(this).closest('tr').data('id');
            var user = users.find(function(u) { return u.id === id; });
            // 수정 모달 열기...
            // 수정 후 서버 저장...
            // 성공하면 로컬 데이터 업데이트...
            // UI 다시 렌더링...
            // 이벤트 다시 바인딩...
            // 이 무한 루프를 벗어날 수 없음
        });

        // 비슷한 패턴이 삭제, 필터, 정렬, 페이지네이션마다 반복됨
        // 코드가 500줄, 1000줄, 2000줄...
        // 어디서 뭘 하는지 아무도 모르게 됨
    }

    loadUsers();
});

// Backbone.js로 같은 앱 만들기

// ═══════ Model (데이터) ═══════
var User = Backbone.Model.extend({
    urlRoot: '/api/users',

    defaults: {
        name: '',
        email: '',
        active: true
    },

    validate: function(attrs) {
        if (!attrs.name) return "이름은 필수임";
        if (!attrs.email) return "이메일은 필수임";
    },

    toggleActive: function() {
        this.set('active', !this.get('active'));
        this.save(); // 자동으로 PUT /api/users/:id 호출
    }
});

// ═══════ Collection (데이터 목록) ═══════
var UserCollection = Backbone.Collection.extend({
    model: User,
    url: '/api/users',

    active: function() {
        return this.where({ active: true });
    },

    inactive: function() {
        return this.where({ active: false });
    },

    comparator: 'name' // 자동 정렬
});

// ═══════ View (화면) ═══════
var UserRowView = Backbone.View.extend({
    tagName: 'tr',

    // 이벤트 선언 (jQuery의 이벤트 위임 자동 적용)
    events: {
        'click .edit-btn': 'onEdit',
        'click .delete-btn': 'onDelete',
        'click .toggle-btn': 'onToggle'
    },

    // 모델 변경 시 자동 리렌더링
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function() {
        this.$el.html(
            '<td>' + this.model.get('name') + '</td>' +
            '<td>' + this.model.get('email') + '</td>' +
            '<td>' + (this.model.get('active') ? '활성' : '비활성') + '</td>' +
            '<td>' +
            '  <button class="edit-btn">수정</button>' +
            '  <button class="delete-btn">삭제</button>' +
            '  <button class="toggle-btn">토글</button>' +
            '</td>'
        );
        return this; // 체이닝 지원
    },

    onEdit: function() {
        // 수정 로직
    },

    onDelete: function() {
        this.model.destroy(); // DELETE /api/users/:id + UI 자동 제거
    },

    onToggle: function() {
        this.model.toggleActive(); // 모델 변경 → render 자동 호출
    }
});

// ═══════ Router (URL 라우팅) ═══════
var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'index',
        'users': 'userList',
        'users/:id': 'userDetail'
    },

    userList: function() {
        var users = new UserCollection();
        users.fetch(); // GET /api/users
        var view = new UserListView({ collection: users });
        $('#app').html(view.render().el);
    },

    userDetail: function(id) {
        var user = new User({ id: id });
        user.fetch(); // GET /api/users/:id
        var view = new UserDetailView({ model: user });
        $('#app').html(view.render().el);
    }
});

// 앱 시작
var router = new AppRouter();
Backbone.history.start({ pushState: true });

# CoffeeScript + Backbone.js
# 2012년의 "최신 스택"

class User extends Backbone.Model
  urlRoot: '/api/users'

  defaults:
    name: ''
    email: ''
    active: true

  validate: (attrs) ->
    "이름은 필수임" unless attrs.name
    "이메일은 필수임" unless attrs.email

  toggleActive: ->
    @set 'active', not @get('active')
    @save()

  fullName: ->
    "#{@get 'firstName'} #{@get 'lastName'}"

class UserCollection extends Backbone.Collection
  model: User
  url: '/api/users'
  comparator: 'name'

  active: -> @where active: true
  inactive: -> @where active: false

class UserRowView extends Backbone.View
  tagName: 'tr'

  events:
    'click .edit-btn': 'onEdit'
    'click .delete-btn': 'onDelete'

  initialize: ->
    @listenTo @model, 'change', @render
    @listenTo @model, 'destroy', @remove

  render: ->
    @$el.html """
      <td>#{@model.get 'name'}</td>
      <td>#{@model.get 'email'}</td>
      <td>
        <button class="edit-btn">수정</button>
        <button class="delete-btn">삭제</button>
      </td>
    """
    this

  onEdit: ->
    # 수정 로직

  onDelete: ->
    @model.destroy()

# CoffeeScript의 깔끔한 문법 + Backbone의 구조
# = 2012년 최고의 DX

// Backbone의 한계 — 왜 React에 밀렸나

// 1. 뷰 업데이트가 수동
// Backbone은 "무엇이 변했는지"는 알려주지만
// "어떻게 업데이트할지"는 개발자가 직접 해야 함

var UserView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        // 모델이 바뀌면 전체를 다시 렌더링
        // 성능 최적화? 직접 해야 함
    },

    render: function() {
        // 전체 HTML을 교체 — 비효율적
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

// React는 Virtual DOM으로 이 문제를 자동 해결함
// "변경된 부분만 업데이트" — 개발자가 신경 쓸 필요 없음

// 2. 보일러플레이트 코드가 많음
// Model, Collection, View를 각각 정의해야 하고
// 이벤트 바인딩, 렌더링, 정리(cleanup)를 수동으로 해야 함

// 3. 중첩 뷰 관리의 어려움
var ParentView = Backbone.View.extend({
    render: function() {
        // 자식 뷰를 수동으로 생성, 렌더링, 삽입
        this.childView1 = new ChildView1();
        this.childView2 = new ChildView2();
        this.$('.child1-container').html(this.childView1.render().el);
        this.$('.child2-container').html(this.childView2.render().el);
        return this;
    },

    // 메모리 누수 방지를 위해 수동으로 정리
    remove: function() {
        this.childView1.remove();
        this.childView2.remove();
        Backbone.View.prototype.remove.call(this);
    }
});

// React에서는:
// function Parent() {
//     return <><Child1 /><Child2 /></>;
// }
// 끝. 정리도 React가 알아서 함.

// 4. 상태 관리의 한계
// 복잡한 앱에서 Model 간의 의존성이 생기면
// 이벤트가 연쇄적으로 발생하면서 추적이 어려워짐
// (Flux/Redux가 이 문제를 해결하려고 나온 거임)

// Backbone → React 변환 예시

// ═══════ Backbone 방식 ═══════
// Model
var Todo = Backbone.Model.extend({
    defaults: { text: '', done: false },
    toggle: function() {
        this.set('done', !this.get('done'));
    }
});

// Collection
var TodoList = Backbone.Collection.extend({
    model: Todo,
    remaining: function() {
        return this.where({ done: false });
    }
});

// View (100줄+)
var TodoView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click .toggle': 'toggleDone',
        'dblclick .view': 'startEdit',
        'click .destroy': 'clear',
        'keypress .edit': 'updateOnEnter',
        'blur .edit': 'close'
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.toggleClass('done', this.model.get('done'));
        return this;
    },
    toggleDone: function() { this.model.toggle(); },
    startEdit: function() { /* ... */ },
    close: function() { /* ... */ },
    updateOnEnter: function(e) { /* ... */ },
    clear: function() { this.model.destroy(); }
});

// ═══════ React 방식 ═══════
// 위의 Model + Collection + View가 이걸로 끝남

interface Todo {
    id: number;
    text: string;
    done: boolean;
}

function TodoItem({ todo, onToggle, onDelete }: {
    todo: Todo;
    onToggle: (id: number) => void;
    onDelete: (id: number) => void;
}) {
    const [editing, setEditing] = useState(false);
    const [editText, setEditText] = useState(todo.text);

    return (
        <li className={todo.done ? 'done' : ''}>
            <input
                type="checkbox"
                checked={todo.done}
                onChange={() => onToggle(todo.id)}
            />
            {editing ? (
                <input
                    value={editText}
                    onChange={e => setEditText(e.target.value)}
                    onBlur={() => setEditing(false)}
                    onKeyDown={e => e.key === 'Enter' && setEditing(false)}
                />
            ) : (
                <span onDoubleClick={() => setEditing(true)}>
                    {todo.text}
                </span>
            )}
            <button onClick={() => onDelete(todo.id)}>삭제</button>
        </li>
    );
}

# CoffeeScript 2 (2017) — ES6 호환 시도
# ES2015+ 문법으로 컴파일되도록 업데이트

# async/await 지원
fetchUser = (id) ->
  response = await fetch "/api/users/#{id}"
  await response.json()

# JSX 지원 (React와 함께 쓸 수 있음)
# 근데 이쯤 되면 "그냥 TypeScript 쓰면 안 됨?" 이라는 생각이...

# 모듈 시스템
import { useState, useEffect } from 'react'

# 태그된 템플릿 리터럴
sql = (strings, values...) ->
  # ...

query = sql"SELECT * FROM users WHERE id = #{userId}"

// CoffeeScript의 유산은 생각보다 많이 남아있음

// 1. Ruby/Python 스타일 문법의 영향
// CoffeeScript가 "들여쓰기 기반 문법도 JS에서 통한다"를 증명
// → Pug (HTML 템플릿), Sass (CSS), Yaml 등에 영향

// 2. Elm, PureScript, ReasonML
// "JavaScript로 컴파일되는 더 나은 언어" 패러다임의 원조
// CoffeeScript가 열어준 길을 타입 안전 언어들이 이어감

// 3. LiveScript
// CoffeeScript의 후속작. 더 함수형에 가까움
// 역시 사멸했지만 아이디어는 남음

// 4. TypeScript 자체도 CoffeeScript의 영향
// "JavaScript의 상위 집합" 개념
// CoffeeScript: JS + 더 나은 문법
// TypeScript: JS + 타입 시스템
// 접근 방식은 다르지만 "JS를 개선하자"는 동기는 같음

// 5. 현대 JavaScript 자체
// ES6 화살표 함수, 클래스, 디스트럭처링, 템플릿 리터럴...
// 이것들의 상당 부분이 CoffeeScript에서 영감을 받음
// CoffeeScript는 죽었지만 그 정신은 JavaScript 자체에 살아있음

╔════════════════════════════════════════════════════════════════╗
║                                                                ║
║     ⚘ R.I.P. CoffeeScript & Backbone.js ⚘                   ║
║        CoffeeScript: 2009 - 2015                               ║
║        Backbone.js: 2010 - 2016                                ║
║                                                                ║
║    "ES6가 오기 전, 우리가 미래를 보여줬음.                     ║
║     미래가 직접 오면서 우리는 필요 없어졌지만                  ║
║     화살표 함수 칠 때마다 우리를 기억해주면 좋겠음."           ║
║                                                                ║
║    — 같은 사람(Jeremy Ashkenas)이 만든 두 전설                 ║
║                                                                ║
╚════════════════════════════════════════════════════════════════╝