(책) Vue.js 프런트엔드 개발 입문-2024-07
프런트엔드 개발인 뷰를 쉽고 빠르게 배울 수 있게 해주는 책이다.
html, 자바 스크립트를 배웠다면 뷰로 빠르게 개발 능력을 +100 하도록 하자.
길벗 출판사에서 책을 제공받아 작성된 서평입니다.
<1> 뷰의 기본 개념, 장점, 단점을 알려 준다.
<2> 뷰의 개발 환경 설정하는 법을 배운다.
<3> 뷰 기본 문법을 알려준다.
<4> 실습 : 계산기 만들기
<5> 컴포넌트, 실습: 할 일 관리 앱 만들기, 고급 기술, API, 데이터 통신법을 알 수 있다.
<6> 요약
<1> 뷰의 기본 개념, 장점, 단점을 알려 준다.
1
뷰의 기본 개념?
뷰는 사용자 인터페이스(UI)를 만드는 데 사용하는 자바 스크립트 기반 오픈 소스 프레임워크이다.
뷰는 MVVM아키텍처 패턴을 따릅니다.
Model-View-ViewModel
2
MVVM아키텍처?
데이터를 보여주는 뷰와 데이터를 처리하는 모델 사이에 데이터를 중개하는 뷰 모델을 두어 UI와 데이터 처리 로직의 상호 의존성을 줄이는 아키텍처 패턴입니다.
3
뷰가 출시되기 전 프런트엔드 개발은 앵귤러, 리액트 프레임워크를 주로 사용함.
4
뷰의 특징?
가상 DOM
웹 브라우저는 문서 객체 모델을 생성할 수 있습니다.
웹 브라우저에서 표시되는 모든 화면 구성요소는 HTML로 작성됩니다.
웹 브라우저는 이 HTML문서를 파싱해 객체로 변환하고 그 결과를 화면에 보여 줍니다.
이때 웹 브라우저가 생성하는 객체를 문서 객채 모델(DOM, Document Object Model)이라고 합니다.
5
DOM 트리
6
뷰의 장점?
간단한 설치
CDN라이브러리 하나만 불러오면 사용할 준비가 끝난다.
프레임워크 설치하는데 시간이 오래 걸리지 않아 간단하게 시작할 수 있다.
낮은 학습 곡선
뷰의 기본 문법은 HTML, CSS, 자바 스크립트만 알고 있으면 될 정도로 간단합니다.
뷰 지시어, 문법만 추가로 배우면 된다.
7
뷰 단점?
커뮤니티 활용의 한계
다른 프레임워크에 비해 커뮤니티가 좁다.
뷰 창시자가 중국국적자라 뷰의 대형 커뮤니티가 중국어인 경우가 많다.
뚜렷한 후원처가 없다.
앵귤러는 구글, 리액트는 메타에서 지원을 받는다.
뷰는 현재 안정적인 지원은 없다.
플러그인 부재.
호환되는 플러그인이 부족.
일부 기능 구현시 플러그인을 직접 만들어야 한다.
8
뷰 사용 사이트?
카카오 corp
바이브
하나투어
줌
<2> 뷰의 개발 환경 설정하는 법을 배운다.
1
Node.js 설치법?
뷰는 Node.js 기반으로 실행되는 자바스크립트 프레임워크이다.
뷰를 제대로 공부하려면 Node.js가 필요하다.
download site
https://nodejs.org/en/download/package-manager
2
Vue CLI 설치
뷰에는 뷰를 위한 별도의 CLI 패키지가 있다.
npm install -g @vue/cli
3
비주얼 스튜디오 코드 설치
https://code.visualstudio.com/
4
비주얼 스튜디오 코드 익스텐션 설치
확장 프로그램
Vue-Official
문법과 파일을 인식시키는 익스텐션
5
웹 브라우저 설치
확장 프로그램 설치
Vue.js devtools
6
첫 번째 뷰 애플리케이셜 설치
방법 2가지
CDN사용하는 방법
NPM 사용하여 설치하는 방법
<3> 뷰 기본 문법을 알려준다.
뷰 애플리케이션의 기본 구조
이벤트 다루기
<4> 실습 : 계산기 만들기
프로젝트 생성
계산기의 UI구성하기
데이터 바인딩하고 이벤트 연결
계산기 로직 구현하기
<5> 컴포넌트, 실습: 할 일 관리 앱 만들기, 고급 기술, API, 데이터 통신법을 알 수 있다.
컴포넌트 다루기 = 복한 잡 기능 필요. 이를 해결할 방법 중 하나.
실습: 할 일 관리 앱 만들기
고급 기술
API 사용법
데이터 통신법을 알 수 있다.
<6> 요약
같이 보면 좋을 책
https://brunch.co.kr/@topasvga/1463
감사합니다.
