음악, 삶, 개발

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

Vue.js 의 가장 큰 강점은, 데이터와 요소의 연동성이다. Vue.js 는 언제나 데이터 중심으로 사고해야한다. 즉, 데이터가 변하면 요소가 이를 반영하여 다시 랜더링된다. 하지만 이게 저절로 되는것은 아니고 script 안에서 'reactive' 를 import 해야한다. import { reactive } from 'vue' 이 reactive 함수를 사용하여 데이터를 형성하고, 이렇게 만들어진 데이터를 사용한 요소는 해당 데이터가 변하였을때 다시 랜더링되게 된다. 버튼을 누를때마다 값이 랜덤으로 변하는 코드를 작성해보자. Click me! {{state.number}}

각 primitive type 들을 별도의 변수로 갖는것보다는 객체로 묶어서 관리하는것이 항상 좋은 방법이다. /* bad */ setup() { const name = 'park'; const year = 1985; const age = 35; const friends = ['lee', 'kim', 'jeong', 'choi']; return { name, year, age, friends }; } 보다는... /* good! */ setup() { const state = { name : 'park', year : 1985, age : 35, friends : ['lee', 'kim', 'jeong', 'choi'] } return { state }; } 가 좋다. reactive 함수를 호출할때도 ..

공식문서 : Directives Vue.js 가 제공하는 Directives 를 사용하면 template 테그안에서 script 안에 변수나 함수를 사용할수있다. 예를 들어, button 을 클릭하면 script 안에 함수가 실행되게끔 할수있는것이다. 또는 button 의 이름이 script 내의 변수가 가지고있는 값일수있다. 정리를 하면 와이파이 공유기처럼, template script 간에 송신을 위한 연결자이다. Vue.js 로 코딩하면서 이 지시어들을 매우, 거의 언제나 사용하게 될것이다. 아래는 Vue.js 의 지시어 목록이다. v-text v-html v-show v-if v-else v-else-if v-for v-..