목록Vue (37)
음악, 삶, 개발
우리가 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 폴더안에 순살이 추출된다. 이..
공식 문서 Node For Max [node.script] 안에서 로딩되는 .js 파일은 max-api 모듈을 사용할수있다. const maxApi = require('max-api'); // max-api 모듈 사용할거임!! 이 max-api 모듈은 Max 에 내제되어있기때문에, 따로 설치할 필요가 없다. max-api 모듈의 addHandler 함수를 통해 우리는 inlet 으로 메세지를 받을수있고, outlet 함수를 통해 outlet 으로 메세지를 출력할수있다. /* my-node-server.js */ const maxApi = require('max-api'); maxApi.addHandler('bang', function () { const randomFloat = Math.random();..
앞서 우리는 Vue.js 개발환경을 구축하는 법을 배웠다. 여기서는 Vue.js 를 일체 배제한, Max 에서의 Node.js 를 개발환경 구축을 알아볼것이다. Vue.js 를 Max 에서 사용하는것에 대해서는 다음 포스팅에서 자세히 다룰것이다. 미리 말하면, Vue 프로젝트와 Max 프로젝트는 완전히 분리되어야한다. (이유는 다음 포스트에서..) 다행인것은, Vue.js 개발환경 구축보다 훨씬 단순하다. 1. Max 프로젝트 폴더를 생성한다. Vue.js 개발환경 구축과 달리, Max 프로젝트 폴더는 직접 생성해주어야한다. 추후 Vue project 와 함께 관리되어야하기에, 동일한 부모 폴더속에 생성하는것이 좋다. 2. 이 폴더안에, 빈 maxpat 파일을 만들어 집어넣는다. 기본적으로 dark mo..
Vue 프로젝트를 생성후, 기존 파일들을 지우고나면, 최종적으로 아래와 같은 구조가 된다. Hello World 를 출력하기위해서는, 위에 보이는 3가지 파일에 코드를 작성해야한다. 아래와 같이 하도록 한다. Hello World! /* main.js */ import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app'); 위와 같이 작성하였다면.. 명령 프롬프트에 들어가 Vue 프로젝트 폴더로 이동후, npm run serve 를 실행한다. 그리고 위의 주소로 접속하면..