Vuex란? Vuex는 Vue.js 응용 프로그램을 위한 상태 관리 패턴 + 라이브러리이다. Vue 어플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소의 역할을 하며, 상태가 예측 가능한 방식으로만 변형될 수 있도록 보장하는 규칙을 가지고 있다. Vuex를 왜 사용하는가? Vue는 컴포넌트 사이에 단방향 통신만을 지원하기 때문이다. Vuex를 꼭 사용할 필요는 없다. 오히려 한두군데서밖에 사용하지 않는 state를 꾸역꾸역 store에 저장하는 것이 더 안 좋을 수도 있음. Vuex의 중심 컨셉 (state, getters, mutations, actions) Vue Component에서 변화가 일어난다면 dispatch 함수를 통해 Actions에 저장된 메소드를 호출한다. Actions의 메소드..
텍스트 보간 Mustache 구문을 사용한 텍스트 보간. {{msg}} * Mustache 구문은 데이터를 일반 텍스트로 해석하기 때문에 만약 HTML로 출력하고 싶다면 v-html 디렉티브를 사용해야 한다. 여기에 msg가 출력된다 여기에 msg가 출력된다 Vue.js는 모든 데이터 바인딩 내에서 자바스크립트 표현식의 모든 기능을 지원한다. 가능 불가능 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ var a=1 }} {{ if(ok) {return 'YES'} }} (조건문은 작동하지 않음) 디렉티브 디렉티브는 v-접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 자바스크립트 표현식이 된..
Vue Instance 생성 속성 속성 설명 el Vue가 적용될 요소 지정. CSS Selector or HTML Element data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태. (함수 형태를 더 권장함) emplate 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함꼐 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가. created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의. Vue Instance 유효범위 Vuew Instance를 생성하면 HTML의 특정 범위(el) 안에서만 옵션 속성들이 적..
https://beomy.tistory.com/43 MVC Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에게 보여지는 UI 부분 Controller : 사용자의 입력(Action, Request)을 받고 처리하는 부분 동작 사용자의 Action이 Controller로 들어온다. Controller는 사용자의 Action을 확인하고 Model을 업데이트한다. Controller는 Model을 나타내 줄 View를 선택한다. View는 전달받은 Model을 화면에 나타낸다. MVP Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에게 보여지는 UI 부분 Presenter : View에서 요청한 정보로 Model을 가..
Vue.js란? 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework. 특징 Approachable (접근성) Versatile (유연성) Performant (고성능) MVVM Pattern Model(자바스크립트 객체) + View(웹페이지의 DOM) + ViewModel(Vue) 기존에는 자바스크립트로 view(DOM)에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용하였다. 예시 텍스트 클릭 $('button').click(function () { $('#p1').text('대체 텍스트'); }); Vue는 view와 Model을 연결하고 자동으로 바인딩하여 양방향 통신을 가능하게 하였다. {{msg}} 클릭 new Vue({ el: "#app"..
div1 div2 div3 여기 div의 영역을 클릭하면 div의 이름이 담긴 alert 창이 나오는 이벤트 핸들러가 있다고 생각해보자. div1, div2, div3에 각각 동일한 핸들러를 바인딩했고, 사용자가 div3의 영역을 눌렀을 때 alert창에는 어떤 순서로 div 이름이 출력될까? 캡쳐링과 버블링은 쉽게 말해서 어떤 한 태그에서 이벤트가 발생하였을 때 자신을 포함한 부모 태그들까지 쭉 훑으며 겹치는 이벤트의 핸들러가 있는지 없는지 검사하는 것을 의미한다. 먼저 캡쳐링은 이벤트가 발생한 요소를 포함하는 부모 태그에서부터 이벤트 근원지인 자식 태그까지 검사하는 것을 의미한다. 그 과정에서 이벤트 캡쳐링 속성의 이벤트 핸들러가 있다면 핸들러를 수행한다. 버블링은 이벤트 발생 요소부터 요소를 포함하..
Javascript 1. 인라인 이벤트 핸들러 (HTML에서 등록) 클릭 클릭 2. 이벤트 핸들러 프로퍼티 (Javascript에서 등록) document.getElementById("div1").onclick = function() { alert('안녕하세요'); } 단, 하나의 프로퍼티에 하나의 핸들러만 바인딩 할 수 있다는 단점이 있다. (인라인 이벤트 핸들러 방식은 여러 함수를 호출할 수 있다.) 3. addEventListener 메소드 // IE 9 이전 버전 document.getElementById("div1").attachEvent("click", openAlert); // IE 9 이후 버전 document.getElementById("div1").addEventListener("cli..
CSS 선택자 활용 일반 선택자 선택자명 선택 범위 표현식 전체 선택자 HTML 문서 내 모든 element * {} 타입 선택자 매칭되는 element 선택 h1, h2, h3 {} 클래스 선택자 class 속성 값과 매칭되는 element 선택 .className {} ID 선택자 id 속성 값과 매칭되는 element 선택 #idName {} 복합 선택자 선택자명 선택 범위 표현식 하위 선택자 하위 element 선택 (얼마의 깊이가 차이나든 하위에 있다면 모두 선택) E1 E2 {} 자식 선택자 직속 하위 element 선택 (바로 내 밑의 깊이에서만 선택) E1 > E2 {} 인접 형제 선택자 인접 형제 관계인 element 선택 (바로 내 뒤의 형제만 선택) E1 + E2 {} 일반 형제 선택..
