Today I Learned

Vue CLI는 개발자들에게 표준화된 개발의 기준선을 제공하며, Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련 기능을 제공하는 Vue.js 개발자 도구이자 시스템이다. Vue CLI 도구는 기본적으로 웹팩(webpack)이라는 모듈 번들러를 사용한다. 웹팩(webpack) 웹 애플리케이션의 발전과 함께 자바스크립트 코드는 점점 더 복잡해지고 대규모 의존성을 가지게 되었다. 기능과 컴포넌트에 따라 코드가 분할되었고(모듈) 이에 따라 관리해야하는 파일도 늘어났다. 하지만 여러 개의 파일을 로딩하기 위해서는 그만큼의 네트워크 요청이 증가한다. 따라서 이렇게 분할된 파일들을 묶어주어(번들) 네트워크 비용을 최소화하는 방법이 필요하게 되었다. 이렇게 자바스크립트로 작성된 모듈을 번들링하여 번들로 만들어주..

단일 HTML 파일에 태그로 vue.js 라이브러리를 직접 참조하는 방법으로는 대규모 앱 개발이 힘듦 → 대규모 앱을 개발하려면 SPA(Single Page Application) 구조여야 하는데, Vue.js 기반의 SPA 애플리케이션 개발에는 Vue Router, Vuex 등의 다양한 요소가 필요 → 이들을 이용하기 위해서는 ECMAScript2015(ES2015 또는 ES6)나 TypeScript 등을 사용해야함 → 하지만 ES2015는 최신브라우저에서만 지원하므로 하위브라우저에서는 사용 불가, TypeScript는 브라우저에서 직접 실행 안됨 → 따라서 트랜스파일러(Transpiler)를 사용해 ES2015, TypeScript 코드를 오래된 브라우저에서도 사용할 수 있는 하위 버전의 자바스크립트..

컴포넌트의 장점 뛰어난 재사용성 - 반복되는 UI와 기능을 컴포넌트로 작성해서 재사용 가능 테스트 용이 - 컴포넌트 단위의 기능 테스트 가능. Karma, Mocha, Jest 등의 테스트 도구 사용 가능 편리한 디버깅 - 컴포넌트 단위로 전달된 속성 및 부모 컴포넌트로 전달된 이벤트 정보 파악 가능 컴포넌트 조합 Vue.js는 컴포넌트들을 조합해 전체 애플리케이션을 작성 컴포넌트는 부조-자식 관계로 트리구조를 형성하며, 부모 컴포넌트가 자식 컴포넌트를 포함하는 형태 데이터 전달 방향은 주로 부모 → 자식 컴포넌트 (단방향) * 양방향 데이터 전달도 가능하지만 애플리케이션 복잡도가 높아지고 유지보수에 어려움이 있어 권장X 부모 컴포넌트는 자식 컴포넌트로 속성을 전달 / 자식컴포넌트를 부모컴포넌트로 이벤트..

스타일 적용 스타일 적용 순서 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 인라인 스타일 HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식 테스트 v-bind:style 디렉티브를 통해 인라인 스타일로 style 지정 가능(카멜 표기법 사용) 예제에서는 mouserover와 mouseout 이벤트를 사용해 style 속성을 변경 * HTML과 Vue.js에서 인라인 스타일은 권장되는 방식은 아님 CSS 클래스 바인딩 버튼1 set1 디자인 set2 디자인 set3 디자인 v-bind:class을 이용한 클래스 적용 시에는 bool..