01-1 Vue.js란 무엇인가?
- Vue.js란?
- 프레임워크 시장 속에서 뷰의 위치와 성장성
- 뷰의 장점
01-2 Vue.js의 특징
- UI 화면단 라이브러리
- 컴포넌트 기반 프레임워크
- 리액트와 앵귤러의 장점을 가진 프레임워크
02-1 뷰 학습을 위한 개발 환경 설정하기
- 크롬 브라우저 설치하기
- 아톰 에디터 설치하기
- 아톰 테마
- 아톰 패키지
- 노드제이에스 설치하기
- 뷰 개발자 도구 설치하기
02-2 Hello Vue.js! 프로젝트 만들기
- 뷰 시작하기
- 크롬 개발자 도구로 코드 확인하기
- 뷰 개발자 도구로 코드 확인하기
- 뷰 개발자 도구 사용 방법
- 인스턴스 & 컴포넌트
03-1 뷰 인스턴스
- 뷰 인스턴스의 정의와 속성
- 뷰 인스턴스 옵션 속성
- 뷰 인스턴스의 유효 범위
- 뷰 인스턴스 라이프 사이클
03-2 뷰 컴포넌트
- 컴포넌트란?
- 컴포넌트 등록하기
- 지역 컴포넌트와 전역 컴포넌트의 차이
03-3 뷰 컴포넌트 통신
- 컴포넌트 간 통신과 유효 범위
- 상·하위 컴포넌트 관계
- 상위에서 하위 컴포넌트로 데이터 전달하기
- 하위에서 상위 컴포넌트로 이벤트 전달하기
- 같은 레벨의 컴포넌트 간 통신
- 관계 없는 컴포넌트 간 통신 - 이벤트 버스
- 라우터 & HTTP 통신
04-1 뷰 라우터
- 라우팅이란?
- 뷰 라우터
- 네스티드 라우터
- 네임드 뷰
04-2 뷰 HTTP 통신
- 웹 앱의 HTTP 통신 방법
- 뷰 리소스
- 액시오스
- 템플릿 & 프로젝트 구성
05-1 뷰 템플릿
- 뷰 템플릿이란?
- 데이터 바인딩
- 자바스크립트 표현식
- 디렉티브
- 이벤트 처리
- 고급 템플릿 기법
05-2 뷰 프로젝트 구성 방법
- HTML 파일에서 뷰 코드 작성 시의 한계점
- 싱글 파일 컴포넌트 체계
- 뷰 CLI
- 뷰 CLI로 프로젝트 생성하기
- 뷰 로더
06-1 할 일 관리 앱 살펴보기
- 왜 할 일 관리 앱을 만들어야 하나?
- 할 일 관리 앱 살펴보기
- 애플리케이션 컴포넌트 구조도
06-2 프로젝트 생성하고 구조 확인하기
- 뷰 CLI를 이용한 프로젝트 생성
- 프로젝트 초기 설정
06-3 컴포넌트 생성하고 등록하기
- 컴포넌트 생성
- 컴포넌트 등록
06-4 컴포넌트 내용 구현하기
- 애플리케이션 제목을 보여주는 TodoHeader
- 컴포넌트
- 할 일을 입력하는 TodoInput 컴포넌트
- 저장된 할 일 목록을 표시하는 TodoList
- 컴포넌트
- TodoList.vue에 할 일 삭제 기능 추가하기
- 모두 삭제하기 버튼을 포함하는 TodoFooter
- 컴포넌트
06-5 기존 애플리케이션 구조의 문제점 해결하기
- 현재 애플리케이션 구조의 문제점
- 문제 해결을 위한 애플리케이션 구조 개선
- props와 이벤트 전달을 이용해 할 일 입력 기능
- 개선하기
- 이벤트 전달을 이용해 Clear All 버튼 기능
- 개선하기
- 이벤트 전달을 이용해 할 일 삭제 기능 개선하기
06-6 더 나은 사용자 경험을 위한 기능 추가하기
- 뷰 애니메이션
- 뷰 모달
07-1 뷰 중·고급 레벨로 올라가기 위한 지식
- Vuex
- 뷰의 반응성
- 서버 사이드 렌더링
07-2 뷰 개발을 위한 웹팩
- 웹팩이란?
- 웹팩의 주요 속성
- 웹팩 데브 서버
- webpack-simple 프로젝트의 웹팩 설정
- 파일 분석
07-3 뷰 개발을 위한 ES6
- ES6란?
- const와 let 예약어
- 블록의 유효 범위
- 화살표 함수
- Import와 Export
07-4 뷰 CLI에서 사용하는 NPM
- NPM 소개
- NPM 설치 명령어
- 전역 설치와 지역 설치
- NPM 커스텀 명령어
지금 당장 실무에서 써먹는 Vue.js
- Tip 1 뷰와 제이쿼리를 같이 사용해도 되나요?
- Tip 2 개발 기간이 너무 짧은데 기존 레거시 코드에 어떻게 뷰를 바로 적용하죠?
- Tip 3 뷰에 UI 라이브러리와 차트를 어떻게 연동할까요?
- Tip 4 뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?