음악, 삶, 개발

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 가 제공하는 고유의 문법을 지켜 코드..

명령프롬프트에서 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 를 ..