Programming/Vue19 [Vue] Vue의 Key Modifier란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Key Modifier에 대해서 알아보겠습니다. javascript로 이벤트의 키값을 받을 때 사용하는 것을 Vue의 Key Modifier 문법을 통해서 쉽게 제어할 수 있습니다. Vue의 event binding 으로 keydown 이벤트를 실행해서 handler 라는 함수를 실행시켜 enter키가 눌러졌는지 확인하는 코드를 작성해 보겠습니다. 이것을 key modifier .enter를 사용해서 다시 작성하면 다음과 같습니다. enter 키 뿐만 아니라 다른 키들도 사용 가능합니다. 다음은 f 키를 눌렀을때 'key F is pressed!' 라고 출력해 보겠습니다. 텍스트 입력 폼 안에 알파벳 아무 키를 입력하다가 F가 입력되면 콘솔창에 'Key F.. 2022. 9. 9. [Vue] Vue의 Event Modifier 란? 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Event Modifier에 대해서 알아보겠습니다. Event Modifier는 click 이벤트를 받을 때 흔하게 사용하는 JavaScript를 Vue의 문법을 통해서 쉽게 제어할 수 있도록 하는 기능입니다. Event Modifier에는 다음과 같은 종류가 있습니다. .stop .prevent .self .capture .once .passive 태그에 .prevent event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지 않게 됩니다. 태그에 .once event modifier가 사용되었다면, html 기본 기능인 hyperlink가 동작하지만 연결된 함수가 단 한번 실행되고 다시는 실행되지 않습니다. 태그에 ... 2022. 9. 8. [Vue] Vue에서 event를 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 event를 다루는 방법에 대해서 알아보겠습니다. 클릭해서 숫자가 1씩 증가하는 프로그램을 만들어 보겠습니다. {{ count }} 이때, v-on 은 이벤트 바인딩할 때 사용하는 것으로 약어로 다음과 같이 @click으로 대체해서 사용할 수 있습니다. {{ count }} 다음으로 버튼을 클릭했을 때 버튼의 text를 출력해 보도록 하겠습니다. Hello World 이벤트 객체 e를 받아서 해당 버튼 태그의 textContent 즉 텍스트를 출력할 수 있습니다. 또한, click 이벤트를 받아서 함수를 실행할때 parameter 값을 지정해서 넘겨줄 수 있습니다. {{ count }} +1 +2 그리고 클릭 이벤트를 받아서 parameter 값과 eve.. 2022. 9. 7. [Vue] v-if와 v-show의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 v-if와 v-show의 차이점에 대해서 알아보겠습니다. 먼저 v-if에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 Chrome DevTool을 열어서 확인해 보면, v-if 로 지정된 것은 주석처리가 되어있어 렌더링 되지 않습니다. 다음으로 v-show에 대해서 보겠습니다. Counter with v-if and v-else show paragraph1 paragraph2 v-if를 v-show로 변경하고 버튼을 클릭해도 paragraph1과 paragraph2를 출력하지 않습니다. 그 이유는 v-show가 태그에서 동작하지 않기 때문입니다. 다시 태그를 로 바꿔줍니다. Counter w.. 2022. 9. 3. [Vue] Vue에서 인라인 style 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 인라인 style 다루는 방법에 대해서 알아보겠습니다. Style Attribute {{ message }} 인라인 style을 사용할 때는 key, value 쌍으로 이뤄진 객체를 사용합니다. 이때, key 값으로 camelCase를 주로 사용하며, kebab-case를 사용할 때는 'font-size'와 같이 따움표를 사용합니다. 그리고 value 부분은 기본적으로 따움표를 사용합니다. 그리고 class attribute를 다룰때 처럼, script에서 객체 데이터를 만들어 style에 객체명만 지정해서 사용할 수 있습니다. Style Attribute {{ message }} 그리고, methods를 사용해서 styleObject의 값을 변경하면 스.. 2022. 9. 2. [Vue] class attribute 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 class attribute를 다루는 방법에 대해서 알아보겠습니다. 이전에 v-bind로 attribute를 다루면서 아래와 같이 class를 변경하는 방법에 대해서 알아봤습니다. Class Attribute {{ message }} Change Change 버튼을 클릭하면, class 가 변경되면서 글자 색상이 녹색에서 빨간색으로 변경됩니다. class 값으로 true, false 값을 가지는 객체 데이터 값을 넣어주면 더욱 활용도가 높아집니다. Class Attribute {{ message }} ({{isActive}}) Change 여기서 isActive 값이 true 일때만, active class가 적용되어 Change 버튼을 눌렀을때 텍스트 .. 2022. 9. 2. [Vue] Vue에서 데이터 변경 감시하는 방법(feat. watch) 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 데이터 변경 감시하는 방법에 대해서 알아보겠습니다. 다음은 message를 Hello World! 에서 Smile World!로 바꾸는 코드입니다. Watch Message {{ message }} Change 여기서 변경되는 데이터를 감시하려면, watch property를 사용해야 합니다. Watch Message {{ message }} Change watch property를 추가하고, 감시할 데이터 message에 함수를 실행하는 형식으로 적어주는데 message: function() 을 줄여 message() 로 적고, message의 데이터 값을 console.log을 사용해서 출력해 주면 됩니다. 이때, watch의 매개변수를 value로 .. 2022. 9. 1. [Vue] Computed Properties의 Getter, Setter 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Getter와 Setter에 대해서 알아보겠습니다. 지난 시간에 배운 Vue의 computed property는 cashing 기능이 있어서 읽기 전용인 상수의 특성을 띈다고 했습니다. 이때 Getter와 Setter를 사용해서 이 computed property의 함수의 결과값을 바꿀 수 있습니다. App.vue Reverse Message {{ message }} {{ reversedMessage }} Add 위 코드를 실행하면, 제공된 문자열과 뒤집어진 문자열이 있고, Add 버튼을 누르면 제공된 문자열의 마지막에 느낌표가 추가되고 이 느낌표가 추가된 문자열을 뒤집어 뒤집어진 문자열을 출력하고 있습니다. 여기서 methods property의 add .. 2022. 9. 1. [Vue] Computed Properties 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 computed 속성에 대해서 알아보겠습니다. 우선 components 폴더 안에 Company.vue 파일을 다음과 같이 작성하고 App.vue에서 Company.vue 파일을 불러와서 Company 목록을 출력해 보도록 하겠습니다. /components/Company.vue {{ company }} App.vue 아래와 같이 출력 되었습니다. 여기서 Companies.vue에서 companies 배열을 삭제하면 v-if directive 조건 companies.length가 0이 되므로 화면상에 아무것도 출력하지 않습니다. 여기서 v-if에 바로 조건식을 적는 대신 computed property를 사용하면 다음과 같습니다. {{ company }} c.. 2022. 8. 31. [Vue] Vue의 Attribute Binding 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Attribute Binding에 대해서 알아보겠습니다. v-bind 속성값으로 Vue의 데이터 값을 넣어줄 때는 이중괄호를 사용할 수 없습니다. 따라서 이때에는 v-bind directive를 사용합니다. {{msg}} 앱이 처음 실행될때 텍스트가 빨간색이였다가 클릭하면 녹색으로 변경하도록 코드를 짜보았습니다. 여기서 v-bind는 가장 흔하게 사용되는 directive로 다음과 같이 :로 축약해서 사용할 수 있습니다. {{msg}} class 속성값을 동적으로 추가하려면 다음과 같이 중괄호 [ ] 으로 작성해 줍니다. {{msg}} 이렇게 하면, 여러 가지의 속성을 다이나믹하게 동적으로 추가할 수 있는 장점이 있습니다. 또한 지금까지 사용했던 @ 기호는.. 2022. 8. 31. [Vue] Raw HTML 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. Vue에서 데이터 값을 표시하려면 {{}} 이중 중괄호를 사용합니다. 그런데 이 데이터가 Raw HTML이라면 이 Raw HTML도 String 값으로 읽어 다음과 같이 그대로 표시하게 됩니다. {{ msg }} 이 값을 실제 HTML 로 표시하려면 v-html directive를 사용해줘야 합니다. 이렇게 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 30. [Vue] Vue의 Interpolation(보간법) 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Interpolation (보간법)에 대해서 알아보겠습니다. Vue에서 데이터를 표시할 때 이중 중괄호를 사용합니다. Vue의 문법 중에서 App이 생성될때 이 이중 중괄호 안의 데이터가 딱 한번 렌더링되고 나서 데이터의 변함이 없게 하는 것을 Interpolation (보간법)이라 합니다. 다음 코드를 보면, Hello World 문자열을 클릭할 때마다, 느낌표가 뒤에 더해서 출력이 됩니다. {{ msg }}, friend 이 코드에서 h1에 v-once directive를 추가해 주면, 처음 렌더링 후에 클릭을 해줘도 느낌표가 추가되지 않는 것을 확인하실 수 있습니다. {{ msg }}, friend 이렇게 Vue의 Interpolation (보간법)에.. 2022. 8. 30. [Vue] Vue의 Lifecycle 안녕하세요. 혀코입니다. 이번 시간에는 Vue Lifecycle에 대해서 알아보겠습니다. Vue Lifecycle 은 다음과 같습니다. Vue의 Lifecycle 다음과 같은 것 있습니다. beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted 이 중에서 beforeCreate, created, beforeMount, mounted의 차이점을 코드를 통해 알아보겠습니다. {{ count }} 5보다 큽니다! 코드를 실행시키면 다음과 같이 출력합니다. App이 생성되기 전에 beforeCreate 을 실행했을 때 변수가 undefined이고 HTML에 연결이 되지않아 null 값을 가지고, created li.. 2022. 8. 29. [Vue] Style 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 style을 사용하는 방법에 대해서 알아보겠습니다. 위 태그에서 해당 컴포넌트에 h1 태그가 없음에도 불구하고 h1 색상을 빨간색으로 지정했습니다. 그리고 style 태그에 scoped 속성이 없습니다. 그러면 다른 component에 있는 h1 태그의 색상이 빨간색으로 지정됩니다. 그래서 위 코드는 다음과 같이 사용되어야 합니다. {{ name }} Component에 해당하는 태그의 속성에만 스타일을 정의하고 scoped 속성을 추가해 주도록 합니다. 그리고 style 종류에는 css 와 scss가 있습니다. scss는 중첩 문법을 사용할 수 있기에 개발 속도를 높일 수 있습니다. scss를 사용하려면 lang 속성을 추가해주고 lang 속성의 값은 .. 2022. 8. 29. [Vue] Component 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 Component를 사용하는 방법에 대해서 알아보겠습니다. 지난 시간에 Company 리스트를 반복문 v-for 를 사용해서 출력해봤습니다. 이 코드를 Component로 변경해서 사용하는 방법에 대해서 알아보겠습니다. Company {{ company }} src/components 폴더에 Company.vue 파일을 만들어서 코드를 다음과 같이 작성합니다. {{ name }} 태그 안에 name 데이터가 있고, props를 사용해서 name 데이터에 대한 타입을 String으로 지정해 줍니다. 이 데이터에는 항상 default 값이 들어가 있어야 하기 때문에 default를 빈 문자열로 지정해줍니다. 그리고, App.vue 파일을 다음과 같이 업데이트.. 2022. 8. 28. [Vue] 반복문 v-for 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 반복문 v-for 를 사용하는 방법에 대해서 알아보겠습니다. Vue 에서 리스트 형태의 데이터를 반복문을 통해 출력하려면 v-for을 사용합니다. Company {{ company }} data에 companies라는 리스트 형태의 데이터가 있고, 이것을 html의 ul li에 v-for 반복문을 사용하여 리스트 형태로 출력하면 다음과 같은 결과를 볼 수 있습니다. 다음으로 배열의 index 값도 함께 출력할 수 있도록 소스코드를 변경해 보겠습니다. Company {{ company }} - {{index}} company in companies 를 company, index in companies로 변경해서 index 값을 추출해서 출력할 때 사용했습니.. 2022. 8. 28. [Vue] 조건문 v-if 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 조건문 v-if 사용하는 방법에 대해서 알아보겠습니다. 지난 시간 Vue를 활용해서 Counter 프로그램을 만들어 봤습니다. 만약 Counter 숫자가 7보다 클 경우에 Vue 조건문 v-if를 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. 다음 코드는 지난 시간 작성했던 Counter 프로그램 입니다. {{ count }} Vue 조건문 v-if 을 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. {{ count }} Count가 7보다 큽니다. Count가 7보다 작거나 같을 경우에는 메시지가 안보여지는 것을 확인할 수 있습니다. Count가 8일 경우 7보다 크기 때문에 특정 메시지가 보여지는 것을 확인할 수 있습니다. 이번에는.. 2022. 8. 27. [Vue] Counter 프로그램 만들기 안녕하세요. 혀코입니다. 이번 시간에는 Vue를 사용해서 간단한 Counter 프로그램을 만들어 보겠습니다. 지난 시간에 Vue + Vite 프로젝트 시작하기에 이어서 진행합니다. App.vue 파일의 내용을 모두 지우고 가장 기본적인 App.vue 코드를 작성합니다. // Vue 문법을 적용한 HTML 코드를 이곳에 작성합니다. 가장 기본이 되는 vue 코드는 , 이렇게 작성하면, 숫자를 클릭하면, 숫자가 1씩 증가하게 됩니다. 이렇게 Vue를 사용해서 간단한 Counter 프로그램을 만들어 봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 27. [Vue] Vue + Vite 프로젝트 시작하기 안녕하세요. 혀코입니다. 이번 시간에는 Vue + Vite 프로젝트 시작하는 방법에 대해서 알아보겠습니다. 아래 명령어를 실행해서 Vue + Vite 프로젝트를 시작합니다. $ npm create vite@latest 그러면 프로젝트 명을 물어봅니다. 프로젝트 명을 vue-awesome 으로 합니다. ? project name: >> vue-awesome 다음으로 사용할 자바스크립트 라이브러리 또는 프레임워크를 고릅니다. Vue를 고릅니다. vanilla > vue react preact lit svelte Vite를 사용해서 Vue 뿐만 아니라 vanilla, react, preact, lit 또는 svelte 를 사용할 수도 있습니다. 그리고 vue 종류를 vue 또는 vue-ts 중에 vue로 선택.. 2022. 8. 26. 이전 1 다음
