개성있는 개발자 되기

지금까지 HTML 파일에서 태그로 vue.js 라이브러리를 직접 참조하여 예제를 작성했다. 하지만 이 방법으로는 대규모 앱을 개발하기 힘들다. 대규모 앱을 개발하려면 SPA(Single Page Application) 구조여야 하는데, Vue.js 기반의 SPA 애플리케이션을 개발하려면 Vue Router, Vuex 등의 다양한 요소가 필요하다. 이들을 이용하기 위해서 ECMAScript2015나 Typescript 등을 사용해야 하는데, 이번 장에서는 ES2015 표기법에 대해 알아본다. 1. ES2015를 사용하기 위한 프로젝트 설정 Babel을 프로젝트에서 사용하기 위해 설정이 필요하다. * Babel : 대표적인 트랜스파일러로서, ES2015, TypeScript 코드를 오래된 브라우저에서도 사용..

Vue.js의 강력한 기능 중 하나는 컴포넌트이다. 대규모 애플리케이션을 작성할 때 컴포넌트의 장점이 있다. 뛰어난 재사용성 한 애플리케이션 내부에서 사용되는 UI와 기능은 반복되는 것이 꽤많다. 반복되는 부분을 컴포넌트(템플릿)로 작성해두면 여러 곳에서 재사용 가능하다. 용이한 테스트 컴포넌트 단위로 기능을 테스트할 수 있다. Karma, Mocha, Jest와 같은 단위테스트 도구를 이용해 쉽게 테스트할 수 있다. http://jestjs.io/, https://karma-runner.github.io/1.0/index.html, https://mochajs.org/ Mocha - the fun, simple, flexible JavaScript test framework Mocha is a feat..

1. 인라인 스타일 인라인 스타일이란 HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식을 뜻한다. 가능하다면 인라인 스타일은 사용하지 않는 것이 바람직하다. Vue.js에서는 v-bind:style로 인라인스타일을 작성할 수 있다. - 이벤트가 일어날 때마다 style1의 데이터 속성을 변경한다. - 변경된 속성은 v-bind:style="style1"을 통해 데이터에 바인딩 된다. 테스트 - 여러개의 스타일 객체를 바인딩 할수도 있다. 버튼1 2. CSS 클래스 바인딩 v-bind:class를 사용한다. boolean 값을 이용해 지정하는데, 개별적인 클래스 단위로 true가 되면 클래스가 주어진다. - 클래스 이름을 데이터 속성명으로 사용해서, v-model에 바인딩 해주면 해당 값의 tr..

다양한 이벤트의 사용 방법에 대해서 다음의 문서를 참고하자. https://developer.mozilla.org/ko/docs/Web/Reference/Events MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org https://www.w3schools.com W3Schools Online Web Tutorials HTML Example: This is a heading This is a paragraph. Try it Yourself » CSS Ex..