음악, 삶, 개발

많은 함수들을 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-..

server (Max) : npm install socket.io client (Vue) : npm install socket.io-client server-api client-api // sending to sender-client only socket.emit('message', "this is a test"); // sending to all clients except sender socket.broadcast.emit('message', "this is a test"); // sending to all clients in 'game' room(channel) except sender socket.broadcast.to('game').emit('..

Ableton Live 프로젝트에서 mp3 를 export 하는것과 같다. Vue 프로젝트를 빌드하게되면 html-css-javascript 파일로 추출된다. 명령프롬프트에서 해당 vue 프로젝트로 이동한뒤, npm run build 를 실행하면, 빌드가 시작된다. 빌드가 완료되면, 현재 나의 Vue 프로젝트 폴더안에, dist 라는 폴더가 생성되고, 이 dist 라는 폴더안에 순살, 즉 각 html, css, js 파일들로 추출되게 된다. 위와 같이 npm run build 를 할 경우, 해당 프로젝트 파일의 하위 폴더인 dist 폴더안에 순살이 추출된다. 이..