3.구현/HTML5&Javascript 썸네일형 리스트형 Javascript XLSX 파일 읽기 sheetjs 라이브러리[1]를 사용한 예제이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기본 라이브러리 포함 모든 라이브러리를 포함할 필요는 없고 xlsx.full.min.js만 포함해도 된다. 사용하는 기능에 따라서 포함하면 된다. XML 처리 function parseXlsx(data) { var workbook = XLSX.read(data,{ type:'buffer' }); var ret = {}; workbook.SheetNames.forEach( function(sheetName) { let row = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); ret[sheetN.. 더보기 [node.js] 단위테스트 사용하기 node.js에서 사용되는 단위테스트 라이브러리 들에 대해 간단하게 예제를 정리해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ should.js node.js 테스트 라이브러리 여러 asertion 함수 지원 설치 npm i --save-dev should 예제 10.should.be.equal(10) [1,2].should.have.length(2) ({one:1}).should.have.properties('one') ({one:1}).should.have.properties({'one':1}) 10.should.be.a.Number() [1,2].should.be.instanceOf(Array) Mocha node.js 테스트 프레임워크, 테.. 더보기 [node.js] websocket 사용하기 웹소켓은 웹 환경에서 웹소켓 클라이언트로 사용하는 예제이다.1 작성자: ospace114@empal.com, http://ospace.tistory.com/ var ws = new WebSocket('ws://localhost:3001'); ws.onopen = function (event) { ws.send("Client message: Hi!"); } ws.onmessage = function (event) { console.log("Server message: ", event.data); } ws.onerror = function (event) { console.log("Server error message: ", event.data); } 웹소켓 서버 웹소켓 서버 구현하기 위해서는 ws 패키지를 .. 더보기 [vue2] package 버전 및 빌드시간 사용 pakcage version package.json에 version 정보가 있다 이를 활용하는 방법을 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 일단 값을 가져오는 방식은 간단하다. 단순 json 파일을 로딩하고 필요로 하는 속성을 추출하면 된다. import { version } from '../../package'; vue.js에서 version을 사용하기 위해 computed을 추가했다. computed: { version() { return version; }, } 내부적으로 버전을 처리하는 방법도 있지만, 현재 배포된 버전을 확인할 수 있도록 화면에 출력해보자. v {{ version }} 위의 방식은 오른쪽 하단에 같은 자리에 출력.. 더보기 [vue2] vuetify 기본 구성 들어가기 vuetify는 vue.js에서 사용하는 대표적인 UI 컴포넌트 프레임워크 중에 하나이다. 라이센스는 MIT license이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 설치 yarn add vuetify yarn add sass@~1.32 sass-loader deepmerge -D plugin src 밑에 plugins 폴더에 vuetify.js 파일 생성한다. plugins 폴더가 없다면 새로만들면 된다. import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; // import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); exp.. 더보기 [vue2] 목록에서 체크박스 선택 처리 vue.js에서 배열 데이터를 목록 또는 표 형태로 출력하는 방식은 매우 간편하다. 그러나, 출력된 목록에서 일부 데이터를 선택해서 처리하는 경우는 어려워보인다. 이 부분도 쉽게 처리 하는 방법이 있다. 들어가기 목록으로 출력하고 데이터 선택은 체크박스로 처리하는 예제이다. 저도 예전에는 상당히 복잡하게 만든 기억이 있다. 여기서는 최종 3가지 방식으로 처리하는 예를 살펴보겠다. 물론 다른 방식도 있을 수도 있지만, 제가 사용했던 것 중에 그나마 좋다고 생각하는걸 정리했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 간단한 목록 출력 처리할 데이터는 vue.js에 있는 가이드 문서를 참고해서 사용했다. data() { return { todos: [ {.. 더보기 [vue2] vuetify 팝업 모달창 사용 vuetify를 사용한 팝업 모달창 사용법을 간단하게 정리해보았다. 들어가기 vuetify의 v-dialog을 사용해서 팝업모달창을 만들어보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ template 작성 확인 script 작성 사용예 등록된 컴포넌트명이 "Popup"이라고 가정하겠다. 사용할 팝업창을 ref 형태로 추가한다. let res = this.$refs.popup.open(this.popupValue); if (res) { console.log('result is', res); } else { console.log('popup cancel'); } $refs 통해서 open()을 호출한다. 참고 [1] Dialogs, https://vue.. 더보기 [vue2] 여러 숫자 자동입력 컴포넌트 작성자: ospace114@empal.com, http://ospace.tistory.com/ 속성 size: 숫자 입력 개수 사용예 소스코드 더보기 이전 1 2 3 4 5 6 다음