dongQueue's dev

안녕하세요. 사실 제목을 뭐라고 지어야 할지 몰라 일단 트리 구조라고 지었는데.. function을 개발하게 된 상황은 이렇습니다. 1. data object 구조 const nationalities = [ {code: 'KR', text: 'Korea'}, {code: 'CN', text: 'China'}, {code: 'JP', text: 'Japan'}, {code: 'HK', text: 'Hongkong'} ] var data = [ { name: 'jin', nationality: 'CH', children: [ { name: 'jinA1', nationality: 'CH' }, { name: 'jinA2', nationality: 'HK', children: [ { name: 'jinA2B1'..

안녕하세요. 이번 올릴 주제는 mixin 을 이용하여 공통으로 사용하는 로직을 여러 component에서 공유하는 방법입니다. 중복을 제거하여 component의 size도 줄이고 코드가 분산되지 않아 유지보수성도 높일 수 있습니다. :) mixin에 대한 설명은 vuejs.org에 아래와 같이 설명되어 있습니다. 전달인자: {Object} mixin 사용방법: 전역으로 mixin을 적용합니다. 생성된 모든 Vue 인스턴스에 영향을 줍니다. 플러그인 작성자가 컴포넌트에 사용자 정의 동작을 주입하는데 플러그인을 사용할 수 있습니다. 애플리케이션 코드에서는 추천하지 않습니다. https://kr.vuejs.org/v2/api/#Vue-mixin API — Vue.js Vue.js - 프로그레시브 자바스크립트..

안녕하세요. 오늘은 client side rendering 방식에서 동일한 리소스의 변경시 변경사항을 client에 제대로 적용하는 방법에 대해 설명드리겠습니다. 배경을 간단히 설명드리자면 저희가 Vue로 개발을 하고 서비스를 하면서 웹서버를 별도로 둘까하다 인원이 작고 관리도 힘들것 같아. aws s3-cloudfront 조합으로 Client side rendering 방식으로 서비스를 하기로 결정하였는데 이미 아시겠지만 Client side rendering 방식은 필요한 리소스 (html, css, js) 를 사용자가 접근시 client에 내려주고 client에서 내려받은 리소스를 바탕으로 rendering 하게 됩니다. 맨 처음 접속시 리소스를 받느라 느려지는 점을 제외하면 (lazy loadin..

안녕하세요. 이전에는 json 파일로 다국어 메시지를 관리하는 법에 대해 적어보았습니다. https://dong-queue.tistory.com/64 Vue에서 다국어 처리 - JSON 파일을 이용한 관리 안녕하세요. 이전에는 Vue 다국어 처리시 i18n의 기본적인 사용방법에 대해 적었습니다. https://dong-queue.tistory.com/59 Vue 에서 다국어 처리 - 기초 Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를. dong-queue.tistory.com 오늘은 메시지를 DB에서 관리하고 i18n으로 불러오는 법에 대해 설명드리겠습니다. (db연결은 구성되어 있다고 가정하고 data를 db에서 읽어오는 부분에 대한 설명은 하지 않겠습니다.) 1. Table 구성 및 d..

안녕하세요. 이전에는 Vue 다국어 처리시 i18n의 기본적인 사용방법에 대해 적었습니다. https://dong-queue.tistory.com/59 Vue 에서 다국어 처리 - 기초 Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를 구현할 수 있습니다. vue i18n의 소개 사이트는 다음과 같습니다. https://kazupon.github.io/vue-i18n/started.html Getting started | Vue I18n Getting s.. dong-queue.tistory.com 이번에는 실제 사용할 다국어 메시지를 관리하는 법에 대해 적어볼려고 하는데 샘플 코드를 받아보면 대부분 JSON 파일로 되어 있기 때문에 우선은 JSON 파일을 관리하는 법에 대해 설명하겠습니다. ..

Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를 구현할 수 있습니다. vue i18n의 소개 사이트는 다음과 같습니다. https://kazupon.github.io/vue-i18n/started.html Getting started | Vue I18n Getting started NOTE We will be using ES2015 in the code samples in the guide. HTML JavaScript Output the following: Last Updated: 2/5/2019, 11:35:51 PM kazupon.github.io vuetify 나 quasar 와 같은 프레임워크를 사용하시는 경우는 프레임워크 설치시 이미 포함되어 설치되지만 프레임워크 없이 사용하시는 ..

이전에 Vue에서 ag-Grid를 설치 사용하는 법에 대해 간략하게 적어보았습니다. https://dong-queue.tistory.com/57 Vue에서 ag-Grid 사용하기 안녕하세요. 이번에는 강력한 무료 data grid 도구인 AG grid를 Vue에서 사용하는 법에 대해 적어보겠습니다. ■ ag-Grid란? 자바스크립트 기반의 오픈 소스 그리드이며 무료(커뮤니티)와 상용(엔터프라이즈)버전.. dong-queue.tistory.com 오늘은 컬럼 정의에 추가 가능한 다양한 옵션에 대해 설명하겠습니다. 우선 이전 글의 예제의 데이터를 조금 변형해 보겠습니다. 위와 같이 작성하면 대략 아래와 같은 형태로 그리드가 표시될 겁니다. Make Model Grade Price Stock 현대 아반떼 준중..

안녕하세요. 이번에는 강력한 무료 data grid 도구인 AG grid를 Vue에서 사용하는 법에 대해 적어보겠습니다. ■ ag-Grid란? 자바스크립트 기반의 오픈 소스 그리드이며 무료(커뮤니티)와 상용(엔터프라이즈)버전으로 구분되어 있습니다. 상용버전에서는 서버사이드 랜더링, 엑셀 추출, Master-Detail 구조, Tree, Pivot 등을 지원하며, 무료버전에서도 왠만한 기능은 모두 지원하고 있습니다. 무료버전과 유료버전의 전체 지원 기능은 아래 링크에서 확인 부탁드립니다. https://www.ag-grid.com/javascript-grid-set-license/ ag-Grid ag-Grid is a feature-rich datagrid available in Free or Enterp..