본문 바로가기

개발/Vue.js10

Vue.js xlsx 엑셀 다운로드 Vue 엑셀 다운로드 서버를 거치지 않고 화면 상에서 xlsx 라이브러리를 사용해 엑셀 다운로드를 하는 방법이다. xlsx 라이브러리 설치 npm install --save xlsx xlsx 를 사용한 엑셀 다운로드 기능 구현 import xlsx from 'xlsx'; ... excelDownload() { const fileName = 'excelFile';// 파일명 const sheetName = 'sheet1';// 시트명 const header = [['이름', '나이', '이메일']];// 컬럼명 const list = [{ name: '홍길동', age: 15, email: '홍길동@naver.com' }, { name: '김길동', age: 44, email: '김길동@naver.com'.. 2022. 6. 16.

vue router / query vs params vue router 뷰로 싱글 페이지 어플리케이션을 구현할 때 화면 전환 및 페이지 이동을 위해 사용하는 라이브러리이다. 웹에서 라우팅은 페이지 간의 이동 방법을 뜻하는데 뷰는 화면 이동 시 DOM을 새로 갱신하지 않고 변경된 컴포넌트만 갱신하여 깜빡임 없이 매끄럽게 전환되는 장점이 있다. 페이지 이동 태그로 화면에서 태그로 치환되어 실행된다. :to 속성 path: 이동하려는 경로 name: 이동하려는 경로를 라우터에 설정된 이름으로 지정 query: query string 형태로 전달되는 파라미터, GET 방식 params: name 속성을 지정하여 이동할 때(path가 아닌) 전달될 파라미터, POST 방식 query vs. params 🧐 params를 사용하려면 path가 아닌 name으로 이동.. 2022. 6. 14.

$nextTick() Vue DOM 조작 시 주의해야 할 점 Vue.js에서 data 가 업데이트되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생하기도 한다. DOM의 변경사항을 비동기적으로 업데이트하기 때문이다. 예를 들어, created 훅에서 DOM을 조작하려고 할 때는 아직 DOM 생성이 되기 전이므로 태그를 찾지 못하게 된다. created는 인스턴스가 작성된 후 동기적으로 호출되며 mounted보다 먼저 호출되기 때문에 가상돔을 조작할 수는 없다. mounted는 el에 인스턴스가 마운트된 직후 호출되어 가상돔 조작이 가능하다. created: function() { var dom = document.getElementById('item1'); dom.style.backgroundColor.. 2022. 4. 18.

Vue 생명주기 Vue 인스턴스 라이프 사이클 인스턴스 생성 시 데이터 관찰, 템플릿 컴파일, DOM 에 객체 연결, 데이터 변경 시 DOM 을 업데이트 하게 된다. ① Creation: 컴포넌트 초기화 단계 컴포넌트가 DOM에 추가되기 전, 클라이언트단과 서버단 렌더링 모두에서 처리해야 할 일로 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다. - beforeCreate Vue.JS의 라이프 사이클 훅 중에서 가장 먼저 실행 되는 훅입니다. data와 이벤트($on, $once, $off, $emit), 감시자($watch)등이 설정 되기 전에 호출되는 라이프 사이클 훅이다. - created data, computed, methods, watch 등과 같은 옵션 설정이 .. 2022. 4. 13.

Vue3 Composition API Composition API 란? Composition API는 컴포넌트 로직을 유연하게 구성할 수 있도록 하는 함수 기반 API이다. 기존에는 data, methods, computed에 로직이 분리되어 있어 데이터가 어디에서 사용되는지 파악하기 힘들었다. 컴포넌트의 계층구조가 복잡해지거나 프로젝트 규모가 커지면 추척 및 관리에 어려움이 있다. 컴포지션 API는 setup() 이라는 메서드 안에 로직을 모아놓는 구조이다. 데이터가 어떻게 변화하고 사용되는지 그룹핑하여 데이터의 흐름 파악이 쉽고 유지보수에 용이하다. Setup 함수 컴포넌트 객체에서 속성으로 분리되었던 기능 대부분(data, methods, computed)을 setup 함수 안에서 사용할 수 있다. 또한, setup는 beforeCre.. 2022. 4. 6.

Vuex / 상태관리 / Vuex 패턴 및 요소 Vuex 란? Vue.js 의 상태 관리를 위한 패턴이자 라이브러리이다. 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. Vuex 를 사용하지 않은 경우 컴포넌트 기반 프레임워크는 한 화면을 작은 단위의 컴포넌트 여러 개로 쪼개어 구성한다. 예를 들어, 뷰에서는 컴포넌트 간 데이터 전달을 위해 emit, props 등을 사용하는데 여기서 몇 가지 문제점이 있다. 데이터의 움직임을 확인할 수 없다. 부모-자식 컴포넌트의 관계가 복잡해지면 데이터의 이동을 파악하기 어렵다. 컴포넌트로부터 데이터를 전달받기 위해 중간에 거쳐야 할 컴포넌트가 많아진다. 먼저, 자식 컴포넌트의 깊이에 따라 props, emit 의 수가 많아지며 관리에 어려움이 생긴다. 게다가 부.. 2022. 4. 5.

Vue 라우터 / SPA / Router 값 전달 SPA (Single Page Application) 일반적인 웹 어플리케이션은 클라이언트가 웹 페이지를 요청하면 서버로부터 html 을 전달 받아 렌더링 엔진을 통해 화면에 보여준다. 한 페이지에 해당하는 페이지 용량이 커지면 요청마다 매번 새로운 페이지를 전달 받기 버겁다. 이러한 문제를 해결하는 것이 SPA, Single Page Application 이다. SPA 는 단일 페이지로 구성된 웹 어플리케이션으로 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 페이지 변경이 일어난다는 것이 최초 로드되었을 때 미리 브라우저에 올라간 템플릿만 교체하는 것이다. 화면 이동 시에 필요한 데이터를 html 로 전달(서버사이드 렌더링) 받지 않고 필요한 데이터만 서버로부터 전달 받아 동적.. 2022. 4. 4.

Vue 컴포넌트 / 컴포넌트 간 통신 Vue 컴포넌트 컴포넌트는 화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다. Vue 에서 최상위 컴포넌트는 root 고 이를 시작으로 트리 구조로 형성된다. - 전역 컴포넌트 여러 인스턴스에서 공통으로 사용, 모든 자식 컴포넌트에서 사용 가능하다. 주로 플러그인, 라이브러리 등 앱 전역에서 사용할 공통 컴포넌트를 작성한다. vue 인스턴스 생성 전에 컴포넌트를 만들어주어야 한다. Vue.component('component-a', { template: ' hello world AAA !!!'}) Vue.component('component-b', { template: ' hello world BBB !!!'}) Vue.component('component-c', { templat.. 2022. 4. 4.

Vue 사용법 / 문법 / 옵션 / 디렉티브 Vue.js 적용 방법 👆CDN 방식으로 Vue 시작하기 - 개발용 // 최신버전 불러오기 // 특정버전 불러오기 - 상용 ✌️Webpack 방식으로 Vue 시작하기 npm으로 cli를 설치해 vue 라이브러리를 불러오는 방식이다. npm install -g @vue/cli # OR yarn global add @vue/cli 🔎 npm(Node Package Manager) node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해서 관리하고 배포한다. 직접 개발한 모듈이나 다른 사용자들이 미리 만들어놓은 모듈을 간편하게 다운받아 사용할 수 있다. 🔎 Node.js 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 자바스크립트를 활용하고 내장 http 서버 라이브러리를 가지고 있어 웹 .. 2022. 3. 28.

Vue.js 기본 개념 / 사용하는 이유 / 가상 돔 Vue.js 란? 자바스크립트(이하 js) 기반으로 만들어진 웹 개발을 위한 프레임워크 중 하나이다. MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리로 데이터가 변경되면 DOM에 다시 대입해줘야 화면이 변경되었던 일반적인 웹 개발 방식과 다르게, 데이터 변화를 감지하여 화면에 변경사항을 바로 표시할 수 있다. MVVM 패턴을 사용한다. Virtual DOM을 사용한다.(React의 가상 돔 채택) 양방향 데이터 바인딩을 제공한다.(Angular의 데이터 바인딩 채택) Template와 Component를 사용하여 재사용이 가능한 인터페이스를 만든다. 왜 Vue.js 를 사용할까? 1. 데이터 바인딩이 간편하다. 아래 HTML 코드에서 엘리먼트를 변경하려면 어떻게 해야할까? hello.. 2022. 3. 17.

이전 1 다음

티스토리툴바