728x90 vue.js4 프로젝트에 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. SPA(Single Page Application)란? Vue.js를 이용한 Single Page Application 즉, SPA 구조로 된 프로젝트를 회사의 서비스앱에서 처음 접하게 되었다. SPA(Single Page Application)란? 단일 페이지로 구현한 사이트(애플리케이션)이다. 이와 반대 개념은 MPA(Multi Page Application)이고 MPA는 여러 페이지로 구성된 즉, 우리가 보통 흔히 보는 사이트들을 예로 들 수 있다. SPA는 하나의 페이지에서 계속 팝업을 띄운다고 생각하면 된다 (사실 팝업은 아니고 처음 화면인 HTML을 DOM으로 랜더링(바꿈)을 해주는 것이지만). 반면 MPA는 로그인 페이지를 누르면 로그인html로 이동한다고 생각하면 된다. SPA의 장점 빠른 반응성, 화면 전환(사용자 친화적) 서버 요청이 적음 .. 2021. 7. 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
