[프론트엔드 개발 스쿨 16주차] Todo(할일 목록) 의 끊임없는 연습

1. Todo란 무엇인가?

 

위 사진은 todo가 완성된 모습이다 (물론, 최종본은 아니다 버전 1234 중에 4버전일뿐!)

대략 설명하자면 , 일정관리의 심플버전이라고하면 편할것 같다.

내가 HTML, CSS, JAVASCRIPT를 배워야한다고 쳤을때

새로운 할일로 Angular를 입력할 수도 있는거고, 잘못입력해서 지우고싶으면 지울 수도 있고

할일을 완료했으면, 완료할 수 있도록 체크박스를 통해서 바꿀 수 있고, 언제든 한 일 목록과, 아직 하지않은 목록을 구분할 수 있고, 아래에는 완료일을 지워줄 수 있기도하고, 실시간으로 완료한일들과 남은일들이 표시된다.

 

왜 Todo를 이렇게 소개하는가 하면, 

Js를 그리고 Angular를 배우면서 가장 많이 하는 예습이자 , 실제로 스쿨 전기수선배분들이 현업에서 todo가 가장 많은 도움이 되었다고 말한다.(라고 강사님께서 말하셨다....) 

 

버전 1을 css도 없고 그냥 간단하게 add, remove, change 정도의 이벤트들을 가지고 하는 

버전 2는 css를 적용하고 다양한 기능들을 조금더 추가한.

버전 3은 db연동을 하여 Ajax를 사용해서 데이터들을 이끌어와서 뿌려주는

버전 4는 Angular로 만들었다. 

 

**앞으로 또 업데이트가 쭈욱 될것같다... ㅎㅎㅎ

 

2. todo에 필요한 주요함수들 

여러가지 todo를 만들기 위한 함수

 

** 아래코드들은 Angular 코드 즉 버전4 코드입니다.

 

제일 먼저

1. addTodo() :   input태그에 입력한 값이 add가 되는 코드이다.

addTodo(content:string){
    this.newtodo = { id: this.generateId(), content, completed: false };
    this.todos = [this.newtodo, ...this.todos];
  }

새로운 todo를 만들고 그것을 기존의 todos에 merge하는 방식입니다.

새로운 todo를 만들때에는 id, content, completed3가지 상태를 넣어줘어야하는데,

content는 input에서 입력한 값을, completed는 완료하지않은 일일 것이므로 false값을 넣습니다.

id는 id를 따로 만들어야하는데, generateId() 라는 함수를 통해서 만듭니다.

generateId(){
    return this.todos.length? Math.max(...this.todos.map(todo=>todo.id)) + 1 : 1;
  }

먼저 삼항연산자를 사용하고, todos의 length가 있는지 없는지 파악(=todos게 한개라도 값이 있긴하냐)

그래서 값이 없다면, id에 1을 주는 것이고

todos에서 id들만 가지고 와서, id들중에 가장 큰값에 더하기 1을 해주어 id를 만듭니다.

 

2. removeTodo() :  x버튼 클릭시에 해당 todo를 지우기 

removeTodo(id:number) {
    this.todos = this.todos.filter((todo)=>todo.id !== id);
  }

todos에서 filter를 사용해서 해당 id값이랑 todo의 id랑 같지 않은것만 남기는 방식입니다. 

(같은거는 filter되서 없어지는)

 

3.  toggleTodo() : 앞에 체크박스를 클릭하면 todos의 상태가 true, false로 바뀜

 

toggleTodo(id:number){
    this.todos = this.todos.map( todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo));
  }

ㅇ

todo중에 id로 확인을해서 todo가 선택된 todo인지 확인을하고, 기존의 completed를 not연산자를 통해서 상태를 바꾼다음에 merge , 만약 선택된 todo가아니면 그냥 todo로 두기

 

 

3. Todo를 하면서 느낀점

todo를 하면서 고민을 많이....

todo를 만들면서 느낀점이 있다면, 첫째 배열 고차함수를 정말 잘 써야겠구나를 느꼈다. 

 

map, filter, reduce, forEach 등 배열 고차함수를 잘 다룰 줄 알아야 코드를 잘 이해할 수 있다.

또한, 코딩을 잘 할 수 있다. 이부분은 현업에서도 많이 쓴다고 하니까 필히 다시금 복습할 필요가 있는것 같다.

 

둘째, todo는 여러가지 js를 적용하기위해 최적이다. 

정말 골고루 배워서 써먹을 수 있다고 생각한다. 앞서 말한 배열고차함수 뿐만 아니라 Ajax통신을 이용해서 데이터를 가지고와서 뿌리고, PATCH, GET, POST 등을 이용해보기도 하였고, 클래스로 바꾸는 연습, Angular로 다시 짜보는 연습, 콜백함수의 개념 등등 정말 가지가지 배울 수 있다.

 

셋째, todo는 다양한곳에서 적용시킬 수 있을것 같다. 홈페이지를 만듬에 있어서 todo는 좋은 예제가 될 것 같다. 게시판을 구현한다거나, 어떤 목록을 구성함에 있어서 todo가 많은 도움이 될 것임이 분명하다고 느꼈다.

그리고 나 뿐만 아니라 많은 다른 사람들도 그렇게 느꼈다.

 

현재도 todo진행중이고, 과거에도 todo를 했었고, 미래에도 todo를 할예정이다.

이 todo의 여정이 어디가 끝일지는 모르겠으나, 점점 업그레이드 되가는 내 자신 그리고 todo를 볼 수 있어 좋다.

지금 하는 todo가 여러 많은 곳에서 도움이 되길바라며....

 

 

p.s) 혹시라도 todo코드가 궁금하다면 아래 제 깃허브를 참고해주세요.^^

https://github.com/sunnykim91/sunny_Angular/blob/master/src/app/todos/todos.component.ts

 

 

 

 

 

<패스트캠퍼스 프론트엔드 스쿨 후기>

 

 

[프론트엔드 개발 스쿨] 살펴보기>>