본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section5] 63. 템플릿 이해하기 # 여러 Vue앱 사용시 주의할 점 여러 Vue앱을 사용해서 HTML코드의 여러 부분을 제어할 수 있다. 하지만 몇가지 주의할 점이 있다. - HTML 코드에서 동일한 부분을 여러 앱에서 제어해서는 안된다. - 하나의 앱으로 HTML 코드의 여러 부분을 제어하는 것도 안된다. - 즉, HTML 코드 당 하나의 앱만 사용해야 한다. # template 'HTML 부분'이나 '제어되는 HTML'이라는 말은 정확하진 않지만, 직관적인 표현이라 계속 사용하고 있었다. 공식 명칭은 'template'. Vue앱을 HTML 코드의 DOM내 특정 위치에 마운트하게되면, 해당 HTML 코드 부분을 Vue앱의 template으로 지정하게 된다. 예를 들어, 이 ... 부분이 첫번째 Vue앱의 template이 되는 셈이..
[Udemy Vue 완벽가이드 Section5] 62. 하나의 앱 vs 여러 앱 페이지 당 하나의 Vue앱만 설정이 가능한지 궁금할 수 있다. 지금까지는 HTML 코드에서 해당 앱이 제어할 부분에 마운트 하는 방식을 통해 하나의 Vue 앱만 사용했었다. 하지만 여러 개의 Vue앱을 사용하는 것도 가능하다. 그리고, 다른 Vue앱도 첫번째 Vue 앱에서 했던 것과 동일한 작업을 할 수 있다. //app.js const app2 = Vue.createApp({ data() { //data 객체 반환 return { //data 프로퍼티 가질 수 있다. favoriteMeal: "Pizza", }; }, }); app2.mount("#app2"); 그리고 이를 두 번째 앱에 해당하는 section에서 출력시킬 수 있다. {{ favoriteMeal }} 두 번째 앱이 제어하는 에서는 첫 ..
[Udemy Vue 완벽가이드 Section5] 61. Vue 반응성 심층 분석 # Proxy (프록시) Vue가 아닌 JavaScript의 내장기능인 '프록시'에 대해 알아보자. let message = 'Hello!'; let longMessage = message + ' World!'; console.log(longMessage); //'Hello! World!' message = 'Hello!!!!'; // message 값을 변경. console.log(longMessage) // 'Hello! World!'. 값이 바뀌지 않았다. 위의 코드를 보면, message의 값을 변경하더라도 longMessage의 값이 바뀌지 않았다. 그 이유는 기본적으로 JavaScript는 반응형이 아니기 때문. 반응형은 Vue가 추가한 기능이다. 변수가 있고, 이후 해당 변수에 변경사항이 생..
[Udemy Vue 완벽가이드 Section5] 60. Vue의 반응성 소개 input창에 입력값을 작성하고, 'Set Text'버튼을 클릭 → 아래 출력된다. 이는 data, methods, 해당 메서드를 트리거하는 event binding, message 데이터를 출력하는 보간의 합작품! index.html How Vue Works Set Text {{ message }} app.js const app = Vue.createApp({ data() { return { currentUserInput: "", message: "Vue is great!", }; }, methods: { saveInput(event) { this.currentUserInput = event.target.value; }, setText() { this.message = this.currentUserIn..
[Udemy Vue 완벽가이드 Section3] 48. 섹션 요약 이번 섹션에서는 조건부 컨텐츠와 목록을 배웠다. 1/ Conditional Content(조건부 컨텐츠) v-if(and v-show) allows you to render content only if a certain condition is met. 특정 조건 만족시에만 컨텐츠를 렌더링되게 할 수 있다. v-if v-if can be combined with v-else and v-else-if(only on direct sibiling elements!) v-if는 v-else나 v-else-if와 결합해서 직계 형제 요소에만 한정된다. v-else와 v-else-if를 요소에 사용할 때는 v-if 내부가 아니라 v-if에 바로 뒤이어 사용해야한다. 요소를 실제로 DOM에 추가하거나 DOM에서 제거할..
[Udemy Vue 완벽가이드 Section3] 47. 목록 및 키 (key속성) v-for에 대해서 알아두어야 할 점이 하나 있다. 모르고 넘어간다면 버그가 발생할 수도 있다. # 이벤트 버블링 아래의 코드를 출력해보자. {{ goal }} - {{ index }} goal을 추가하고, input창을 click → li요소를 클릭한 것으로 간주되어 추가한 goal이 삭제된다. (input창을 click했음에도 불구하고, '이벤트 버블링'이 생겨 li요소의 removeGoal 메서드가 트리거된다.) 더보기 **이벤트 버블링(Event Bubbling) : 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위 요소들로 전달되는 특성을 의미한다. HTML요소는 기본적으로 트리구조를 가진다. 트리구조상, 한 단계 위에 있는 요소를 상위 요소라고 한다. (위의 경우, p와 input..
[Udemy Vue 완벽가이드 Section3] 46. 목록 항목 제거하기 list에서 항목을 지우려면 어떻게 해야할까? v-for를 사용하고는 있지만, 여전히 HTML요소이다. 다시말해, 여전히 이벤트리스너를 추가할 수 있다는 의미. 예를 들어, 목록 항목 click시 반응하도록, event listener를 추가할 수 있다. 목록 항목을 클릭하면 해당 goal을 goals 배열에서 삭제하도록 처리해보자. JavaScript에서는 method를 통해 추가할 수 있는 동작. 삭제하고자 하는 goal에 대한 식별자가 필요한데, index를 활용해보자. removeGoal 메서드에 대해 index를 인수로 갖도록 하고, JS내장 메서드인 splice메서드를 통해 하나의 요소만 삭제하도록 해보자. 더보기 **splice함수 Array.splice(start, deleteCount) ..
[Udemy Vue 완벽가이드 Section3] 45. v-for 자세히 알아보기 배열에 v-for를 활용해보았는데, 이 방식이 v-for의 가장 흔한 활용방식. 이 외에도 흥미로운 변형이 있다. 먼저, 배열 내 항목 외에도 다양한 데이터를 출력할 수 있다. # index 배열 내 항목의 index도 출력할 수 있는데, v-for에 괄호를 넣고, 뒤에 쉼표를 붙이고 두 번째 항목을 입력한다. index나 idx처럼 이름은 임의로 설정하면 된다. 그러면 해당 항목의 index가 출력된다. Vue에서 지원하는 또 다른 구문이다. 이 표기법을 이용하면 항목 뿐만 아니라, 해당 항목의 index도 출력가능하다. {{ goal }} - {{ index }} # 객체 배열 외에도 객체에 v-for를 사용할 수 있다. 보통 배열에 사용하지만, 객체에 사용해야 할 때도 있다. Vue앱의 data 프..

티스토리툴바