계발하는 개발자

어제 포스팅했던 mixins 옵션을 알기 전에, 부모 컴포넌트에서 자식 컴포넌트로 메서드 전달을 위해 기존 사용하였던 provide/inject 에 대해 정리해볼까 한다. 먼저 이와 비슷한 기능을 하는 props가 아닌 provide/inject를 고려했던 이유는 자식컴포넌트의 경우 부모컴포넌트에서 사용하는 단순 메서드가 필요한 것이지, 부모측 데이터는 필요없어서였다. 이런 경우 props로 전달받기엔 많은 번거로움이 있다고 생각했다. 이 포스팅은 일전 사용하였던 경험을 바탕으로 정리한 것이며, 지금은 해당 코드 블럭을 mixins으로 대체해서 코드상에서는 제외되었다. Provide/inject 란? 목적 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하거나, 부모-자식 계층 구조를 따르지 않는 컴포넌트..

뷰로 컴포넌트를 만들다보면 시간이 지날수록 관리해야 하는 컴포넌트 수가 많아지게 되는데 그러다보면 기능적으로 겹치게 되는 메서드도 생기게 마련이다. 이러한 문제를 해결해주기 위해 존재하는 게 바로 믹스인 되시겠다. 믹스인 옵션을 사용하면 컴포넌트간 중첩되는 공통 기능들을 말그대로 하나로 믹스시켜 해당 기능을 한 번만 정의하고도 컴포넌트 단에서 재사용해서 쓸 수가 있다. 이렇게 말만 하면 입 아프니까 코드를 비교해서 보자. 1. 믹스인 사용 전 문제 상황 : 컴포넌트간 메서드 기능이 중첩되는 상황 // 뷰 인스턴스 new Vue({ el: "#cont", store, methods: { // 하위 컴포넌트에서 접근하기 위해 인스턴스에 등록 !! // 세자리 콤마 함수 numberWithCommas(x) {..

대분류 지역명 클릭했을 때 중분류 지역명이 나오고, 출력된 중분류 데이터에서 '뒤로가기' 클릭시 다시 대분류 지역 데이터가 출력되도록 해야 했다. 그래서 관련 기능을 하는 코드를 짜는 중에, 처음엔 별 고려 없이 함수 하나에 또 다른 함수1, 2 .. 이런 식으로 코드를 줄줄이 짜니까 코드가 길어질수록 보기 불편하고, 뭐가 어떤 기능을 하는지 한 눈에 보기 어려웠다. 당연하게도 기능 구현도 잘 안되었다. 그래서 내가 짠 코드를 다시 살펴보고, 공통 기능을 하는 코드를 하나의 함수로 묶었더니 일단 깔끔하고, 잘 작동했다! 아직 구체적인 기능은 여기서 더 살을 붙여 넣어야겠지만 이번에 코드를 다시 리팩토링하는 과정에서 깨달은 바가 있어 까먹기 전에 얼른 정리하려고 남기는 후기다. 먼저 내가 처음에 짠 망작 ..

첫번째 li 요소에만 클릭이벤트를 걸려고 했었는데 아래 기존방식으로 하려하니 잘 안됐다. Vue.component("stab-comp", { template: subdata.prodTab, methods:{ test(x){ store.commit('newChgData',x) } }, mounted(){ const firstEl = $(".new-prod-tab > ul > li").eq(0) console.log(firstEl) firstEl.trigger('click') } }); 이유가 뭔가 해서 찾아봤더니 jQuery의 사용과 Vue의 라이프사이클 훅 간에 타이밍 문제가 발생하기 때문 이었다. 일반적으로 Vue 컴포넌트의 mounted 훅은 컴포넌트의 템플릿이 렌더링되고 DOM에 마운트된 직후에 호..