일주일 간, 길고 길었던 휴가를 끝내고 다시 일상으로 돌아왔다.. 이전까지의 개발은 까먹은 듯 Vue가 왜 이렇게 새로울까. 이전 시간에 했던 작업은 "Component-props-for 퀴즈였구나..." Languages 안에는 각각의 객체, 총 4개의 객체가 존재하는 것이다. 이후 아래와 같이 컴포넌트를 등록하고~ 아래와 같이 todo-list를 등록하여 데이터를 뽑아낸다. 해당 코드를 저장한 후 Chrome으로 바인딩하면~ 여기서 잠깐!!!!!!!! 위 글을 참고하면, key 값을 명시적으로 선언해주었을 때 빠르게 랜더링이 가능하다!! -> 이를 통해 브라우저 부화를 줄일 수 있다. 이 "key"를 어디에 적용하나? 어? :key="lanaguage.id" id는 무엇이길래..?? id는 처음 La..

문제는 아래 그림과 같이 컴포넌트를 생성하고~ 아래 그림처럼 컴포넌트를 등록해보자 근데... 나는 지금 처음 본 코드가 있다.. 나만 그런 것일까.. Todos..? ..... for loof...? ..... 이게 모다냐...... 아마 Todos는 배열을 뜻하는 것이겠고~ loof...? 흐어..... 이에 대한 자세한 사항은 아래 주소를 참고해보자~ https://vuejs.org/v2/guide/list.html 그렇다면 슬슬 문제를 풀어볼까? 정답은 다음 시간에 공개!! 두근두근....

Event Bus? 그게 뭐야????? : 컴포넌트 간의 관계가 없더라도, 컴포넌트 간의 통신을 할 수 있는 것!!! Event Bus의 장/단점 장점 : 컴포넌트 기본적인 통신(상.하위 관계를 가지고. 그 안에서만 데이터를 주고 받을 수 있다는 그런 기본적인 규칙...)을 지키지 않아도 됨 단점 : 컴포넌트 관계가 명확해지지 않음. 다시 말해서, 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않음. 이벤트 발생 import { eventBus } from '.../.../main'; eventBus.$emit('refresh', 10); : 이벤트를 발생시킬 컴포넌트에 eventBus import 후 $.emit으로 이벤트를 발생 이벤트 수신 import { eventBus } from '....

같은 레벨 상 컴포넌트는 어떻게 통신할까? 답은 아래 그림을 보면 확인할 수 있다. X ?? 그렇다. 같은 레벨의 컴포넌트끼리는 직접적으로 데이터를 주고 받을 수 없다. 왜??? 컴포넌트 고유의 유효범위 때문이다. 즉, 컴포넌트는 자체 scope를 갖기 때문에 다른 컴포넌트의 값을 직접 참조하지 못하므로 위와 같이 기본적인 데이터 전달 방식을 활용해야한다고 한다. 따라서, 같은 레벨의 컴포넌트가 데이터 통신을 하려면, 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야한다. cf )기본적인 데이터 전달 방식이란?뷰는 상위에서 하위로만 데이터를 전달해야하는 기본적인 통신 규칙을 따름

이 전 시간, 퀴즈 푼 것을 작성해본다. 먼저 문제를 해결하기 위해 아래와 같이 코드를 작성하였다. 순서1. sibling-component를 이름으로 갖는 새로운 컴포넌트를 등록2. 컴포넌트에 표현해줄 데이터 작성 (anotherMessage) 3. id가 app인 영역에서 상위 컴포넌트에 존재하는 anotherMessage를 sibling-component 컴포넌트에 데이터를 전달할 수 있도록 연결 결과는 이 전 시간에 첨부한 결과창과 같다! 오홍~ 조오오아아써어!!!!!

오늘은 props 퀴즈를 풀어보자!!........... 아래 코드에 주석처리로 문제를 작성해보았다. 퀴즈를 풀면 화면에 어떤 것이 나올까? 그것은 다음 시간에 올릴 것이다! 흐흐흐흐.... 실습을 하고 chrome으로 결과를 확인한 결과, 아래와 같이 나왔다!! 코드는 다음 이 시간에 개봉 예정!