본문 바로가기

Frontend Development/Vue.js

 (13)
[Vue.js] Vue3 개발시 chrome source code 디버깅 Vue3 vue-cli로 기본 프로젝트 생성 후 코드에 debugger로 break를 넣었는데 chrome 브라우저에서 디버깅 동작을 안하는 경우가 있다. 그럴 경우에는 vue.config.js에 아래 내용을 추가해 주면 된다. vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { devtool: 'source-map' => 추가 } }) devtool: 'source-map' 추가 후 npm run dev로 개발 서버를 띄운 후 크롬 개발자 tool에서 보면 debugger 키워드가 정상 도작함..
[Vue.js] Vue Cli 로 Vue3 시작하기 Vue3를 시작하기 전에 node.js가 설치되어 있어야 한다. NVM(Node Version Manager) 을 설치하면 node.js를 편리하게 설치, 관리 할수 있다. 다음 링크에 관련 내용을 작성해 두었다. https://kindloveit.tistory.com/106 node.js가 설치되었으면 Vue Cli(Command Line Interface)를 Global로 설치하도록 한다. $ npm install -g @vue/cli 참고로 Global로 설치를 하면 현재 Local이 아닌 시스템 전역 위치에 설치가 되는데 위치가 궁금할 때가 있다. Global로 설치시 아래 경로에서 설치가 된다. C:\Users\[MyUser]\AppData\Roaming\npm\node_modules 실제로 위..
[Vue.js] component ... is, keep-alive 알아보기 component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is props에 의해 결정된다. is props is 속성에는 문자열이나 컴포넌트 이름을 넣는다. keep-alive를 사용하는 동적 컴포넌트 is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다. 그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 엘리먼트로 감싼다. 동적 컴포넌트, Keep-alive 예제 Main.vue Home; Company Home.vue I'm Home Component Company.vue {{getTitle}} add company count..
[Vue.js] Mixin 알아보기 기본 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션들이다. 예제 1) main.vue testmixin.vue 실행결과 Life cyle 훅의 경우 Mixin의 hook이 먼저 실행되고 컴포넌트의 hook이 이어서 실행됨을 볼 수 있다. (created 메소드 참조) 옵션 병합 main.vue export default { name: 'Main', mixins: [testMixin], data() { return { message: 'Hello Main!!', mainData: 'mainData' } }, created: function () ..
[Vue.js] watch 사용하기 (primitive, object ...) 대부분 Computed 변수로 사용이 가능하지만 가끔 특정 data의 값이 변하는 시점에 무언가 해주고 싶을때가 있다. 예를 들어 팝업을 띄워준다던가... 백그라운드로 데이터를 변경해야 할 때 등이다.. 이런 경우 vue의 watch 기능이 편리하다. 우선 일반 primitive 변수 들에 대해서는 아래와 같이 watch 선언을 한다. import LeftMenu from './LeftMenu'; import RightSearchBar from './RightSearchBar'; import {mapActions, mapGetters} from 'vuex'; export default { name: 'Header', components: {RightSearchBar, LeftMenu}, data() { ..
[Vue.js] 자식 component height 알아내기, method 호출하기 Vue를 개발할때 가끔 해당 컴포넌트의 의 화면상 높이 값 (clientHeight)이나 자식 컴포넌트의 높이값을 알아야 할때가 있다. 그럴때는 vue의 ref 기능을 이용해서 자식 컴포넌트 내부 접근을 할 수 있다. 잠시 ref 사용 예를 알아보면 다음과 같다. 접근을 원하는 component나 html element에 ref="링크명"을 붙여주고 this.$refs.xxxx 로 접근을 하면 된다. ref 사용예시 => 접근울 원하는 component에 ref변수를 붙여준다. handleResize(event) { // this.refs 변수를 살펴보면 위에서 지정한 ref 링크가 적제되어 있고 component의 경우 $el 변수가 적재된다. this.contentHeight = window.inne..
[Vue.js] vue-router hash 모드 vs history 모드 Vue-router를 사용하면 기본적으로 hash 모드로 router가 동작을 한다. hash모드로 동작할 경우 url에 아래와 같이 # 이 붙는다. http://localhost:9090/#/user 그러면 위 #을 url에서 없애려면 어떻게 해야 할까? router 설정에서 history 모드로 설정을 해주면 된다. import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ mode: 'history', // mode에 history 값을 설정하여 history모드로 변경한다. routes: [ { ..
[Vue.js] webpack.config.js 분석 Vue.js 빌드 환경 구축 시 기본적으로 webpack 빌드를 사용하고 webpack.config.js 설정이 필요하다. 기본적인 모습은 다음과 같다. module.exports = { mode: 'development', resolve: { extensions: ['.js', '.vue'] }, module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' }, { test: /\.js?$/, loader: 'babel-loader' } ] }, resolve: { extensions: ['.js', '.vue'], alias: { '@': path.resolve(__dirname, 'src/'), } }, plugins: [ new VueLoaderPlug..

티스토리툴바