비개발자 바이브코더를 위해 만든, 가볍게 들어도 깊게 남는 프론트엔드 기본 지식

바이브코딩대학 카카오 채널 친구 추가하고, 뿌리강의 치팅시트 요청하세요! 👉 https://bit.ly/48EPjfA 단순한 문서 공유 시스템이었던 초창기 웹이 어떻게 지금의 복잡한 프론트엔드 생태계가 되었는지, 그 거대한 흐름을 한 편의 지도로 그려 드립니다. 이 영상을 끝까지 보고 나면, AI가 짜주는 코드의 원리가 보이고 더 정확한 질문을 던질 수 있는 '뿌리' 있는 개발자가 될 것입니다. 바이브코딩대학 웹사이트👉https://bit.ly/4sh1g2d 00:00 인트로 (외우지 말고 이해해야 하는 이유) 00:33 인터넷 vs 웹 (인프라 vs 서비스 개념 차이) 01:08 웹의 탄생 (팀 버너스리 & 하이퍼링크) 01:47 웹 3대 기술 (HTML / URL / HTTP 구조 이해) 03:23 초기 웹 (텍스트 기반, 기능 없음) 03:52 CSS (디자인 문제 해결, 구조/표현 분리) 05:31 JavaScript (이벤트, DOM, 인터랙션 시작) 07:45 브라우저 전쟁 (크로스브라우저 문제) 10:12 렌더링 과정 (파싱 → 렌더트리 → 레이아웃 → 페인트 + 리플로우) 12:01 jQuery (DOM 조작 통일, 개발 편의성 혁명) 12:54 React (상태 기반 UI, 추상화/재사용/상태관리) 14:24 프론트엔드 변화 (퍼블리셔 → 개발자 전환) 14:58 Node.js / NPM (JS 생태계 확장, 패키지 관리) 17:01 빌드 등장 배경 (코드 관리 문제 발생) 18:02 빌드 과정 (트랜스파일링 / 번들링 / 트리쉐이킹 / 최적화) 20:00 MPA (기존 웹 구조, 페이지 새로고침 방식) 21:16 SPA (싱글 페이지, 앱처럼 동작, CSR 개념) 22:06 프론트엔드 역할 확장 (UI + 상태 + API 통신) 23:02 API 구조 (프론트 ↔ 백엔드 데이터 흐름 변화) 24:05 SPA 단점 (초기 로딩 느림 + SEO 문제) 25:29 SSR / CSR / 하이드레이션 (렌더링 방식 비교) 26:12 Next.js & 혼합 렌더링 (현대 구조) 26:50 트레이드오프 (SPA vs SSR 핵심 개념 정리) 27:12 전체 흐름 요약 28:25 결론 & 다음 강의 예고 (백엔드) #바이브코딩 #프론트엔드