목표: React에서 배운 개념을 Vue 문법으로 다시 구현하며 비교 학습하고, 실무에 쓸 화면을 직접 만들어본다.10회차 (2시간): Vue 시작0:00~0:20 | 프로젝트 생성npm create vite@latest my-vue-app -- --template vuecd my-vue-appnpm installnpm run dev0:20~0:50 | 템플릿 문법v-bind(속성 연결, :로 축약) / v-on(이벤트 연결, @로 축약) 클릭Composition API( {{ count }}템플릿에서는 .value 생략, script에서는 .value로 접근1:20~2:00 | 실습: Todo 앱 (React 8회차와 동일 예제) 추가 {{ todo..

목표: 컴포넌트 기반 개발 방식을 이해하고, 상태 관리와 API 연동까지 직접 구현할 수 있다.7회차 (2시간): React 시작0:00~0:20 | SPA 개념, 프로젝트 생성SPA(Single Page Application): 페이지 전체를 다시 불러오지 않고 필요한 부분만 갱신npm create vite@latest my-app -- --template reactcd my-appnpm installnpm run dev0:20~0:50 | JSX 문법HTML처럼 보이지만 JS 안에서 사용하는 문법. {}로 JS 표현식 삽입const name = '민수';function App() { return 안녕하세요, {name}님;}0:50~1:20 | 컴포넌트함수형 컴포넌트: 함수 하나 = 화면의 조각 하..

목표: 비동기 처리와 모듈 시스템을 이해하고, React/Vue 학습에 필요한 사전 개념(this, 클로저)을 정리한다.4회차 (2시간): 스코프와 this0:00~0:30 | 스코프전역 스코프 / 함수 스코프 / 블록 스코프({} 단위, let·const는 블록 스코프 적용)if (true) { let x = 10;}console.log(x); // 에러 - 블록 밖에서 접근 불가0:30~1:00 | 클로저함수가 자신이 선언될 때의 스코프를 기억하는 것. 상태를 유지하는 함수를 만들 때 사용function makeCounter() { let count = 0; return function () { count++; return count; };}const counter = makeCou..

목표: JS 문법에 익숙해지고, 함수/배열/객체를 다루는 기본기를 갖춘다.1회차 (2시간): 개발 환경 & 기본 문법0:00~0:20 | Node.js 설치, VSCode 세팅Node.js LTS 설치 → 터미널에서 node -v, npm -v로 확인VSCode 설치 + 확장 프로그램: ESLint(문법 오류 검사), Prettier(코드 스타일 자동 정리)설정에서 "Format on Save" 켜두기0:20~0:40 | 콘솔 실행, console.log실행 방법 2가지: node 파일명.js / 브라우저 콘솔(F12 → Console)console.log('Hello, JavaScript!');console.log('score:', 90); // 라벨 붙여서 출력하는 습관0:40~1:10 | 변수, 데..

목표: React에서 배운 개념을 Vue 문법으로 다시 구현하며 비교 학습하고, 실무에 쓸 화면을 직접 만들어본다.10회차 (2시간): Vue 시작학습목표Vue 앱의 구조와 템플릿 문법을 이해한다.ref/reactive로 반응형 데이터를 다룰 수 있다.시간 배분시간 내용0:00~0:20Vue 프로젝트 생성(Vite), 폴더 구조0:20~0:50템플릿 문법(v-bind, v-on), Options API vs Composition API 소개0:50~1:20반응형 데이터(ref, reactive) — useState와 비교 설명1:20~2:00실습: React 8회차에서 만든 Todo 앱을 Vue로 재구현예제 코드 추가 {{ todo.text }} ..

목표: 컴포넌트 기반 개발 방식을 이해하고, 상태 관리와 API 연동까지 직접 구현할 수 있다.7회차 (2시간): React 시작학습목표SPA와 컴포넌트 개념을 이해한다.JSX 문법으로 화면을 구성할 수 있다.props로 컴포넌트 간 데이터를 전달할 수 있다.시간 배분시간 내용0:00~0:20SPA(Single Page Application) 개념, React 프로젝트 생성(Vite)0:20~0:50JSX 문법 (HTML과의 차이, 중괄호 표현식)0:50~1:20컴포넌트 개념, 함수형 컴포넌트 작성법1:20~1:50props로 데이터 전달, props 구조 분해1:50~2:00실습: 정적 컴포넌트 여러 개 만들어서 조합예제 코드function UserCard({ name, age }) { return ..