음악, 삶, 개발

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 를 설치..

Button style 테그를 사용하는대신, template 속에 inline-style 를 script 안에서 정의할수있다. Button

setup 함수는, Vue 3 에서 새로 나온 Composition API 이다. 기존에 data, methods 등으로 흩어져있던것을, 하나의 장소로 모으게 해준다. template 에서 사용하고자하는 변수, 함수등을 정의한뒤, 객체에 하나씩 골라담아, return 해주면 template 에서 해당 변수와 함수를 접근할수있다.. 아래의 예제를 보면 이해할수있을것이다. 출력

추후 우리는 수많은 .vue 파일들을 만들어나가게되겠지만, 그전에 가장 부모인 App.vue 안에서 이런 저런 코드를 작성해나가서, Vue.js 에서 사용하는 Syntax 들이 어떤것들이 있는지 확인해보자. Vue.js API Reference .vue 파일안에서 우리가 작성할 코드는, template, script, style 이라는 테그마다 역할을 달리한다. template 은 우리가 만들어낼 HTML 코드, script 는 JavaScript, style 은 CSS 이다. 이렇게 한 파일안에 이 3가지를 다 담을수있는것이 Vue.js 를 사용하는 이유이다. 각 테그마다, vue.js 가 제공하는 고유의 문법을 지켜 코드..