프로그래밍/Vue.js 15

vue3 i18n 도입 시도하기

기존 vue3 프로젝트의 문구 통일과 국제화 대비겸 vue-i18n 도입을 시도한다.다만, 프로젝트 덩치도 좀 커졌고 vue3+typescript 기반의 코드를 쉽게 자동화처리 해주는 도구는 딱히 없었다. 다행히도 ai가 많이 발전 중인 시기라 cursor의 도움을 받아 스크립트를 만들었다.완벽하게 보다는 가능성을 보려고 조금씩 다듬어가는 식으로 진행했다.script 영역은 일단 무시하고, 컴포넌트의 template 영역만 vue-i18n를 import 하고useI18n()을 선언하여 t 메서드를 가져오게 한뒤, template 태그영역의 한글들을 t로 wrap 해주는 것을 목표로 했다. 아래는 최소한 쓸만한 정도로 완성된 스크립트다.vue3의 props 전달문법이나 그 외 여러케이스, es의 템플릿 리..

vuejs Render Function 이해하기

Render Function이란?Vue에서는 보통 문법을 사용해서 컴포넌트의 마크업을 구성하지만, render function을 사용해서 직접 컴포넌트를 구축할 수도 있다. Vue는 빌드 시점에 우리가 작성한 템플릿을 render function으로 컴파일하는데, 이를 통해 Virtual DOM을 구성하게 된다.왜 Render Function을 사용할까?일반적인 템플릿 문법으로는 구현하기 어려운 높은 수준의 커스터마이징이나 유연성이 필요할 때 render function을 사용하면 좋다. 주로 다음과 같은 경우에 사용하게 된다:복잡한 로직 기반의 동적 컴포넌트 렌더링이 필요할 때Virtual DOM을 직접 다뤄야 할 때JSX를 사용하고 싶을 때기본 예제로 알아보기간단한 컴포넌트를 render funct..

vuejs Renderless Component 패턴 이해하기

Renderless Component란?Renderless Component는 Vue.js에서 컴포넌트의 로직과 표현을 분리하는 패턴이다. 이 패턴은 컴포넌트의 기능을 캡슐화하면서도 시각적인 표현은 제한하지 않는다.. 즉, Renderless Component는 로직과 동작에만 집중하고, 실제 렌더링은 부모 컴포넌트에 맡기는 방식이다.실제 예제로 이해Toggle 컴포넌트 만들기애플리케이션의 여러 부분에서 사용될 수 있는 토글 UI 요소를 생각해보기. 어떤 토글은 버튼으로, 다른 토글은 체크박스나 스위치로 표시될 수 있다.먼저 기본적인 renderless 토글 컴포넌트를 만들어보면 다음과 같다:  이제 이 renderless 컴포넌트를 사용하여 세 가지 다른 스타일의 토글을 만들어보면 다음과 같다: ..

vuejs 반응형 sprite canvas 만들기

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

vuejs 슬롯머신 만들기

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(); //..

vuejs 룰렛만들기

룰렛을 적용시킬 원판이미지와 배열을 준비한다. 이미지는 테스트로 첨부하니 테스트를 원하면 사용하도록. /** * # 스크립트 준비 */ // 룰렛결과 배열 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: "영..

vuejs 가상스크롤로 로딩지연 개선

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

vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (3)

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

vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (2)

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

vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (1)

(참고. 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..