[바이브코딩 배우기 기초지식] 자바스크립트 프레임워크 30년, 14분 정리 · jQuery에서 서버 부품까지

자바스크립트 개발 프레임워크의 변화의 흐름을 한번에 짚어 봤습니다. 문서를 직접 뜯어고치던 시절에서 jQuery 한 줄로, 다시 React와 Vue가 화면을 부품으로 나누고, 지금은 서버가 화면을 그려 보내는 데까지. 수십 개가 나왔다 사라졌지만 이들을 구분하는 기준은 셋이었습니다. ━━━━━━━━━━━━━━━━ ■ 한 줄로 줄이면 화면을 누가 그리나 · 지금 모습을 어디에 두나 · 그러려고 브라우저가 받아야 하는 코드가 얼마나 무거운가. 30년의 변천사는 이 셋 가운데 무엇을 쥐고 무엇을 놓을지 고른 기록이고, 결말은 「되돌아옴」입니다. ■ 목차 0:00 버튼 하나, 서른 해 — 오늘 볼 것 0:47 프레임워크가 없던 시절 — 문서를 직접 뜯어고치다 1:52 AJAX — 페이지를 새로 받지 않는다 2:41 jQuery — 한 줄로 시키다 4:10 1세대 프레임워크 — 데이터만 바꾸면 화면이 따라온다 5:06 React — 부품으로 나누고, 한 방향으로만 흐른다 6:51 Vue와 Angular — 삼파전이 되다 7:57 도구 지옥 — 설정만 하루 9:22 서버로 되돌아가다 10:17 컴파일러와 가벼움 — 틀 자체를 없애다 11:18 지금 — 섬과 서버 부품 12:35 정리 — 새 이름이 나왔을 때 무엇을 물어볼까 ■ 이 영상에 나오는 도구 jQuery · Prototype · MooTools · Backbone.js · Knockout · Ember.js · AngularJS · React · Vue · Angular · Svelte · Solid · Preact · Alpine.js · Next.js · Nuxt · Astro · webpack · Babel · Vite · TypeScript · Redux · Node.js ■ 이 영상에 나오는 말 DOM · 문서 객체 모형 · XMLHttpRequest · AJAX · 단일 페이지 앱(SPA) · 양방향 데이터 바인딩 · 컴포넌트 · 단방향 데이터 흐름 · 가상 DOM(Virtual DOM) · JSX · 상태 · 훅(Hooks) · 상태 관리 · 번들러 · 트랜스파일러 · 정적 타입 · 서버 사이드 렌더링(SSR) · 하이드레이션 · 정적 사이트 생성(SSG) · 컴파일러 접근 · 파일 기반 라우팅 · 아일랜드 아키텍처 · 서버 컴포넌트 · 번들 크기 ━━━━━━━━━━━━━━━━ 사진·로고 출처: Wikimedia Commons CERN · CC BY-SA 3.0 · Darcy Padilla · CC BY-SA 3.0 · Emma Twersky · CC BY 4.0 · Evan You · MIT · Evan You, https://github.com/yyx990803 · CC BY 4.0 · Indolering · CC0 · JS Conf · CC BY 2.0 · Mardus · CC BY-SA 4.0 · Matthew Johnston (https://deskofm.com) · CC0 · Michael Hicks · CC BY 2.0 · Rich Harris · MIT · Ryan Dahl · MIT · Tim 'Avatar' Bartel · CC BY 2.5 · Vercel · CC BY-SA 4.0 · AngularJS · Facebook · jQuery Team · Microsoft · OpenJS Foundation · Public domain #바이브코딩기초지식 #자바스크립트 #프론트엔드 #React #개발자 #IT교양 #컴퓨터역사 #웹개발