음악, 삶, 개발

Vue 에서 개발할때는 언제나 데이터 중심으로 사고하여야한다. DOM 을 직접적으로 컨트롤할 생각을 하는게 아니라, 데이터가 변경되면 DOM 을 Vue 가 랜더링해주기때문이다. 따라서 데이터를 추가하거나, 제거하고, v-for 를 이용해, 현재 데이터를 랜더링하는쪽으로 코드를 짜야한다. {{Math.random()}} add remove /* store.js */ import { createStore } from 'vuex' const state = { childAmount : 0 } const mutations = { add(state) { state.childAmount++ }, remove(state) { if (state.childAmount > 0) stat..

vue.config.js Vue 공식 문서에는 아래의 구조를 추천하고있다. 하지만 위의 구조가, Vue Cli 가 생성해주는 구조와 다른데, 이럴때는 파일을 위의 구조처럼 만들기위해 이동시키기전에, 먼저 vue.config.js 파일을 아래와 같이 설정해주어야한다. (없다면 생성하라.) /* vue.config.js */ module.exports = { pages: { index: { entry: 'main.js', template: 'index.html', } } } 최종모습. 매우 깔끔하다.

현재 나의 Vue 프로젝트 상태이다. 보다시피, 몇몇 파일과 폴더때문에, 정작 내가 만든 파일과 폴더가 무엇인지 잘 구분할수없다. 이때 사용할수있는 VSCode 에 Make Hidden 확장팩이있다. 위와 같이 검색후, 설치를 해주고나면.. node_moduels 폴더와, 그 외에 여러 파일들을 숨겨버렸다. 하지만, 열심히 코딩을 하다가 내가 숨긴 파일들을 수정해야할수도있을것이다. 그럴때는 .vscode 폴더안에 json 파일에서, 필요한 파일을 false 로 변경해주면 다시 볼수있다. ㅊㅚ 최종 상태는..

Vuex 4.0 공식문서 아래와 같이 중첩된 요소들이 있다고 가정해보자. 우리가 만들 app 의 모습도 대략 이럴것이다. 이때 서로 데이터를 주고 받는 것을 생각해보자. 가장 부모인 parent 에서 가장 아래 자식인 grand-grand-grand-child 로 데이터를 전송해야한다면.. parent -> child -> grand-child -> grand-grand-child -> grand-grand-child 순으로 props 를 넘겨가야한다. 역으로, 자식 -> 부모로 데이터를 전달하려면 emit 함수를 통해 event 를 보내야한다. 아래와 같은 상황도 고려해보자. brother 에서 sister-child 에게 데이터를 넘겨..

Event Modifiers 개발을 하다보면, 부모 요소와 자식 요소, 심지어 손자 요소까지 각각 이벤트 리스너가 필요한 경우가 있다. 위의 경우 내가 grand-child 를 클릭하면, grandChild 함수만 호출되느것이 아니라, 부모인 child 역시, child 의 부모인 parent 역시 클릭된것으로 인식하여, granChild() child() parent() 순으로 이벤트 함수가 연속적으로 호출되게된다. 이렇게 하나의 이벤트가 발생했을때 부모 요소로 퍼져나가는 현상을 "버블링" 이라고 한다. 버블링 현상을 피하기위해서 Vue 에서는 Event Modifier 를 제공한다. 아래와 같이 6가지가 존재하며, .stop .prevent .capture .self .once .p..

우리는 앞서 socket io 를 통해 emit 을 배웠었다. 보내는쪽이, emit('event명', '보낼 메세지') 를 하게되면, 어딘가에서 이 메세지를 on('event명', 실행할함수명) 으로 받아, 원하는 함수를 실행하였었다. socket io 와 유사한 방식으로, 자식이 특정 event 명을 사용하여 이벤트를 보낼수있다. 먼저 setup 함수의 2번째 인자인 context 가 필요하며, 이 context 의 메소드로 emit 이 존재한다. 아래와 같이 자식 component 를 작성한다. I'm a child. 이제 자식 Component 는 'child-event' 라는 event 명을 사용하여 메세지를 쏘개된다. 그럼 이를 부모 컴포넌트가 수신할때는 v..

위와 같이, 클릭한 요소의 상태를 가져와 하는 경우가 자주 있다.

Build A Collapsible Tree Menu With Vue.js Recursive Components Creating a Recursive Tree Component in Vue Vue and Recursive Components 트리 뷰 Example github.com/mikerodham/vue-dropdowns/blob/master/Dropdown.vue Dropdown 메뉴란 하나 메뉴를 기준으로 여러개의 하위 메뉴를 갖는 UI 이다. 우리가 사용하는 모든 프로그램들에 Dropdown 메뉴는 매우 필수적이며, 이를 Vue 를 사용하여 구현해보자. Dropdown 메뉴를 구현하기위해서는 우선적으로 이를 데이터로 표현해..

{{item.name}}

Event Reference (반드시 읽어볼것!) Lee : 추후 이 포스팅은 계속 업데이트되어야합니다. (현재 2020.11.25) 위의 공식문서를 보면, 이벤트가 너무너무 많다. (넉넉잡아 1000개 정도?) 문서를 보며 중요한 부분을 찾아 정리하도록 하자. 사용자의 마우스나 키보드로부터 오는 입력을 Event 라고한다. 하지만 마우스만이 이벤트는 아니다. 창을 닫는것도, 창을 여는것도, 동영상 재생을 시작하는것도 이벤트다. 우리는 이 이벤트 가 발생했을때 특정 기능을 수행하기를 원한다. 이는 다시 말해 나의 함수가 호출되기를 원한다. Vue 는 놀라울만큼 직관적이다. 아래와 같이 작성할수있다. 아래는 cl..