안녕, 뷰(Vue)

A. 정의

Vue.js 란, Javascript framework 중의 하나 

 

B. 왜 쓰나요?

    1. 편리한 데이터 바인딩과 상태 관리

    2. 빠른 개발, 쉬운 유지보수

    3. SPA (Single Page Application) 의 장점

           ex) index.html 하나의 파일로 서비스 !?

 

C. SPA

    1) 리프레쉬를 해야 새로운 정보를 얻고/전송할 수 있는 페이지 기반 사이트와는 다르게,

        웹 앱(지메일 등)에서는 필요한 부분만 렌더링.

        => 반응성 향상, 풍부한 기능 구현 가능

    2) 코드 분리 가능 : 서버 & 브라우저

    3) 배포의 이점

        기존 페이지 기반 사이트들은 수정 발생 시 많은 부분들 배포 필요. CSS, JS 버전관리 따로 필요.

        그러나 Vue, React, Angular 프레임워크는 배포 자동화 설정되어 있음

 

 

D. Vue.js

- 빠르다

- 쉽다 : html/css/jquery -> vue.js 쉬움. jsx등의 추가 문법 학습 필요 없음 (<-> React)

- 확장성 : 점진적 채택 가능

 

 

E. 컴포넌트 기반

- MVVM (...ViewModel)

  * View = dom, html

  * Model = data, store

 

 

- 데이터 바인딩과 전달

- 상태(데이터)에 의한 UI제어

- 관심사의 분리

- 분리와 재사용

 

컴포넌트 

 컴포넌트 분리 단위 결정은 개발자 재량

 

---

 

파트1. 안녕, 뷰(Vue)

파트2. Vue CLI 프로젝트 생성

파트3. Vue SPA 앱의 구조

파트4. 템플릿 기초

파트5. 컴포넌트 라이프사이클

파트6. '데일리리포트'앱 개발 프로젝트 소개, 라우팅

파트7. 데일리리포트 개발: 네비게이션 제작

파트8. 데일리리포트 개발: '인트로' 컴포넌트 제작

파트9. 데일리리포트 개발: Firebase 기초

파트10. 데일리리포트 개발 마무리: '오늘' 컴포넌트 완성

파트11. 데일리리포트 개발 마무리: '오늘' 컴포넌트 완성

파트12. 데일리리포트 개발 마무리: '달력' 컴포넌트 제작

파트11. 데일리리포트 개발 마무리: '설정' 컴포넌트 제작