음악, 삶, 개발

Set default value to option select menu {{state.selectedItem}} v-model 속성을 select 에 추가하면, 양방향 바인딩이 되므로, select 의 default 값을 설정할수있음과 동시에, 마우스로 item 을 변경했을대, 곧바로 selectedItem 변수가 업데이트된다.

lodash 4.17.15 npm i lodash {{ v }}

또는.. head 안에 인라인으로 박제하는것도 좋은 방법이다. 어짜피 바뀌지않을것이므로..

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..