개발은 전투다

Vue.js Dev Tools

Chrome devtools extension for debugging Vue.js applications.

chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

편집기에서 파일 우클릭,

Open With Live Server 시, Chrome 브라우저가 열리며, F12 로 개발자 도구 오픈하여 vue 콤포넌트를 열면 된다.

vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.

vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다.

리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다.

MVVM 패턴의 뷰모델 (ViewModel) 레이어에 해당하는 화면단 라이브러리 이다.

Vue 는 DOM Listeners 와 Data Bindings 를 이용한다.

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음
• Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공
• 하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름.
• 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

vue.js 개발을 위한 편집기 tool

Visual Studio Code 다운로드

https://code.visualstudio.com/

예전에 angular 개발시엔 기본으로 한글 버전이었던 것 같은데,

이번에 vue.js 공부를 위해 다시 설치 하였는데 영문판이구나./

vscode 실행 후, [확장] 버튼을 누르고 market place 검색창에 korean 입력하면

" Koran Language Pack for Visual Studio Code " 

가 나온다, 

install !~ 후 restart 하세요.

https://joshua1988.github.io/vue-camp/

https://joshua1988.github.io/webpack-guide/

개발 환경 구성

• Chrome
• Visual Studio Code
• Vue.js Dev Tools
• Node.js

VSCode 플러그인 목록

• 색 테마 : Night Owl
• 파일 아이콘 테마 : Material Icon Theme
• 뷰 확장 플러그인 : Vetur
• 뷰 코드 스니펫 : Vue VSCode Snippets
• 문법 검사 : ESLint, Prettier, ES6 String HTML
• 실습 환경 보조 : Live Server
• 기타
  • Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등