[프로젝트][ToDoList] 컴포넌트 내용 구현하기1

• TodoHeader: 애플리케이션 이름 표시
• TodoInput:할 일 입력 및 추가 
• TodoList:할 일 목록 표시 및 특정할 일 삭제
• TodoFooter:할 일 모두 삭제

 

TodoHeader

 

header 태그로 바꾼다.

app.vue

header.vue

• scoped는 뷰에서 지원하는 속성, 스타일 정의를 해당 컴포넌트에만 적용하겠다는 의미이다.

 

ToDoInput

• input 태그,버튼 추가하기
• v-model로 값을 특정 data에 넣어준다.

코드

 

입력 전

입력 후

• 버튼 이벤트 설정해준다.

• 입력 받은 값을 로컬 스토리지에 저장한다. setItem() API를 사용해 저장할 수 있다.
  -setItem()은 키, 값 형태이며 저장 기능을 최대한 단순하게 하기 위해 키, 값 모두 입력받은 텍스트로 지정한다-

localStorage.setItem()으로 사용한다.

*저장된 위치

개발자 도구->Application->Local Storage ->http://localhost:8080를 클릭해 확인할 수 있다.

• 만들어진 method 안에 예외 처리를 해준다.
  -input 태그에 입력된 텍스트가 없을 경우 로컬 스토리지에 저장되지 않도록 예외처리를 하는 것-

*디자인 패턴: 단일 책임 원칙

addToDo()에 ClearInput method를 넣지 않고 따로 만들어서 만든 이유(수정 , 보완)

 

 

 

직관적인 버튼 모양 만들기

• 어썸 아이콘을 사용해 더 직관적인 버튼 모양을 만들 수 있다.
• v-on:keyup.enter는 인풋 박스에서 엔터를 눌렀을 때 동작하는 속성이다.

aria-hidden, i 태그,button 대신 span 사용

 

css 정의

• ToDoList 컴포넌트
• 로컬 스토리지에 저장된 할 일이 몇 개든 모두 불러와 화면에 보여준다.

 

할 일 목록 만들기

 

스토리지 데이터를 데이터에 저장하기

• 배열에 스토리지 데이터를 담고 뷰 인스턴스 생성 시 데이터를 전달한다.

 

뷰 데이터의 아이템 개수만큼 화면에 표시하기

• v-for 디렉티브를 이용해 데이터를 출력한다. 

배열에 값을 담아 출력하기 

css

 

 

 

ToDoList.vue에 할 일 삭제 기능 추가 

• 3가지 행위를 해야 한다.

1. 선택된 리스트 뷰에서 인식

• 텍스트 값과 인덱스 값을 반환하도록 설정해 준다. 

Template

속성

 

2. 로컬 스토리지와 뷰 데이터에서 삭제하기

• method에 localStorage. 지우는 method와 splice() 메서드를 사용한다.

*splice() 

• 자바스크립트에 기본적으로 내정되어 있는 API
• 배열의 특정 인덱스에서 부여한 숫자만큼의 인덱스를 삭제함
• 배열 프로그래밍에서 삭제 시 주로 사용하는 API

 

 

 

모두 삭제하기 버튼을 포함하는 ToDoFooter 컴포넌트

• clearAllButton을 생성한다.

이어지는 글 

https://dalpenglow.tistory.com/119