반응형

javascript 10

[NodeJs/VueJs] 슬롯 (Slots)

저는 개발을 진행할때 기능별로 나누어 놓는 것을 좋아해서 UI 기준 기능을 컴포넌트들로 나눠서 관리 합니다. 사용할때 나누어 놓은 기능 컴포넌트들을 부모 컴포넌트에 연결해서 사용하죠. 그런데 간혹 부모 컴포넌트에서 연결한 컴포넌트 템플릿에 HTML 요소가 동적으로 적용되어야 하는 경우가 있습니다. 이럴 경우 Slots 을 사용하면 이런 경우 대처가 가능합니다. 슬롯은 부모와 연결된 자식 컴포넌트간에 통로 역할을 한다고 생각하면 됩니다. 연결된 통로에 동적으로 적용되는 UI 나 이벤트들을 연결하여 사용하는 것이죠. 지금부터 다루게 될 내용은 개편된 v2.6 기준 의 내용입니다. Slot(슬롯의 기본) 슬롯에 들어갈 내용입니다. 슬롯에 들어갈 내용입니다. 슬롯은 자식(하위) 컴포넌트에서 정의한 slot 영역..

NodeJS 2019.12.06

[NodeJs/VueJs] ref 속성을 이용하여 자식 엘리먼트에 접근해보자

Vue 에 대한 복습을 하다가 ref 속성에 대한 내용이 잘 이해가 안가서 포스팅으로 정리하여 남깁니다. 분명히 그전 공부에선 이해하고 넘어갔던 기억이 있는데... 머리가 역시 돌인가 봅니다. 그럼 간략하게 정리해보도록 하겠습니다! 이전 포스팅에서 상위, 하위 컴포넌트간 데이터 전달 방법 에 대해 정리한 적 있습니다. [NodeJs/VueJs] 상위, 하위 컴포넌트간 데이터 전달 방법 안녕하세요. 이번에는 Vue 를 사용하면서 저를 많이 혼란스럽게 했던 기능 중 주요 기능인 상위, 하위 컴포넌트간 데이터 전달 방법에 대해 살펴보려고 합니다. 오늘도 미래의 저에게 도움이 될수 있기를! 요 근래.. question0.tis..

NodeJS 2019.12.05

[NodeJS/VueJS/NuxtJS] Nuxt 에서 Router 경로 설정하기

Nuxt 를 사용하기 위해 프로젝트를 설정하다 보면 여러 난관들이 있습니다. 저도 아직 해결 못한 난관들이 많아요. 이번엔 그 난관중에 하나인 Router 의 자동 경로 설정입니다. Nuxt 의 특징 중에 하나가 Vue 에서 수동으로 설정해주었던 Vue-Router 의 경로를 자동으로 설정해준다 라는 건데요. 자동으로 생성된 Router 의 경로와 설정을 그대로 사용한다고 하면 상관없으나 커스텀하게 사용해야하는 경우들이 있습니다. 해당되는 상황을 몇가지 예로 정리해보겠습니다. 파일 이름의 첫글자가 대문자인 경우 이렇게 파일을 구성했을 경우 Nuxt 에서 빌드를 하게 되면 자동으로 이름과 경로 끝자리 문자가 대문자로 설정됩니다. 혹은 원치않는 경로와 이름을 갖게 되는 경우도 있죠. 이 경로를 원하는대로 설..

NodeJS 2019.11.08

[NodeJs/VueJs] 상위, 하위 컴포넌트간 데이터 전달 방법

안녕하세요. 이번에는 Vue 를 사용하면서 저를 많이 혼란스럽게 했던 기능 중 주요 기능인 상위, 하위 컴포넌트간 데이터 전달 방법에 대해 살펴보려고 합니다. 오늘도 미래의 저에게 도움이 될수 있기를! 요 근래 Vue 를 공부하는 중 상위, 하위 컴포넌트간 데이터 통신이 자주 필요했습니다. 주고 받을수 있는 방법은 정리해보자면 다음과 같았습니다. this.$root 혹은 this.$parent 를 이용 v-bind 와 props, v-on 이벤트와 $emit 를 이용 v-model 를 이용 EventBus 를 이용 vuex 의 store 공통객체를 이용 전부 다 Vue에서 데이터를 전달하고 관리하기 용의한 방법들입니다. (이렇게나 많네요!) 여기서 vuex 를 이용하는 방법은 글로벌한 공통 상태값을 관리..

NodeJS 2019.11.07

[NodeJS/VueJS/NuxtJS] Nuxt.js 에서 외부라이브러리 연결에 대하여 (vue-owl-carousel 연결)

오늘도 맨땅에 헤딩을 엄청 하고 있습니다. Nuxt 를 사용하여 토이 프로젝트를 구현하고 있었는데 시작부터 삐걱 거리네요. 이번에 간단하게 오늘 저를 괴롭게 했던 vue 관련 외부 라이브러리 추가에 대해 제가 겪었던 경험을 공유해볼까합니다. 일전에 포스팅 했었던 vue-owl-carousel 을 Nuxt 프로젝트에 설정하려고 했던것이 사건의 발단이었습니다. Vue 와 동일하게 컴포넌트에 설정하고 Nuxt 로 실행하는 순간 그 단어가 보였습니다. Document is not defined 처음엔 대수롭지 않게 생각했죠. Nuxt 가 Vue 기반이지만 체계가 다른 프레임워크이기 때문에 설정이 다를 것은 당연한 것일 거라 예상했기 때문이죠 Nuxt 홈페이지를 방문해봅니다. 플러그인 페이지로 이동하여 살펴보고 ..

NodeJS 2019.11.05

[NodeJS/VueJS] Vuex 설치 및 사용 #2 - 심화편

안녕하세요 지난번 포스팅때는 Vuex 에 대한 기본적인 설명과 구성 요소, 사용하는 방법에 대해 살펴보았습니다. 이번 포스팅에서는 mapGetters, mapMutations, mapActions 에 대해서 살펴보도록하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode NPM, Node.js, Vue.js, Vuex, Vue Router 사용 방법 이름에서 추론해보도록 할까요? 지난번 다뤘던 Getter, Mutation, Action 에 앞에 map 이 추가되어 있고 전부 복수형입니다. 복수의 기능을 다루기 위한 구조인것을 유추할수 있는데요. 정말 맞는지 살펴보도록 하겠습니다. 지난번에 사용했던 예제 코드를 다시 한번 보시죠. # HelloWorld.vue Parent..

NodeJS 2019.11.04

[NodeJS/VueJS] Vuex 설치 및 사용 #1 - 기초편

오늘도 미래에 공부한 개념을 잊은 저를 위해 개념 정리 포스팅을 작성해보도록 하겠습니다. Vue 를 이용하여 프론트 작업을 하다 보면 이런경우 있으실겁니다. Component 별 데이터 공유 문제 공통 상태에 대한 관리 방법은 찾아보면 있을 겁니다. 1번은 EventBus 를 이용하여 사용하는 방법이 있고 2번은 window 객체를 이용하면 어찌어찌 되겠죠 하지만 EventBus 를 이용하면 프로젝트가 커질수록 이벤트 추적이 힘들어져 유지보수가 힘들어 지는 단점이 있고 window 객체를 이용하는 것은 어찌 성공한다고 해도 모양새가 그리 좋아보이지 않을것 같습니다. 방법을 찾다가 이런 문제를 해결해주는 Vuex 라는 라이브러리를 찾았습니다. Vuex 의 공식 홈페이지에서 설명하고 있는 이 라이브러리의 정..

NodeJS 2019.11.01

[ES6/VueJS] ES6 모듈 구조와 Vue의 구조에 대한 고찰

Node.js 를 공부했었지만 오래되다보니 Vue 를 공부하고 있다가 익숙한 구조가 눈에 띄었습니다. 'export default' Vue 공부하면서 단순히 Vue.js 라이브러리에서 정의하고 있는 고정된 양식이겠지 라고 생각하고 그냥 넘어가려다 찜찜해서 찾아본 결과 ES6 의 모듈 구조였었습니다. ES6 의 기초를 싸그리 까먹었나봅니다... 이번 포스팅은 Vue 에서 자주 다루고 있었던 컴포넌트 구조와 ES6 의 모듈 구조 관계를 살펴보도록 하겠습니다. // HelloWorld.vue ... vue-cli 을 이용하여 프로젝트 초기 구성하게 되면 폴더에 다음과 같이 기본 Vue 파일이 생성되어 있습니다. templete, script, style 태그들은 Vue.js 의 컴포넌트를 정의하기 위한 기본 ..

NodeJS 2019.10.30

[NodeJS/VueJS] 설치 및 프로젝트 생성 해보자

안녕하세요. 이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode Vue.js, ES6, Node.js 시작 Vue 를 사용하기 위해서는 다음과 같은 방법이 있습니다. 공식 사이트에서 개발자 버전 혹은 배포 버전 을 다운받아 Script 로 연결하여 사용한다. CDN 에 올라간 Vue 버전을 Script 로 연결하여 사용한다. npm에 올라간 최신 버전의 URL ( https://unpkg.com/vue/ ) 로 연결 NPM 을 이용하여 설치한다. npm install vue vue-cli -g 위 방법중 마지막 3번째 방법을 이용하여 vue 를 설치하고 프로젝트를 생성해보겠습니다. NPM 을 이..

NodeJS 2019.10.28

[NodeJS/VueJS] Carousel 구현

이번에 포스팅할 내용은 캐러셀(Carousel) 입니다. Slider 라고도 부르기도 합니다. 기존에 이 기능을 구현을 하기 위해 저는 JQuery 로 되어 있는 오픈 라이브러리나 소스를 사용했었습니다. 그중에 owl carousel 을 사용을 했는데 Vue 에서도 JQuery 로 사용해야 하는 줄 알고 삽질을 엄청했습니다. 쉽게 사용할줄 알았는데 쉽지가 않더라구요. 특히 JQuery 를 그냥 사용할땐 쉽게 사용이 가능하지만 Vue 에서 Dom 그리는 생명주기에 맞춰서 사용하려고 하니 난의도가 급격 상승하고 혈압도 같이 상승했습니다... 여러분은 하지마세요... 어떤거를요? 걍 생명주기 없이 JQuery 사용하려면 하시되 생명주기까지 건들지 맙시다. 이건 이거대로 할 이야기가 많지만 잡설을 이만하고 결론..

카테고리 없음 2019.10.17
반응형