체인의정석

클래스와 스타일 바인딩 데이터 바인딩은 v-bind를 사용하여 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용됩니다. vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공하며 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 이런식으로 작성하게 되면 active 클래스의 존재 여부가 데이터 속성 isActive의 참속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한 v-bind:class는 일반 class 속성과 공존할 수 있습니다. 따라서 위와 같이 클래스를 여러개 둘 ..

computed 속성 mustach {{ }} 안에 표현식을 넣으면 편리하지만 이는 간단한 연산에만 한정됩니다. 따라서 복잡한 표현식이 들어가는 경우에는 computed속성을 사용해야 합니다. 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된 getter reversedMessage: function () { // `this` 는 vm 인스턴스를 가리킵니다. return this.message.split('').reverse().join('') } } }) 이렇게 되었을때의 요점은 바인딩된 데이터에 ..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ msg }}이렇게 될 경우 msg 가 쓰여진 부분은 해당 데이터 객체의 msg 속성 값으로 대체되며 데이터 객체의 msg 속성이 변경될 때 마다 갱신된다. 다시는 변경하지 않습니다: {{ msg }}다음과 같이 v-once 디렉티브를 사용하는 경우 데이터 변경 시 업데이트 되지 않는 일회서 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다. 원시 HTML {{ }}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. Using mustaches: {{ rawHtml }} Using v-html directive: 속성 v-..

Vue 인스턴스 만들기 var vm = new Vue({ // 옵션 }) 모든 vue 앱은 vue 함수로 Vue 인스턴스를 만드는 것부터 시작합니다. // 데이터 객체 var data = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new Vue({ data: data }) // 같은 객체를 참조합니다! vm.a === data.a // => true // 속성 설정은 원본 데이터에도 영향을 미칩니다. vm.a = 2 data.a // => 2 // ... 당연하게도 data.a = 3 vm.a // => 3 데이터가 변경되면 화면은 다시 렌더링 되지만 data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이여서 나중에 따로 속성을 추가하더라도 그 속성이 ..

https://kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 뷰는 공식 사이트가 잘 나와있다고 해서 공식 사이트를 보고 연습합니다. 먼저 새로운 프로젝트이니 깃허브에 공간을 하나 만들어주고 read me 와 gitignore를 깔아줍니다. https://github.com/hynki95/vue_basic hynki95/vue_basic 뷰 공식 사이트 예제 공부. Contribute to hynki95/vue_basic development by creating an account on GitHub. github.com 1. vue의 cdn 다음과 같이 2가지 종류의 cdn이 있습니다. nod..

SW peer review란 소프트웨어 개발자가 아닌 3자가 소프트웨어 작업관련 산출물을 검사하고 결함을 발견하고 개선 기회를 제공하는 활동이다. 보통 이런게 쓸모 없다고 생각하는 경우가 많지만 나중에 나온 소프트웨어가 잘못나왔을때 있는 손해를 생각해보면 이것이 잘못된 것임을 알 수 있다. 소프트웨어가 잘못 나오게 되면 그에 따른 손해는 훨씬 크기 때문이다. 먼저 Inspection에 대한 대상은 코드 뿐만이 아니라 모든 문서가 대상이된다. 문서를 모두 다같이 검토하는 것이다. 명세서, 설계서, 소스코드가 모두 inspection의 대상이 된다. Inspection을 위해서는 우선 진입 기준이 있는데 Inspection을 시작할 수 있는 산출물의 최소 조건이 이것이다. 근거문서가 검토되고 베이스라인이 설..

리팩토링 이후에는 구조가 바뀌어도 원래대로 동작하는지에 대한 테스트가 필요하다. 이러한 테스트기능성이 유지되는지 테스트하는 환경을 Safety net 이라고 하는데, 회사에서 개발할때 local,test,dev환경으로 나누어 테스트하고 그 전에 따로 내가 개발한 코드를 테스트래서 옮길때 이러한 실제 프로덕트에 올라가기전의 테스트 환경을 saftey net으로 이해하였다. 단위테스트는 각각의 모듈에 대한 작동 여부를 체크하는 것으로, 코드를 구현한 개발자가 직접 하는 것이라고 한다. 자신이 개발한 코드를 모듈별로 작동하는지에 대해 검토하고 남들에게 검토를 받는 것이다. 단위 테스트를 하게 되면 버그의 재발생을 예방할 수 있으며 모듈의 문서화가 가능하다. 어떤 입력값을 받았을 때 어떤 산출물이 나오는지를 문..

처음 스마트 컨트렉트 ERC20 표준 코드를 보았을 때 함수암에 함수를 호출하는 부분이 너무 많아 그게 왜 그런지 의아했던 때가 있었다. 그러나 그 코드를 보았을때 주석 없이도 이해하기 편했던 경험 또한 있다. 코드를 작동하도록 짜는것은 쉽지만 사람이 이해하기 쉽도록 짜는것이 가장 중요하다고 한다. 이를 위해서 필요한것이 코드 리팩토링이다. 코드리팩토링이 필요한 부분과 그 기법들에 대해 정리해 보도록 하겠다. 1. 리팩토링과 리엔지니어링의 차이 리팩토링의 경우 동작이 변화는 없고 구조의 변화만 있다. 청소와 같은 느낌이다. 리엔지니어링의 경우 새로운 특징이 반영되고 결함이 수정되며 SW aging으로 노후화될 경우 실행하여 새로운 기능도 추가된다. 이는 리모델링과 같은 느낌으로 볼 수 있다. 리엔지니어링..