본문 바로가기
728x90

Vue12

Vue - VueRouter 설정 Vue Router 설치 및 기본 설정 Vue와 같이 클라이언트 사이드 랜더딩(CSR)을 하는 경우, VueRouter와 같은 플러그인을 사용합니다. VueRouter 설치 npm install vue-router VueRouter 사용방법 routes > index.js 디렉토리와 index.js 파일을 만듭니다. 그 후 아래와 같은 코드를 추가 합니다. import Vue from 'vue'; import VueRouter from 'vue-router'; // Vue.use(...) 플러그인을 초기화하기 위해 필요한 코드임 Vue.use(VueRouter); 모듈 시스템에서 사용하면 Vue.use()를 통해 명시적으로 라우터를 추가해야합니다. 여기까지 초기 router 설정 파일 설정입니다. 이제 .. 2022. 3. 25.
Vue - axios 구조화(instance 활용) axios 구조화 axios 호출코드를 그때그때 쓸 필요없이 instance를 이용한 간소화와 js를 이용한 모듈화를 하여, axios 함수를 관리할 수 있습니다. api > index.js 와 같은 js 파일을 만들어줍니다. import axios from 'axios'; // axios 공통 성정을 미리 다 넣는 메소드 create() const instance = axios.create({ baseURL: 'https://some-domain.com/api/', headers: { 'X-Custom-Header': 'foobar' }, timeout: 1000, }) function registerUser(userData) { return instance.post('/signup', userData.. 2022. 3. 25.
Vue - VueRouter Navigation Guards VueRouter Navigation Guards란? 사용자가 브라우저의 url을 이용해서 페이지를 강제로 이동할 때 이를 방지하기 위한 라우터 설정입니다. 또한 사용자에게 특정 페이지에 접근권한을 부여하거나 조건에 따른 리다이렉트 등을 설정할 때 사용합니다. Navigation Guards 기본형 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) router.beforeEach는 router에서 데이터를 먼저 받아와서 페이지를 호출하게 하는 함수이며 전역 가드입니다. 네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생합니다. 가드는 비동기식으로 실행 될 수 있으며.. 2022. 3. 25.
Vue - Vuex 헬퍼 함수 Vuex를 먼저 이해한 후 보는 것을 추천합니다. Vuex를 다룬 이전 포스팅 참고하세요. https://getthismoment.tistory.com/108 Vuex 헬퍼 함수란 Vuex 헬퍼 함수란 Vuex store에 선언된 state, getters, mutations, actions 프로퍼티와 메소드를 다른 vue 컴포넌트에서 손쉽게 호출하고 재사용하기 위해 사용하는 함수입니다. Vuex helper 함수 종류 mapState - state를 연결해주는 함수 mapGetters - getters를 연결해주는 함수 mapMutations - mutations를 연결해주는 함수 mapActions - actions를 연결해주는 함수 Vuex 헬퍼 함수 기본형 컴포넌트에 Vuex 헬퍼 함수를 선언한 .. 2022. 3. 25.
Vue - axios Interceptors // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do .. 2022. 3. 25.
Vue - axios (Http 통신) axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. axios 설치 Using npm: $ npm install axios Using bower: $ bower install axios Using yarn: $ yarn add axios Using jsDelivr CDN: Axios는 ajax와 달리 Promise 객체를 리턴합니다. Promise 객체 내부에 response를 통해서 데이터를 받아오는 것이죠. Promise 객체를 받아오기 때문에 axios는 async, await 를 사용해서 비동기 처리를 할 수 있습니다. axios 비교 위와 같은 표를 보았을 때 axios는 별도의 설치가 필요하다는 단점이 있지만 그것을.. 2022. 3. 25.
Vue - Vuex Vuex란? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 즉, Vuex를 통해서 어플리케이션 전체에서 사용할 수 있는 전역 변수들을 선언하고 관리, 호출, 재사용 등을 가능하게 합니다. Vuex는 컴포넌트에서 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리합니다. 이를 통해 Vuex의 컴포넌트 트리는 커다란 Vue가 되며 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있습니다. Vuex 설치 npm i vuex Vuex state Vuex 기본 틀은 다음과 같습니다. import Vue from 'vue'; import V.. 2022. 3. 25.
Vue에서 fontawesome 설치 및 적용 1. fontawesome 설치 npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/vue-fontawesome npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-regular-svg-icons npm i @fortawesome/free-brands-svg-icons 2. fortawesome 라이브러리 파일 생성 3. main.js 파일에 추가 https://uxgjs.tistory.com/205 Vue.js에서 fortawesome아이콘 라이브러리 사용하기 현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 .. 2022. 2. 16.
Vue - 팝업 창에서 뒤로가기 구현 싱글 페이지 애플리케이션(Single Page Application, SPA) 에서 모바일 웹페이지를 만들 때 팝업에서 뒤로가기 기능을 어떻게 처리해야할까요? 일반적으로 모바일의 뒤로가기 버튼을 누르게 되면, 팝업 여부와 상관없이 이전 페이지로 이동되겠죠. 하지만 토스트 팝업이나 모달 팝업을 호출한 상태에서 뒤로가기 버튼을 누르면 이전 페이지를 이동하지 않고 해당 팝업만 닫히게 해야합니다. 해당 기능을 history.pushState, window.addEventListener 시스템 함수를 응용해서 구현해보았습니다. 모바일 뒤로가기 버튼 동작 시 팝업을 닫는 기능은 다음과 같습니다. 팝업 뒤로가기 예시 코드 ... 적용(닫기) ... created() 분석 created() 메소드는 해당 컴포넌트가 호.. 2022. 2. 7.
Vue 컴퍼넌트(Component) - 페이징 처리 제가 현업에서 구현했던 페이지 처리 기능을 공유하려합니다. 페이징처리를 하는 Vue 컴퍼넌트를 구현하여 여러 화면에서 손쉽게 사용할 수 있습니다. 다른 화면에서 파라미터를 넘겨서 페이징 컴퍼넌트를 손쉽게 호출하는 기능을 살펴보겠습니다!!! 처음 페이지, 이전 페이지, 다음 페이지, 마지막 페이지 버튼을 넣어 만들었습니다. 쿼리는 OFFSET #{currentIndex} LIMIT #{rowCount} 형식으로 구현했으며 #{rowCount}는 화면에 보여질 개수를 변수로 넘겨주면 되겠습니다. #{currentIndex}는 현재 페이지까지의 데이터 수를 받는 변수이며 뒤에서 좀 더 자세히 설명하겠습니다. 1. Vue 컴퍼넌트 구현 코드(js) Vue.component("pager-component", { .. 2021. 6. 10.
Vue 디렉티브(directive) - checkbox Vue 디렉티브를 활용하여 제가 현업에서 쓴 코드를 일부 소개하려합니다. Vue 디렉티브 개념은 이전 글을 참고해주세요. 구현할 체크박스 1. vue-js선언 // 표시할 데이터 리스트 this.dataList = [ {key:'first', val:'01'}, {key:'second', val:'02'}, {key:'third', val:'03'}, {key:'fourth', val:'04'}, {key:'fifth', val:'05'}, ]; // 체크박스의 v-model 파라미터(vue에서 체크박스 구현시 v-model 파라미터는 꼭 배열로 선언해야합니다.) this.checkList = []; 2. html key val {{item.key}} {{item.val}} 2021. 6. 7.
Vue 디렉티브(directive) 개념 1.Vue 디렉티브란? 사용자 정의 디렉티브로 v-model, v-show와 같은 디렉티브 이외에 사용자가 정의한 디렉티브를 등록하는 것을 말합니다. 1) 등록형식 Vue.directive("directivename",{ bind: function(el, binding, vnode) { }, inserted: function(el, binding, vnode){ }, update: function (el, binding, vnode) { } }); 2) 호출방법 위 와 같이 태그에 v-정의한 디렉티브이름으로 호출하면 됩니다. 2. Vue 디렉티드 훅 함수와 인자 1) 훅 함수 bind: 디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출 됩니다. 이곳에서 일회성 설정을 할 수 있습니다. inserted.. 2021. 6. 1.
728x90

티스토리툴바