jjs2fy shared this post · 2h ago
양실장의 바이브코딩대학

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

드디어 커뮤니티 오픈!
저랑 수다 떨고싶으신 분들, AX 고민있으신 분들!
아래 링크로 카카오 그룹챗 들어오세용
https://open.kakao.com/o/g5EIiXEi
(가끔 삘 꽂히면 강의 풀버전 링크 뿌릴 예정)

바이브코딩대학 카카오 채널 친구 추가하고, 뿌리강의 치팅시트 요청하세요! 👉 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 결론 & 다음 강의 예고 (백엔드)

#바이브코딩 #프론트엔드

127.8K