음악, 삶, 개발

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

추후 우리는 수많은 .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 가 제공하는 고유의 문법을 지켜 코드..

명령프롬프트에서 CLI 를 설치후, vue create 프로젝트명 을 입력하면 아래와 같은 구조에 파일과 폴더들이 생성된다. 우리가 만든 vue 앱을 실행하기위해서는 3개의 파일이 필요하다. index.html App.vue main.js 각 파일들안에 어떠한 코드가 적혀있는지 살펴보자. index.html 위의 HTML 코드에서 우리가 주목해야할부분은 이다. 위의 div 가 모든 것의 출발점인 root 테그다. 우리는 이제 id 가 app 인 div 안에, Vue.js 의 API 를 사용하여, 요소를 추가,삭제, 수정하게된다. 우리가 직접적으로 이 index.html 파일을 수정할 일은 전혀 없다. (이것이 Vue.js 를 배우는 이유...) 추후 보겠지만 모든 수..

공식문서 : https://v3.vuejs.org/guide/introduction.html Vue 3 Tutorial - Full Course 10 Hours 10 apps 1. Node.js 를 설치한다. 2. 명령프롬프트창에서 npm install -g @vue/cli 를 통해 CLI 를 설치한다. 3. 명령프롬프트창에서, Vue 프로젝트를 생성할 부모 폴더로 이동후, vue create 프로젝트명 을 입력하여 Vue 프로젝트를 생성한다. 4. 이렇게 생성된 Vue project 폴더를 VSCode 로 연다. 5. VSCode 에서 터미널을 열고, npm run serve 를 입력한..

난 React 대신 Vue 를 선택했다. React 를 공부하겠다고 선언한지, 하루도 안되어 나의 마음은 바뀌있다. 사실 Vue 는 애초에 생각도 안했었고, 당연히 React 를 하려고했었다. 이유는...유명하고..사람들이 많이 쓰는거같아서.. 이렇게 결심을 한뒤 React 를 하루정도 공부했다. 하지만 먼가...의구심이 드는 부분들이 많았고.. Vue 는 과연 어떨까? 하는 마음에 하루를 다시 투자해보았다. 수박 겉핥기도 아닌, 둘다 완전 간만 본것인데, 짧은 결론은 Vue 였다. Vue 를 선택한 이유는, 일단 느낌적으로 확실히 React 보다는 쉽다는 인상을 받았고 (물론 깊이 들어가면 세상에 쉬운것은 없지만..) 무엇보다 .vue 라는 하나의 파일안에, html, javascript, css 를 ..