음악, 삶, 개발

우리는 앞서 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..

많은 함수들을 setup() 안에서 정의한 상황을 상상해보자. 그리 좋아보이지않는다. JavaScript 에서는 함수 또한 객체이므로, 이 함수들을 다른 객체의 요소로 집어넣은뒤, 객체를 return 하는것이 현명하다. 이 방식의 가장 큰 장점은, setup() 안에서 정의한 state 에 곧 바로 접근 가능하다는것이다. 위의 함수들을 export default 바깥으로 빼낼수도 있다. 이 방식으로 갈 경우, setup() 안에 있는 다른 변수에 접근할수없기때문에 각 함수들이 인자와 return 을 사용하는 좀 더 general 함 함수여야할것이다. 하지만 위의 함수들이 다른 .vue 파일에도 사용되면 좋을 정도로 유용한 함수들이라면? 이럴 경우 더 좋은 방법은 함수들을 아예 .js 파일로 분리하는것이다..

v3.vuejs.org/guide/component-props.html 우리가 어떠 Component 를 만들었지만, 이 Component 로 생성된 각 Instance 의 모습이 약간씩 틀리기를 바랄수있다. 사과 한상자를 샀는데 사과의 모양이 조금씩 틀린것처럼 말이다. 하나의 Component 안에서 기본적 속성은 공유한채 약간은 틀린 offset 을 주고자할때 사용하는것이 props 이다. props 는 사용자 정의 속성이다. 내가 만든 Component 를 부모 Component 에서 사용할때, 해당 태그에 속성으로 사용할수있는것이다. Juce 에서 우리가 Component 를 만들었을때, Constructor 에 인자를 넘기는것과 유사한 방..

Vue 을 공부하게되면서 다행인것은, 내가 Vue 3 가 나오고나서 공부를 시작했다는것이다. Vue 3 가 Vue 2 보다 어떠한 점이 좋아졌는지에 대해 잘 설명한 블로그를 첨부한다. Vue 3 의 변경점 정리 : 무엇이 바뀌나요? 위의 글을 읽으면, Vue 3 의 기능에 대해서도 다시금 정리해볼수있을것이다.

우리가 Vue.js 에서 사용하는 .vue 파일을 다른 말로 Component 라고 한다. 우리가 만들어나갈 UI 의 요소 하나 하나가 Component 인것이다. Vue.js 에서는 결과적으로 작은 Component 를 여러개 만들어, 이들을 결합한 새로운 Component 를, 그리고 이 새로운 Component 가 다시 다른 Component 에서 속해지면서 결과적으로 레고처럼 조립해 나가는것이다. 이들중 가장 상위에 있는 Component 가 App.vue 파일이다. I'm App.vue file! 이 App.vue 파일에 정의된 template 을 index.html ..

데이터를 만들어다보면, 새로운 데이터를 다른 데이터로부터 계산되어 만들고자할때가 자주 발생할것이다. 다음은 실제나이와 한국나이를 데이터로 표현한것이다. const state = { age : 10, ageK : 11, } 위와 같이 하지않고, ageK 를 age + 1 로 표현할수없을까. const state = { age : 10, ageK : age + 1, } 불행히도, 위와 같은 문법은 JavaScript 에서 허용하지않는다. 이를 위해 Vue 에서 제공하는 기능인 computed 함수를 사용하면, 함수의 인자로 데이터를 넘길수있다. computed 를 사용하기위해서는 이 역시 import 되야한다. computed 를 사용하여 작성한 코드는 아래와 같다. 주의할점은, age + 1 이 아닌, s..