note

canvas와 감싸는 container div를 만든다. 이때, 상위 부모의 사이즈가 반응적이어야 한다. 보닌(본인)은 sprite 진행 이전 poster 이미지를 하나 두고 사이즈를 가져올수 있게끔 하였다. poster이미지의 가로세로가 줄어들든 늘어나든 canvas를 감싸는 container의 가로세로를 해당 poster 이미지 가로세로로 세팅해주면 되기때문이다. 시작 각 ref변수와 sprite에 사용할 변수도 만들어준다. const spritePosterRef = ref(); // 애니메이션 이전 폴더블 이미지 영역 const spriteContainerRef = ref(); // 애니메이션 전체 영역 const spriteRef = ref(); // 애니메이션 캔버스 영역 const isLoad..

vuejs slotmachine 만들기. (슬롯에 사용한 이미지대신 텍스트로만 기록하겠다.) 3가지 라인이 있는 슬롯머신인데, 가운데는 그대로있고 첫번째와 세번째만 회전하는 슬롯머신을 구현하게 되었다. 첫번째 슬롯에는 1,2,3이 들어간다. 두번째는 0값으로 고정. 세번째는 각 나라별 화폐단위가 위치한다. ex) 첫번째슬롯이 2, 세번째 슬롯이 jpy가 오게되면 20 jpy가 된다. 먼저 머신 div 객체에 해당하는 ref객체를 만들고, 관련 배열을 생성한다. // 슬롯머신 진행중 여부 const isSpining = ref(false); // 슬롯머신 라인 div 접근 객체 ref const slotNumberRef = ref(); // 첫번째 라인 const slotUnitRef = ref(); //..

룰렛을 적용시킬 원판이미지와 배열을 준비한다. 이미지는 테스트로 첨부하니 테스트를 원하면 사용하도록. /** * # 스크립트 준비 */ // 룰렛결과 배열 const itemList = [ {value: 0, label: "샌드위치"}, {value: 1, label: "핫도그"}, {value: 2, label: "도너츠"}, {value: 3, label: "마카롱"}, {value: 4, label: "아이스크림"}, {value: 5, label: "에그타르트"}, {value: 6, label: "크로와상"}, {value: 7, label: "케이크"}, {value: 8, label: "면세점 상품권"}, {value: 9, label: "우주패스"}, {value: 10, label: "영..

서버에서 가져올 enum(wasteType) 목록은 최초 접속시에 store에 없으면, 통신하여 담아두고 사용하고, route 이동시에 store에 담겨있다면 재사용을 합니다. (현재 300여개) 이번에 A 메뉴에 해당 enum리스트가 조건으로 들어가는데, 최초로딩 시 혹은 다른; emun리스트를 한번도 가져오지않는 페이지 > A 메뉴 최초진입시에 ui가 2-5초 멈추는 현상이 발생해서, 해결하는 과정을 기록합니다. 1. vue3 devtools의 performance 체크 페이지 진입을 해보면 IntegratedSearch컴포넌트에 대한 성능 타임라인을 볼 수 있습니다. 실제로는 마우스클릭부터 렌더링까지 시간을 나눠 정확하게 보고싶었는데, 방법을 잘 모르겠어서 통합검색 컴포넌트만 filter를 걸어서 ..

이전에는 공공데이터 api를 사용해서 리스트를 출력하고, vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (2) 이전에는 공공데이터 api를 이용해서 간단하게 ui구현을 해보았다. /storesByAddr api를 이용해서 address값을 조회조건으로 추가해보려고한다. 일단 행정구역은 api를 찾기 귀찮(?)아서 통계분류포털 에서 행정구.. 19park.tistory.com 행정구역 분류를 mysql로 관리하여 nodejs express로 대충 api를 만들어서 조회조건을 구현했다. 이제 리스트를 클릭하면 판매처 상세정보와 위/경도값을 가지고 지도에 표시해보려한다.. 일단 구현할 상세페이지 컴포넌트를 만든다. vuetify의 bottom sheet로 한번 만들어보자. 그리고 doOpen과..

이전에는 공공데이터 api를 이용해서 간단하게 ui구현을 해보았다. /storesByAddr api를 이용해서 address값을 조회조건으로 추가해보려고한다. 일단 행정구역은 api를 찾기 귀찮(?)아서 통계분류포털 에서 행정구역분류를 엑셀로 받았다. UI쪽 조회조건 구현은 3개의 셀렉트박스를 구현할 예정이다. ex) 첫번째 셀렉트박스엔 서울특별시, 대전광역시 등 `시` 목록이 나열. 서울특별시가 선택되어있으면 두번째 셀렉트박스엔 강남구, 은평구 등 시에 해당하는 `구` 목록이 나열. 은평구가 선택되어있으면 세번째 셀렉트박스엔 갈현동, 구산동 등 구에 해당하는 `동` 목록이 나열. 위 엑셀파일에는 분류코드와 시, 구, 동 정보가 있어서 db에 넣어서 사용하면 될듯하다. 일단 backend 와 fronte..

(참고. https://github.com/19park/mask-finder) 10일 19시부터 건강보험심사평가원에서 제공하는 마스크 정보(판매처별 입고량, 판매량 등)를 공공데이터활용지원센터에서 오픈API형태로 제공해주길래 테스트 해봄. vue 프로젝트를 하나만들기 vue create mask-finder 모듈 설치해주기 npm i 통신위한 axios와 라우팅위한 vue-router, 전역상태관리위한 vuex 설치하기 npm i axios lodash vue-router material-design-icons-iconfont npm i -D eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue vue add vuetify vue add vu..

최근 jest로 vue 테스팅을 하게되어 간략하게나마 기록하기위해 글쓰는중.. 간단한 테스팅 프로젝트 스터디를 위하여 vue cli로 스캐폴딩을 생성한다. vue-jest 란 프로젝트를 생성하였으니, 의존 모듈을 설치한다.* (수정) vue-jest로 만들면 내부 모듈과 이름이 같아 겹치니 vue-jest-test로 수정하여야한다..(package.json) 그럼 node_modules폴더가 생기고 아래와 같은 폴더구조가 된다. npm run serve로 개발서버를 실행시키면 일반적인 기초 화면을 볼 수 있다. 그럼 jest를 추가하여 일반적인 저 화면의 텍스트를 테스팅 해보도록 하자... jest, babel-jest, vue-jest, @vue/test-utils를 설치하였다.jest 테스팅 도구이고..

저장소 설계의 이해ItemList 의 대상 정보를 Vuex의 상태 관리를 활용한 경우프로젝트에 Vuex 추가npm install --save vuexsrc/main.jsimport Vue from 'vue'import Vuex from 'vuex'import App from './App'import ProgressBar from './components/ProgressBar'import storeConfig from './store/store-config' Vue.use(Vuex) // const store = new Vuex.Store(storeConfig) // Vue.config.productionTip = false // global progress barconst bar = new Vue(Pro..

엑셀컴포넌트를 사용해야해서 jquery와 함께 사용하던 handsontable을 vuejs에 적용하기. 단순히 html페이지에 적용할땐 script태그에 적용시킬 엘리먼트(ex div)를 선언하고 생성자에 던져주었다. vue-handsontable은 HOT-TABLE이란 컴포넌트로 사용할수가 있었는데, data바인딩과 this접근(vue접근과 handsontable접근)이 애매해서 컴포넌트식이아닌 기존 형태로 개발했다.. vue-handsontable의 예제페이지 < 예제페이지는 이 페이지 하나만 있어서 딱히 도움이 안됐다.. 일단 template영역은 handsontable을 적용시킬 요소하나를 작성한다. id="hot-table"로 하였다. script영역은 hot 이란 전역변수를 만들었고, data..