목록Vue (54)
똑같은 삽질은 2번 하지 말자
Vueを学びながら既存に作ってた掲示板の画面側をVueで制作したいと思いましたが、 そもそも根に合わないと言うか、概念が合わないと言うか、即ち MPA(Multi Page Application) で作られたことをSPAに変更する作業だったんです。 もちろん何とか出来ると思います。 それでSPAの概念を固めるためにネットで検索しました。 1. SPA란? SPA란 Single Page Application의 약자이다. 단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드이다. 기존 웹 서비스는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 전통적인 페이지 vs 단일 페이지 어..
https://www.sitepoint.com/creating-beautiful-charts-vue-chart-js/ 위 페이지를 들어가면 vue에서 차트 그리는 것에 대한 간단한 예제 소스를 볼 수 있다. vue-charts, vue-chartjs, vue-chartkick 를 이용한 예제이고, vue-charts 세가지 중에 가장 파워풀하다. 반응성이나 유연함에 있어서 좋다. (데이터의 변화가 있을 때 자동으로 re-render 된다.) vue-chartsjs vue-chartjs 와 다르게(?) 셋팅이 쉽다. 데이터를 처리하고 render 하기 위해 콤포넌트를 분리할 필요가 없다.(예제 소스 한번 보세요) dataset 에서의 변화가 있으면 자동으로 re-render 되는 유연함을 가지고 있다. v..
3시간 동안 삽질했다. Vue의 이벤트 버스를 하나 생성해서 import Vue from 'vue'; export default new Vue(); 이 중간 Vue 인스턴스로 이벤트를 발생시키고 부모 인스턴스에서 내가 원하는 데이터의 변경 spinner의 loadingStatus를 변경 시키기 위함이다. 이벤트가 발생하는곳은 여기서 발생시키는데, But.. 이런 에러가 발생됬다.... 뭐가 문제인지 몰라서 3시간동안 Vue의 코드를 까보면서 현자타임이 수백번 찾아왔었다..(봐도 모르겠어~~) vue의 버젼이나 emit 사용 방법이 다른건가? package.json도 갈아엎어 보고 별 이상한 짓거리를 다했습니다. 근데 저 에러의 의미가 내가 이벤트를 등록시켰지만 그 이벤트를 등록한 곳에서 해당 method..
-Reactivity : Vue JS 추구하는 가장 중요한 포인트 : 변경된 데이터를 바로 바로 적용하는 것 -인스턴스 : Vue 로 개발할때 개발해야할 단위, 필수적으로 생성해야할 요소 -컴포넌트 : 프론트 프레임워크 부분에서 중요한 요소들(재사용성, 반복 줄이기) -컴포넌트 통신 : 통신 규악을 세움으로써 데이터의 흐름을 예측할 수 있게 하는것 -props : 상위 -> 하위 -event emit : 하위 -> 상위 -HTTP 통신 라이브러리(axios) :깃헙 보자 https://github.com/axios/axios -템플릿 문법 - 데이터 바인딩 (v-bind) - 뷰 디렉티브 (v- ) -Vue CLI :명령어로 프로젝트를 생성하는 도구, 웹팩을 씀 -싱글 파일 컴포넌트 : 파일을 쪼개서 구..