728x90 개발/Vue.js5 프로젝트에 Vue.js를 적용한 경험 개요 프로젝트 소스 중 문자열을 가지고 화면을 그리던 레거시 소스를 발견하여 직접 DOM을 조작하지 않고 화면을 구성하도록 Vue.js를 입혀 3300라인을 900라인으로 줄였다. 해당 경험을 간단히 정리해보았다. 화면 요구 사항 상품 리스트의 각 상품 정보가 다르다. 상품 리스트에 있는 상품 상태에 따라 뱃지가 달라져야 한다. 상품 케이스에 따라 버튼 UI가 다르다. 변경 전 소스 script에서 각 상품별 정보를 DOM에 문자열을 직접 수정한다. 상품 리스트 소스 중 스크립트 일부 ... if(contentItem.linkCd == 'APP_MN_KD30'){ content += '' var cnt = 0; if(item.newLaunched == 1 && cnt = 100) ? '' : '' con.. 2023. 4. 3. [Vue.js] TypeError: Cannot read properties of undefined (reading '__ob__') 해결방법 시작점 프로젝트 당시 페이지를 이동하면 이전 페이지의 Vue를 destroy하는 과정에서 다음과 같은 에러가 발생했다. 그럼 다음 에러를 해결해보자. 프로젝트 구조 프로젝트 구조는 다음과 같이 Vue 안에 컴포넌트가 있었다. 상품리스트 Vue └ 상품별 뱃지 Vue component 편성표 Vue . . . 상품 리스트 Vue Template 상품별 뱃지 Vue Component 상품리스트 Vue가 destroy될때 우리가 기대하는 Vue의 라이프사이클은 다음과 같다. beforeDestroy 상품 리스트 beforeDestroy 상품별 뱃지 destroyed 상품별 뱃지 deestroyed 상품 리스트 하지만 위에 기대와는 다르게 상품별 뱃지 컴포넌트를 destroyed 하는 과정에서 Type에러가 발.. 2022. 10. 27. Vue Cli 4.x (Vue3)에서 vue-router 사용하기 Vue를 이용한 토이 프로젝트를 하면서 SPA 구조를 위해 router를 사용하려고 막 구글링을 해서 만든 코드에서 에러가 발생하였다.. 문제 발생 Cannot read property 'use' of undefined 결국은 해결하였지만 몇시간을 헤매 해결방안을 찾았다. 결론부터 말하면 버전의 호환성 문제였다. vue3를 vue2로 낮추면 해결가능하였지만 나는 vue3로 하고 싶었다. 그럼 Vue3로 vue-router를 구현해보자. 해결방안 1. 먼저 vue-router를 다음 명령어로 재설치한다. (버전을 맞추기 위해..) npm i vue-router@next 2. router.js를 만들고 다음 코드를 작성하자. (필자의 프로젝트는 Vue cli 이다.) import {createWebHisto.. 2021. 8. 13. Vue.js란? Vue.js란? 웹 페이지 화면을 개발하기 위한 프레임워크로 React와 Angular의 장점을 가져 성능이 우수하고 가볍습니다. Vue.js와 다른 프레임워크 비교표 Vue.js React Angular Virtual DOM O O X 장점 쉬움, React와 Angular의 장점 적용 이벤트 핸들링 용이, 다양한 플랫폼 개발 가능, 페이스북 지원 잘 된 구조화, 구글지원 단점 래퍼런스가 적음 필수 라이브러리 많음, JSX에서 로직구현 높은 러닝커브(많은 학습시간) 환경 빠른 개발 요구 시 많은 이벤트 필요시 엔터프라이즈 언어 ES6 JSX TypeScript Vue.js 특징 MVVM 패턴 Virtual DOM 가벼움 Template과 Component MVVM 패턴 MVVM(Mode - View -.. 2021. 7. 6. vue.$NextTick이란? vm.$nextTick 해당 메서드는 다음 렌더링 사이클 이후 실행될 콜백 함수를 등록할 수 있는 기능을 제공하는 메서드이다. 이 말은 즉, $nextTick의 콜백 함수 안에서 DOM을 조작하면, 데이터를 가지고 화면을 그리기 전에 DOM이 먼저 생성되며 원하는 트리(태그)를 찾지 못하는 오류를 막을 수 있다. created : function() { this.$nextTick(function(){ var item = document.getElementById('textBox'); item.style.backgroundColor = 'green'; }); } $nextTick은 await/async와도 함께 사용 가능하다고 한다. methods : { async doSomething(){ await t.. 2021. 7. 4. 이전 1 다음 728x90
