Vue.js를 공부하기에 앞서 Vue.js가 뭔지!
정리해봅니다🤓
1. Vue.js란?
Vue.js는 Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크입니다.
컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며,
재사용이 가능한 UI들을 묶어서 사용할 수 있습니다.
양방향 웹 개발을 쉽게 해주기 위해 프론트엔드 개발에 사용됩니다.
현재 프론트엔드 프레임워크 중 Angular, React와 함께 가장 인기있는 프레임워크로 손꼽힙니다.
2. 역사
2006년 존 레식이 제이쿼리(jQuery)를 출시하면서 HTML의 클라이언트 단 스크립트를 단순화 시켰고
클라이언트단을 위한 여러 프레임워크와 라이브러리들이 출시 되었습니다.
시간이 지나면서 여러 프레임워크와 라이브러리들은 프로젝트에 쉽게 적용할 수 있고 더 가볍게 진화했고
지금의 Vue.js가 출시될 수 있었습니다.
3. 시작하기
간단하게 Hello, Vue를 출력하는 예시해보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue.js Start</title>
</head>
<body>
<div id="app">
<h1>Hello, {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({ //앱 초기화
el: '#app', // DOM에 연결
data: {
name: 'Vue'
}
});
</script>
</body>
</html>
실행하면 위와 같이 Hello, Vue가 출력되는 걸 확인할 수 있습니다.
화면 오른쪽에 보이는 개발자도구 패널에 Vue-Devtools패널을 열어 뒀습니다.
크롬에서 제공하는 확장프로그램으로 설치해서 활용하면 유용합니다!
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
설치한 후에 확장 프로그램 세부 정보 페이지에서 설정을 변경해주셔야 로컬 파일에도 해당 도구를 사용할 수 있습니다.
설정창에서 "파일 URL에 대한 액세스 허용"을 꼭 설정해주세요
공식문서도 살펴보면 도움이 되기때문에 링크 남기겠습니다ㅎㅅㅎ
Vue.js는 공식 문서 한글화가 잘되어있어서 보기도 편합니다.
Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
Vue.js에 대한 정말정말
기초적인 정보만 정리한 포스팅이었습니다.
다음 포스팅으로 Vue.js의 기반인
MVVM패턴에 대해서 설명하는 포스팅을 작성하겠습니다.
'Web > Vue.js' 카테고리의 다른 글
| Vue-CLI 프로젝트 만들기 (0) | 2019.12.05 |
|---|---|
| [Vue.js] 컴포넌트 (0) | 2019.12.04 |
| [Vue.js] 라이프사이클 (0) | 2019.12.01 |
| "Vue.js 코딩 공작소" 학습 후기 (0) | 2019.11.09 |
| MVVM패턴이란? (0) | 2019.11.09 |
