dongQueue's dev

안녕하세요. 이전에는 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..

현재 VUE 로 클라이언트쪽을 개발해서 별도의 웹서버 없이 AWS의 정적 호스팅 기능을 사용하여 호스팅 하고 있습니다. 웹서버가 없으니 장점만 있고 단점은 없다고 생각하고 있었는데 문제가 발생했습니다. 비교하고 있는 다른 사이트 보다 초기 로딩 속도가 너무 느립니다. -_-;; 아무래도 클라이언트 단에서 렌더링이나 관련 소스의 해석이 이루어지다 보니 동작속도가 클라이언트 성능에 많이 좌우되는 문제가 발생하였습니다. SERVER-SIDE-RENDERING으로 바꿀까 하다가, 우선 속도개선 작업을 먼저 진행해 보기로 하였고 첫번째로 Lazy Loading 을 적용하였습니다. 1. Lazy Loading 이란? Lazy loading 이란, 화면의 보이는 부분 또는 동작에 필요한 소스를 먼저 로드하고 다른 소..

이전에 서치콘솔을 적용 한 후 (이전글: vue로 개발한 페이지 검색엔진에 노출시키는 법) 이번에는 사이트 접속자 통계 및 페이지별 노출 빈도를 좀 더 자세히 확인하기 위해 구글 애널리틱스를 적용해 보았습니다. 도메인만 있으면 무료로 사용할 수 있고 실제 적용하고 보니 기능도 강력한 것 같습니다. 1. 사이트 등록 구글 애널리틱스(https://analytics.google.com)에 접속해서 애널리틱스용 계정을 만들고 사이트를 추가합니다. 첫번째로 간단하게 계정이름을 입력합니다. (아래에 계정 데이터 공유 설정은 권장사항대로 전체를 선택하였습니다.) 다음으로 측정 대상을 선택합니다. 웹 또는 앱, 웹/앱을 동시에 측정할 수 있는데, 저는 홈페이지 트래픽을 측정하려는게 목적이고, 웹/앱 전체는 베타버전이..

한줄요약: vue-router를 histroy 모드로 변경 후, Prereding으로 빌드하도록 vue.config.js 변경 이번에는 Prerendering으로 사이트를 빌드하여 검색엔진에 노출시키는 법에 대해 작성하겠습니다. 기타 방법은 이전글(vue로 개발한 페이지 검색엔진에 노출시크는 방법)을 참고해 주세요. Prerendering 은? 프리렌더링은 웹사이트를 빌드할때 지정한 특정 페이지를 미리 렌더링해서 저장하는 기술입니다. 구현이 쉽고 빌드 타임에 모든 처리가 끝나므로 런타임에 추가로 부담이 들지 않습니다만, 빌드 타임은 당연스럽게 늘어나게 됩니다. 단, vue-router 이 hash 모드(xxx.com/#/home 과 같이 #이 router에 붙는 방식)가 아니라 history (xxx.c..

이래저래 보안 강화를 위해 vpn을 써야할 일이 생겼다. AWS에서 vpn서비스도 제공하고 있긴한데. 요금이 문제 인증을 받으려면 AD(액티브 디렉토리) 나 사설인증서 를 써야 하는데 둘다 월에 기본 400불 정도는 예상해야 했다. 한푼이라도 아껴야 하는 입장에서 어떤 대안이 있나 찾아보다 ec2에 openvpn을 설치해서 사용하기로 했다. 1. 용도: 사무실 외부에서 DB 관리 및 test 환경 접속용. 2. ec2 생성 인스턴스 유형은 가장 저렴한 t3a.micro - ubuntu 18.04 로 선택. (만약 free tier가 남아있다면 t2.micro 선택) t3a.nano 도 있지만 이것저것 설치하고 나니 용량부족이 떠서 인스턴스 유형을 한등급 올린 상태. 설정시 보안그룹에서 inbound를 아..

vue 로 개발을 하던 도중 data grid를 출력할 일이 생겼다. report 솔루션 라이센스도 없고 이걸 html로 노가다 해야 하나 고민하던 도중 괜찮은 (물론 MIT 라이센스의) util 하나를 발견했다. 이름은 Print.js (http://printjs.crabbly.com/) 사이트를 방문해 보면 PDF, Html, Image, Json 프린팅을 지원한다고 되어 있다. 이중에서 Html 프린팅과 Json 프린팅 두가지를 시험해 보았다. 출력 데이터는 아래와 같다. 날짜 항목 이름 기수 금액 비고 2019-01-01 회비 홍길동 1기 30,000 2019 1월회비 2019-01-01 회비 김영일 3기 30,000 2019 1월회비 2019-01-02 회비 전도일 5기 30,000 2019 1..

vue 를 이용하여 single page web app을 개발하고 server side rendering 을 사용하지 않은 경우,검색엔진의 봇은 javascript로 구성된 사이트를 일종의 'fake website' 로 가정하여 스크롤링에서 제외할 수 있습니다.(구글 같은 경우 개선되었거나 예정인듯 합니다.) 이럴때 사용가능한 방법은 아래와 같습니다. 1. SSR (server side rendering)SSR은 클라이언트가 자바스크립트 코드를 실행하지 않을때 서버에서 페이지를 생성해 클라이언트에게 보내는 것입니다. SSR을 사용하는 것이 좋은 경우는 다음과 같습니다.- 사용자마다 다른 컨텐츠를 보여주어야 할때- 클라이언트와 실시간으로 상호작용을 해야할때 ( 채팅 서버 등 )- 페이지가 너무 많아 빌드에..