음악, 삶, 개발

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 를 실행한다. 그리고 위의 주소로 접속하면..

Vue 프로젝트를 생성하자마자, 바로 실행을 하면 아래와 같이 출력된다. 위와 같이 뜨는 이유는 Vue 개발자가 기본적으로 생성해놓은 코드들이 들어가있기때문이다. Vue 프로젝트 안에 파일을 보면... 위와 같이 폴더와 파일들이 생성되어있는것을 볼수있다. 우리는 완전한 백지에서 시작하고싶다. 이를 위해 2가지를 해야한다. 1. 필요없는 파일들을 모두 지운다. 다 지우고나면, 아래와 같은 모습이 된다. 이때 주의할점은 public 과 src 폴더안에 있는 녀석들만 지우거나 수정해야한다. 2. 필요없는 코드를 모두 지운다. index.html App.vue App.vue 는 모든 코드를 삭제하고, template 테그안에 Hello World 를 작성한다. Main.js 는 아무것도 고치지않는다.

개발환경 만들기... 이름만 들어도 너무 지루한 말이다. 하지만 구글링을 통해 우리가 얻는 수많은 코딩에 관한 가르침은, 결국 필요한 프로그램들을 설치한뒤에나 가능한것이다. 따라서 이를 일목요연하게 정리해놓으려한다. 윈도우를 설치해야, Ableton Live 를 설치할수있다. Ableton Live 를 설치해야 Max For Live 를 사용할수없다. 이런식으로 꼬리의 꼬리의 물어가며 무언가를 다운받고 설치해나가야한다. 결론은 '다운받고 설치' - '다운받고 설치' ... 1. Max 를 설치한다. (cycling74.com/download에서 다운받아서...) 2. Node.js 를 설치한다. (nodejs.org 에서 다운받아서...) 3. Vue 를 설치..