• 기본 todo 처럼 데이터 입력시 출력
  • 각각의 todo는 개별 id를 갖는다.
  • (도전) 특정 todo 삭제 할 수 있도록

컴포넌트

  • 소프트웨어 개발에서 독립적인 단위 모듈
    • 대체로 컴포넌트는 특정 기능이나 관련된 기능의 조합으로 구성되는데, 프로그래밍 설계에서 시스템은 모듈로 구성된 컴포넌트로 나뉜다.
    • VUE - “기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드로 캡슐화 하는 것”

컴포넌트 naming convention

  • 컴포넌트의 첫번째 인자는 태그이름, 두번째 인자는 속성들을 넣어준다.
  1. kebab-case - todo-list
    • 호출 할 때: <todo-list></todo-list> 케밥케이스 태그로만 호출가능
  2. pskalCase - TodoList
    • 호출 할 때 : <todo-list></todo-list> / <TodoList> 둘다 호출 가능
    • 단, DOM에 직접 작성할 때는 케밥케이스만 가능
  3. 그래서 Vue는 모두 소문자이어야하고, 하이픈을 포함하는 규칙(kebob)을 따르는 것을 권장한다.

Props

  • 컴포넌트를 재생산 할 때, 컴포넌트에서 사용할 변수를 부모에서 내려주게 되는 이를 props라고 한다.
  • 반복되는 컴포넌트에 서로 다른 정보가 들어가야 할 때 사용
  • 하위(자식)에서 상위(부모) 데이터를 직접 참조해선 안되고 실제로도 안된다.
  • props 옵션을 통해 부모 -> 자식으로 데이터를 전달
  • 전달하려고 하는 데이터의 이름을 태그 내의 속성으로, 내용을 속성 값으로

Webpack

  • 웹팩은 현재 가장 널리 쓰이는 모듈 번들러
  • JS뿐만 아니라, CSS, IMAGE 파일 등 리소스의 의존성들도 관리한다.

모듈

  • 어플리케이션을 구성하는 개별적 요소
  • 재사용 가능한 코드 조각
  • 모듈은 세부사항을 캡슐화 한다.
  • 특정 기능을 갖는 작은 코드 단위.

모듈 번들러

  • 웹 어플리케이션을 구성하는 자원(HTML, CSS, JS, IMG 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물로 만드는 도구

개발을 편하게 모듈단위 개발 => 모듈끼리 연결(의존성)을 신경 쓰기가 어려워짐 => 웹팩이 하나로 만들어줌.