코딩 기록

이 글은 Vue를 공부하면서 TypeScript 클래스 기반 Vue 앱을 만들고 싶다는 마음으로 작성했습니다. 여러 예시를 통해 vue-property-decorator 기능을 기본, 적용, 고급 섹션 3개로 나누어 설명합니다. 기본에선 Vue로 앱을 만드는데 필수인 기능, 응용에선 편리한 데코레이터, 고급에선 일반적으로 사용하지 않는 기능을 설명합니다.일단 기본만 이해하면 어려운 것은 없을 겁니다. 또한, 마지막으로 nuxt-property-decorator 독자적인 데코레이터를 소개합니다. 테스트 버전vue-property-decorator v8.3.0nuxt-property-decorator v2.5.0 기본구성 요소(기능) 정의@Component는 정의된 클래스를 Vue가 인식할 수 있는 형식으로..

1편에서 이어지는 글입니다. 1편 - [ESLint es6] JavaScript 이해하기 1 Errors accessor-pairsset 구문의 페어가 되는 get 구문의 정의를 강제합니다. // NGvar object = { set foo (val) { this.val = val }} // OKvar object = { set foo (val) { this.val = val }, get foo () { return this.val }} array-callback-returnArray 메소드의 콜백 함수에서 return 문장을 강제합니다. // NGlet numList = [1, 2, 3].map((item) => { item * item}) // OKlet numList = [1, 2, 3].map((..

ESLint Rules는 JavaScript의 역사와 지식이 담겨있습니다. 그래서 ESLint Rules를 공부하는 것만으로도 자바스크립트를 깊이 이해할 수 있습니다. 아래 코드는 어디까지나 대표적인 예시입니다. 각각의 규칙은 옵션에 따라 규칙을 변경할 수 있어서 최적의 코드는 아닐 수 있습니다. 하지만, 아래 소개할 글은 (비록 길지만) 정독해두면 코딩할 때 많은 도움이 될 거라 생각합니다. for-directionfor문 긍정적인 방향으로 작성하는 것을 강제합니다. // NGfor (var i = 0; i < 10; i--) { console.log(i)} // OKfor (var i = 0; i < 10; i++) { console.log(i)} getter-returnget 구문에서 return을..

Node.js 생태계를 체험하자 TypeScript는 JavaScript로의 변환을 목적으로 만들어진 언어입니다. 공식적인 처리 루틴이 있고, 변환하면 JavaScript가 생성됩니다. 공부 목적으로 실행하려면 현재 몇 가지 옵션이 있습니다. 이 가운데 우선 안정적으로 사용할 수 있고, 비교적 간단한 것은 ts-node 입니다. 타입스크립트 웹 사이트 playground 1 : 공식 컴파일러로 변환하여 브라우저에서 실행tsc + Node.js : 공식 컴파일러로 변환하고 Node.js에서 실행babel + ts-loader + Node.js : Babel 통해 공식 컴파일러로 변환하고 Node.js에서 실행babel + @ babel / preset-typescript + Node.js : Babel에서..