웹 프론트앤드 개발

Vue JS

ES6가 브라우저에서 지원 안하기 때문에 nodeJS를 설치해서 nodeJS가 ES6를 ES5로 변환해준다.
개발은 ES6 알아둬야한다. 클라이언트 언어
Promise 패턴. 비동기 패턴.
lite-server git Hot-Reload 변경사항 새로 바꾸는 것
index.html에서 app.js를 불러오고 
app.js 에서 DOMContentLoaded이벤트가 발생 시 MainController를 실행시키면 된다.

[+]
tag는 개발할 때 디버깅 용으로 사용하는 태그
const tag = '[MainController]' 
사용할 때 console.log(tag,'hello world')로 로그를 남기면
"[MainController] hello world"문자열이 개발자 콘솔에 남는다.

함수체이닝 기법 - 돔 구조에선 매우 유익하다.

[+]
브런치를 강의마다 따두는 기법 괜찮은거 같다.
querySelector(Query) 이걸로 document의 element를 찾을 수 있다.

keyup이라는 이벤트 함수는 키가 입력될 때 마다 실행된다.

on(event) - 이벤트 하는 함수
emit(@event) - 이벤트 시키는 함수

MVVM 구조설명
- 모델과 뷰 사이에 있는 것으로 ViewModel 이 존재하고 1:1로 매칭되어 있다.
ViewModel이 변경되면 View가 자동으로 갱신이 된다.
- Controllers와 Views폴더가 필요없고 Models만 필요하다.
- CDN으로 vue.js 등록할 수 있다.

new Vue({
 el: '#app',
 data: {
   msg: 'hello world'
 },
 methods: {
   onSubmit(e) {
    debbuger
    
   }
 }
})

el로 마운팅 포인트를 지정 할 수 있다.
data는 출력할 때 {{변수명}}으로 출력할 수 있다.
methods는 돔과 반응할 함수들을 정의할 수 있다.


v-model이라는 directive(HTML에 바인딩 시키는 키워드)가 있다. 이걸로 HTML과 data의 변수와 연결시킬 수 있다. 양방향
v-show 조건을 확인하는 앤데 얘는 돔은 생성되는데 visible invisible 할 때 사용하는게 좋다.
ex) v-show="query.length" 이런식으로 쓸 수 있다.
v-if 조건을 확인하는 앤데 얘는 돔 자체를 생성 제거하는 애다.
v-on 돔에서 일어나는 이벤트를 리슨하는 역할을 담당한다.
ex) v-on:submit="onSubmit" .prevent 까지 입력하면 preventDefault까지 적용된다.(현재의 이벤트를 중단시키는 것도 쉽게 가능)

this = Vue인스턴스를 의미