체인의정석

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ 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으로 노후화될 경우 실행하여 새로운 기능도 추가된다. 이는 리모델링과 같은 느낌으로 볼 수 있다. 리엔지니어링..

웹페이지를 만들었을 때 Robots.txt를 등록하여 얻을 수 있는 이점은 특정 주소만 검색되도록 하는 기능과 사이트맵을 더 빨리 찾을 수 있게 하는 기능이 있다는 점이다. 1 단계 텍스트 파일을 연다. 텍스트 파일의 제목은 robots로 두고 txt파일 형식으로 둔다. robots.txt 파일을 만든다. 2단계 User-agent: * Disallow: 이렇게 설정해준다. User-agent 를 *로 두면 특정 도메인의 크롤링봇을 막을 수 있다. Disallow의 경우 검색이 안걸리게 하려는 페이지가 있을 경우 따로 설정한다. Disallow:/test 이런식으로 하면 test 페이지는 검색에 따로 잡히지 않는다. 3단계 이 포스팅에서 사이트맵 등록하는 법을 기록해두었다. https://it-timeh..

영상을 바로 페이지에 불러오게 되면 시간이 오래걸린다. 따라서 웹페이지 속도를 향상시키기위하여 레이지로드를 사용하는것이 더 유리하다. 유튜브에서 따로 지원해주지 않기 때문에 이는 따로 구현하여 실행해야 한다. HTML 유튜브를 클래스를 두고 data-embeded안에 유튜브 영상 아이디를 저장시킨다. 이때 data- 를 사용하는 이유는 이렇게 될 시 youtube[0].dataset 이라는 저장공간에 바로 저장되어 html에서 지정해서 불러오는 것 보다 더 빠른 속도로 불러올 수 있다. 따라서 이렇게 data- 로 클래스를 두는 것은 여러 모듈에서 자주 쓰인다. 여기서도 data-embeded에 유튜브 영상아이디를 두어서 빠르게 접근하도록 한다. 또한 맨처음 사진이 멈춰있을 때 플레이 버튼을 만들어주기 ..