JavaScript → React → Vue 교육 커리큘럼

 

전체 구조

주차 내용

1주	JavaScript 기초 (문법, 함수, 배열/객체)
2주	JavaScript 심화 (비동기, DOM, 모듈, ES6+)
3주	React 기초 ~ 실전
4주	Vue 기초 ~ 실전 + 마무리 비교

---

1주차 — JavaScript 기초

1회차 (2시간): 개발 환경 & 기본 문법

• Node.js, VSCode 셋업, 콘솔 실행/디버깅 방법
• 변수(var/let/const), 데이터 타입, 연산자
• 조건문(if, switch), 삼항연산자
• 실습: 간단한 콘솔 프로그램(성적 계산기 등)

2회차 (2시간): 함수와 반복문

• 반복문(for, while, for...of, for...in)
• 함수 선언/표현식, 화살표 함수(arrow function)
• 매개변수 기본값, 콜백 함수 개념
• 실습: 배열 순회하며 함수로 가공하는 문제

3회차 (2시간): 배열과 객체

• 배열 메서드: map, filter, reduce, forEach, find
• 객체 리터럴, 구조 분해 할당(destructuring)
• 스프레드/레스트 연산자(spread/rest)
• 실습: JSON 형태 데이터를 map/filter로 가공 (React/Vue에서 자주 쓰는 패턴)

---

2주차 — JavaScript 심화

4회차 (2시간): 스코프와 this

• 스코프(scope), 클로저(closure) 개념
• this 바인딩 (일반함수 vs 화살표함수 차이 — React/Vue에서 중요)
• 템플릿 리터럴
• 실습: this 동작 비교 예제

5회차 (2시간): 비동기 처리

• 콜백 → Promise → async/await 흐름
• fetch API로 데이터 가져오기
• 에러 처리(try/catch)
• 실습: 공개 API(JSONPlaceholder 등) 호출해서 콘솔에 출력

6회차 (2시간): DOM & 모듈 시스템

• DOM 선택/조작, 이벤트 리스너 (프레임워크 원리 이해용)
• ES6 모듈(import/export), npm 기본 사용법
• 번들러 개념(Vite 소개)
• 실습: Vite 프로젝트 생성 후 모듈 나눠서 import/export 연습

---

3주차 — React

7회차 (2시간): React 시작

• SPA 개념, JSX 문법
• 컴포넌트, props
• 실습: 정적 컴포넌트 여러 개 만들어서 조합

8회차 (2시간): 상태와 이벤트

• useState, 이벤트 핸들링
• 조건부 렌더링, 리스트 렌더링(key)
• 실습: 할 일 목록(Todo) 앱 만들기 (추가/삭제/완료 토글)

9회차 (2시간): useEffect & 실전 패턴

• useEffect(데이터 fetch, 생명주기)
• 폼 다루기(controlled input)
• 컴포넌트 간 데이터 전달(props drilling), 간단한 라우팅(react-router 소개)
• 실습: API 데이터 받아와서 렌더링하는 화면 만들기

---

4주차 — Vue

10회차 (2시간): Vue 시작

• Vue 앱 구조, 템플릿 문법(v-bind, v-on)
• 반응형 데이터(ref, reactive) — React의 useState와 비교
• 실습: React 8회차와 동일한 Todo 앱을 Vue로 재구현 (비교 학습)

11회차 (2시간): 디렉티브 & computed/watch

• v-if/v-show, v-for
• computed, watch
• props/emit으로 컴포넌트 통신
• 실습: 부모-자식 컴포넌트 간 이벤트 주고받기

12회차 (2시간): Vue 실전 + 전체 마무리

• 데이터 fetch(비동기 처리, React의 useEffect와 비교)
• Vue Router 간단 소개
• React vs Vue 문법/개념 비교 정리
• 실습: 프로젝트에서 쓸 실제 화면 하나를 미니 버전으로 함께 구현

---

운영 팁

• 3주차/4주차에서 같은 예제(Todo 앱, API fetch 화면)를 React와 Vue로 각각 만들게 하면 비교 학습 효과가 커집니다.
• 실제 투입될 프로젝트가 React/Vue 중 한쪽 비중이 크다면, 4주차 시간을 그쪽에 더 배분하는 것도 방법입니다.
• 24시간 안에 JS+React+Vue를 다루는 것은 "숙련"이 아니라 "읽고 따라 쓸 수 있는 수준"이 목표라는 점을 기대치로 맞춰두는 것이 좋습니다.
• 실무 투입 후 1~2주는 코드리뷰/멘토링을 병행하는 것을 권장합니다.
•  

JS_React_Vue_교육커리큘럼.md.pdf

0.25MB