시작은 미약하였으나 , 그 끝은 창대하리라

(1) 컴포넌트의 기본 프레임 잡기 (2) 컴포넌트의 통신 props,event (3) 각각의 컴포넌트에 기능 구현 결국 모든 컴포넌트의 코드는 아래와 같고 주석으로 써논 설명을 보면 이해를 할 수 있을것이다. {{homeTitle}} 만든이 {{ todoItem }} 삭제 추가 전체삭제

(1) 컴포넌트의 기본 프레임 잡기 (2) 컴포넌트의 통신 props,event (3) 각각의 컴포넌트에 기능 구현 앞의 글에서 app.vue에 하위컴포넌트(자식컴포넌트)들을 등록을 배웠다. 빨리 하위 컴포넌트의 역할을 구현하고 싶지만 그전에 알아 두어야할 것이 있다. props와 event이다. 앞에서 말했지만 app.vue라는 컴포넌트 안에 하위 컴포넌트를 넣어주어서 구성을 한다고 했지만 문제가 존재한다. 만약 간단하게 html코드로만 작성할 것이라면 문제는 없겠지만, 우리는 javascript기능 즉, 동적인 역할을 만들어줄것이다. (가령 무엇인가 타이핑을 했을때 그것이 출력이 되도록 말이다.) 어떠한 데이터를 위(상위)에서 아래(하위)로, 아래에서 위로 하는것이 props와 event이다.. 부모..

(1) 컴포넌트의 기본 프레임 잡기 (2) 컴포넌트의 통신 props,event (3) 각각의 컴포넌트에 기능 구현 To do List를 만들기 전에 컴포넌트의 구성에 대해 알고 있어야 한다. 우리가 쓸 컴포넌트는 총 5개로 App.vue/TodoFooter.vue/TodoHeader.vue/TodoInput.vue/TodoList.vue 이다. 컴포넌트란, 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미, 사용이유, 재활용성과 수정에 용이 하기 때문이다. ( 하나의 컴포넌트에 모든 기능을 구현 하면 되지않을까 생각을 하겠지만, 프로젝트가 커진다면 어려움 그자체이다. 그렇다면 Todo List를 만들기 위해 컴포넌트를 어떻게 조합해야하는지 생각을 해보자. app.vue 안에 나머지 4개의..