UX/UI 디자이너

이전까지는 각 콤포넌트 간의 데이터 통신을 설정해주지 않아서 사용자가 페이지에서 동작을해도 화면에 바로 반영이 되지 않았다. 이번 회차부터는 data를 app.vue 파일에 한군데 묶어 동장하도록 리팩토링한다! 이전에 배웠던 props와 event를 사용하게 된다! 리팩토링 정리 하위 콤포넌트의 펑션은 그대로 가져와도 되지만, 인자가 제대로 들어갔는지 확인해주면 된다! Vue.js 투두리스트 - props와 event로 리팩토링하기 2022/06/06 0.과정 요약! 입력 > 저장 > 배열 > 화면에 푸쉬 1.Todolist에 있는 기능을 Props로 만들기위해 App.vue로 옮기기 -todoList에서 입력하면 리스트 생기는 created 코드 script로 가져오기 -todoitems는 모든 파일에..

컴포넌트 통신 방식 -화면 안에 여러개의 콤포넌트를 만들면 콤포넌트 가느이 관계가 생김 -각각의 컴포넌트가 각각의 데이터를 갖는데, 서로 공유하기 위해선 a.props랑 b.이벤트를 사용해야함. -사용하기 위해서는 규칙을 우리가 알아야함 -규칙이 있어야 데이터의 흐름을 추측하고 버그를 잡기 쉬워진다. (만약, 규칙이 없다면 어디서 부터 데이터가 왔는지 확인하기 어려워짐) -위에서 아래로 내려가는건 props, 아래에서 위로 올라가는건 event 1.props 속성 -Vue라는 인스턴스를 만들고 el로 #app -app header이라는 콤포넌트를 만들어 준다. -여기서 teamplate만 따로 사용할것, new Vue({ el: '#app', components:{ 'app-header':{ templa..