음악, 삶, 개발
Vue.js 개발환경 구축하기 (필독..) 본문
< 왜 이런 짓을?... >
개발환경 만들기...
이름만 들어도 너무 지루한 말이다.
하지만 구글링을 통해 우리가 얻는 수많은 코딩에 관한 가르침은,
결국 필요한 프로그램들을 설치한뒤에나 가능한것이다.
따라서 이를 일목요연하게 정리해놓으려한다.
윈도우를 설치해야, Ableton Live 를 설치할수있다.
Ableton Live 를 설치해야 Max For Live 를 사용할수없다.
이런식으로 꼬리의 꼬리의 물어가며 무언가를 다운받고 설치해나가야한다.
결론은 '다운받고 설치' - '다운받고 설치' ...
< 설치하기 >
1. Max 를 설치한다. (cycling74.com/download에서 다운받아서...)
2. Node.js 를 설치한다. (nodejs.org 에서 다운받아서...)
3. Vue 를 설치한다. (명령 프롬프트에서.. npm install -g @vue/cli)
4. Vue project 를 생성할 경로로 이동한다. (명령 프롬프트에서.. cd 폴더경로)
5. Vue project 를 생성한다. (명령 프롬프트에서.. vue create 폴더명)
6. Vue project 로 이동한다. (명령 프롬프트에서.. cd 프로젝트명)
7. socket.io 를 설치한다. (명령 프롬프트에서.. npm install socket.io)
아까 말했듯이,
윈도우를 설치해야 Ableton Live 를 설치할수있다.
Ableton Live 를 설치해야 Ableton Live 프로젝트를 생성할수있다.
정리를 해보면..
Node.js 설치 - Node.js 를 사용하여 Vue 설치 - Vue 를 사용하여 Vue project 생성.
Max 와 Node.js 는 우리가 카카오톡을 PC 에 설치하듯이, 다운받아 설치를 하게되고,
이들은 내 컴퓨터 어딘가에 알아서 저장된다.
반면 Vue 는 설치를 Node.js 를 통해 해야하는데, 이는 즉 명령프롬프트에서 하는것이고,
다운과 설치가 명령어 한방으로 이루어진다.
이때 -g 를 명령어에 포함하여, Max 나 Node.js 처럼 내 컴퓨터에 어딘가에 설치하게된다.
Vue project 는 Node.js 로 우리가 Vue 를 설치하였듯이,
Vue 를 설치하였기때문에, Vue 를 통하여 생성한다.
Vue project 를 생성하였다면, 이 프로젝트 폴더안에 socket.io 를 설치하게된다.
socket.io 를 설치할때 한가지 중요한 주의사항이 있다!
npm install socket-io 가 아닌, npm install socket.io 이다!
왜 주의해야하냐면, socket-io 명령어도 무언가가 설치되기때문이다.
우리가 사용할 socket.io 가 아니니 꼭 npm install socket.io 를 입력하도록 하자...
socket.io 는 Max 와 브라우저가 서로 양방향 송신하기위해서 필수적으로 필요한 npm 라이브러리이다.
어떻게 사용되는지는 추후 볼것이다.
< Vue project 의 내부 >
나는 테스트 폴더로 이동하였고,
이 폴더안에서 아래의 명령어를 실행하였다.
vue create my-vue-project따라서, my-vue-project 라는 폴더명의 vue 프로젝트가 생성되었다.
< Vue project 실행하기 >
Ableton Live 의 프로젝트 파일인 .als 는 더블클릭하여 실행하지만,
불행히도 Vue project 는 그렇지않다.
이 폴더안에 파일 하나를 더블클릭하면, 그 파일이 그저 VSCode 같은 코딩 프로그램에서 열릴뿐이다.
Vue project 는 명령 프롬프트에서 실행한다.
우리가 Node.js 를 사용하고있는 이상, 설치, 제거, 실행 이 모든것이 명령 프롬프트에서 진행되게 된다.
내가 만든 vue 프로젝트명은 my-vue-project 이다.
나는 명령프롬프트상에서 현재 테스트 폴더에 있으므로,
아래의 명령어를 통해 my-vue-project 폴더로 진입한다.
cd my-vue-project
그럼 위와같이, 우리는 my-vue-project 속으로 이동하였다.
이 상태에서
npm run serve를 입력하면, 나의 Vue project 가 실행된다.
이렇게 Vue project 를 실행하고나면, 먼가 브라우저 창이 자동으로 뜰줄 알았는데,
불행히도 그렇지않고 아래의 창이 우리를 맞이한다.
저 위에 Local 이라고 적혀있는 주소를 브라우저 주소란에 복붙하면,
최종적으로 Vue project 의 모습을 보게된다.
< Vue project 는 최종적으로 html-css-js 파일이 된다. >
Vue project 폴더를 우클릭하여, 용량을 확인해보자.
보다시피... 100메가가 넘는다.
우리가 Ableton Live 로 음악을 만들었는데, 여기에 쓰인 샘플이 10기가라고 쳐보자.
우리는 이 프로젝트 폴더를 통채로 사람들한테 배포하는가? 10기가 짜리를?
이렇게 프로젝트를 배포하면 사람들은 음악으로써 들을수있을까?
나의 Ableton Live 프로젝트가 10기가건, 100테라던 간에 결국엔
10메가 내지 이보다 더 작은 mp3 파일로 export 하여 음악으로써 유통하지않는가?
이 논리가 Vue project 에도 똑같이 적용된다.
Vue project 는 실제 우리가 배포할 녀석이 아니라,
개발을 하기위한 말그대로 프로젝트 파일이다.
따라서, 개발을 하기위해 필요한것들을 모두 이 프로젝트 폴더안에 담아놓게된다.
추후 보겠지만, 우리가 만든 Vue project 는 npm run build 라는 명령어를 통해,
dist 라는 폴더안에 html-css-js 파일들로 변환된다.
이 dist 폴더가 우리가 Vue project 로 만들어낸 순살, Ableton Live 로 따지면 mp3 파일이다.
< VSCdoe 에서 Vue project 편집하기 >
나는 Vue project 를 잘 생성하였고, 이 프로젝트를 이제 내가 원하는대로 편집하고싶다.
마치 Ableton Live 에서 나의 .als 파일을 열어서 음악을 만들어가는것처럼..
Vue project 에게 Ableton Live 란 바로 VSCode 이다.
우리의 Vue project 폴더를 VSCode 에 드래그하면 된다.
< Hello 나의 개발 환경!!! >
앞서 우리는 필요한 프로그램인 Max 와 Node.js, 그리고 Vue 를 포함한 npm 라이브러리들을 설치하는것을 배웠고,
Vue project 를 생성하는것을 배웠다.
우리는 이 Vue project 를 명령 프롬프트에서 실행하였고,
이 실행된 프로젝트를 눈으로 보기위해 브라우저로 http://localhost:8080/ 에 접속하였다.
그 다음, Vue project 를 편집하기위해 VSCode 에서 이 프로젝트 폴더를 열었다.
이제야 비로써, 우리는 개발을 할 준비, Ableton Live 로 따지면 음악을 만들 준비가 되었다.
최종적으로 아래와 같은 모습이다.
이제 우리가 VSCode 에서 무엇이든 수정하면, 곧바로 오른쪽 브라우저가 자동으로 새고로침되게 된다.
.vue 파일뿐 아니라, main.js 나 index.html 을 변경해도 동일하게 새로고침된다.
