Event Binding 이해하기 사용자의 입력 데이터에 따라 반응하는 방법과 Vue를 활용하고 더 활발한 상호작용 & 반응하는 웹 어플리케이션을 위해 Event를 이해해봅시다. Vue Events Events in Action Add Reduce Result: {{ counter }} const app = Vue.createApp({ data() { return { counter: 0, }; }, }); app.mount('#events'); 위 HTML 에서 Add/Reduce button 을 눌렀을때 바인딩된 counter에 1을 더하고, 뺀다고 해보죠. 순수 자바스크립트에서는 document.getElementById 로 버튼의 ID를 이용하거나, document.querySelec..

Vue의 Methods 이해하기 저번에 배운 v-bind나 보간법을 이용해 {{ }} 사이에 데이터 바인딩을 했었습니다. 이때 {{ }} 사이에 데이터가 어떤 조건에 의해 무작위로 바뀌게 출력하도록 해보겠습니다. 이럴때 사용할 수 있는 Vue의 옵션중 하나가 Methods 입니다. Methods를 사용하면 사용자 이벤트가 발생하는 등의 일이 생겼을때 실행할 함수를 지정합니다. methods의 값으로는 Javascript 객체를 전달합니다. 이때, 기존의 data는 그 자체로 함수이자 메서드라면 methods는 메서드 및 함수로 만들어진 객체를 찾습니다. const app = Vue.createApp({ data: function() { return { courseGoal: 'Finish the c..

Vue를 이용한 DOM 상호작용 Vue를 HTML의 어느 부분에 적용할지를 정해서 해당 HTML 태그를 제어할 수 있습니다. Vue Course Goals My Course Goal 위 코드에서 Section 요소 전체를 Vue로 컨트롤 해보겠습니다. (Vue로 HTML 태그를 제어할 경우, 해당 요소의 하위 요소도 컨트롤이 가능합니다) const app = Vue.createApp(); app.mount('#user-goal'); 위 코드에서 Vue 앱을 변수에 선언해주고, 컨트롤 할 HTML 태그의 CSS 선택자인 id를 mount()의 인자로 넣어줍니다. mount() 안에는 문자열이 들어가며 CSS 선택자를 넣으면 해당 HTML 태그와 연결된다는 의미입니다. 보간법 (Interpol..

Vue.js Basic Vue는 완전한 컴포넌트 기반 UI 프레임워크이다. 모던 웹 어플리케이션을 구축할 때 필요한 핵싱 기능을 갖출 프레임워크이다. Vue의 대안 React와 비교해보면, React는 Routing등 Vue가 기본적으로 제공하는 기능들이 없고 커뮤니티 패키지에 상당히 의존적이며고 사실상 라이브러리이다. Vue는 프레임워크이자 왠만한게 다 내장되있다는 차이점이 있다. Vue를 적용하는 다양한 방식 화면상 반응형이 필요하지않은 곳엔 vue를 적용할 필요가 없고 필요한 곳에만 적용하는 방식 페이지 내 요소를 모든 요소를 렌더링하고 조정하는 방식 (SPA) 둘중 뭐가 더 나은 방식이라기보다 상황에 따라 맞게 사용하는게 좋다. Vue 간단하게 CDN으로 사용하기 Without JS startin..

Optional Chaining 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. Optional Chaning이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 겁니다. 몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 알아봅시다. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError..

new 연산자 && 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. function User(name) { // this = {}; (빈 객체가 암시적으로 ..

Function & This 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "Kim", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 _행동_을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 함수 생성 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "Kim", age: 30 }; user.sayHi = function() { alert("안녕하세요"); }; user..