columns: [ {data:'name', render: function(data, type) { if (type === 'display') { return '' + data + ''; } return data }} ] 바인딩할 data를 font color만 변경해서 보여주려 했으나 위와같이 코드를 바꿔도 색상이 바뀌지 않습니다. 발생원인 : 원인을 확인하지 못했으나 td tag만 안되는 것으로 보아 td tag는 default 설정으로 자동 처리되지 않나 싶습니다. 해결방법 : columns: [ {data:'name', render: function(data, type) { if (type === 'display') { return '' + data + ''; } return data }} ] 간..
Vue.js 컴포넌트 심화
목차 (공부 책 : Vue.js Quick Start ) 앞서 컴포넌트에 대한 내용을 살펴보았습니다. 하지만 이는 전역 컴포넌트로써 html파일 내부에 작성하는 방법이었습니다. 간단한 페이지 작성때는 적절하지만 대규모 웹어플리케이션을 구현할 때는 컴포넌트를 관리하기 힘들고 재사용성이 낮습니다. 그렇기에 Vue CLI 기반으로 단일 파일 컴포넌트를 작성해 개발해야 합니다. 단일 파일 컴포넌트 전역 컴포넌트의 문제점은 다음과 같습니다. · 빌드 단계가 없어 최신 자바스크립트 문법을 사용할 수 없습니다. · CSS를 지원하지 않습니다. 그렇기에 CSS 스타일을 빌드하고 모듈화하는 기능을 제공하지 않습니다. · 템플릿이 작성될 때 HTML파일 내 여러개의 태그가 작성되어 식별하기 어렵습니다. 또한 템플릿마다 고..
로그인 창처럼 form 태그 내에 ID, PW 정도의 많지 않은 정보만 보낸다면 Vue의 Data객체와 ID PW 내용을 v-model 디렉티브로 양방향 연결해서 json 객체를 axios나 ajax로 보내면 됩니다. 하지만 위 방식대로 form 태그 내 수많은 정보가 있는데 이를 일일이 v-model로 연결하는건 효율적이지 못합니다. Regist 발생원인 : form 태그 내 다수의 정보를 별도의 Data객체와 연결없이 보낼 방법은? 해결방법 : 구글에서 검색해보면 FormData를 쓰라는 글이 많습니다. methods: { sendPost() { var form = document.getElementById('sendForm'); var formData = new FormData(form); axio..
Vue-CLI 도구
(공부 책 : Vue.js Quick Start ) Vue CLI Vue CLI는 Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 기능을 모두 제공하는 Vue개발 도구이자 시스템입니다. Vue CLI 3 버전부터는 대화형 방식을 적용하여 스캐폴딩 코드뿐만 아니라 vue-cli-server의 내장된 기본 설정을 통해서 복잡한 웹팩 번들러의 설정을 하지않고도 애플리케이션 개발을 할 수 있습니다. 이번 장부터 작성되는 모든 예제들은 Vue CLI를 기반으로 프로젝트를 생성하고 예제 코드를 작성할 것 입니다. Vue CLI의 구성요소와 설치 Vue CLI는 크게 3가지 구성요소로 이루어졌습니다. CLI : @vue/cli 컴퓨터 내 어디서나 실행할 수 있도록 npm을 이용해 전역설치하여 터미널 창에서 ..
chart를 새로이 만들어 canvas 요소에 초기화하나 실제론 이전 chart가 지워지지 않고 그대로있는 문제. hover 이벤트로 마우스를 chart위에서 움직일 시 이전 chart, 현재 chart가 빈번하게 바뀌며 화면에 나옵니다. 발생원인 : 검색 능력이 부족해 원인은 알 수 없었습니다. new Chart(canvas, config); 짐작하기로는 new 연산자로 인한 새로운 메모리로 할당됨으로써 canvas를 초기화하는게 아닌 새로운 chart가 기존 chart위에 덧씌우듯 표시되는 문제라 사료됩니다. 해결방법 : canvas 요소를 삭제하고 재생성하여 chart js를 초기화합니다. var resetCanvas = function(){ $('#results-graph').remove(); /..
Vue.js 컴포넌트 기초 - 2
(공부 책 : Vue.js Quick Start ) props와 event 앞서 부모 컴포넌트와 자식 컴포넌트 사이에 속성(Props)와 이벤트(Event)를 이용해 상호작용한다 이야기한 적 있습니다. Vue 컴포넌트들이 부모-자식 관계로 형성되었을 때 컴포넌트 내부 데이터는 캡슐화되기 때문에 다른 컴포넌트 앱에서 접근할 수 없습니다. 이 때문에 부모는 자식 컴포넌트에 필요한 정보를 속성(Props)를 이용해 전달하고 자식 컴포넌트는 이벤트(Event)를 이용합니다. 1. props를 이용한 정보 전달 {{globalGreeting}} props를 이용한 정보전달 방법은 Vue 컴포넌트를 정의할 때 props라는 옵션을 작성하고 props명을 배열로 나열하면 됩니다. 위 예제는 list-component..