[x] todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가)
[x] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
[x] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
[x] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
[x] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
소감
스터디에 진행했던 내용이라 금방 마무리 할 줄 알았는데 오래 걸렸네요 ㅠㅠ
따로 리뷰어가 지정 안되어 있어서 우선 PR 올리겠습니다.
가장 어려웠던 점은 list의 상태값에 때라 분류하는 기능이였습니다.
분류하는거 자체는 구현할 수 있었지만 분류 후에도 같은 데이터를 유지하도록 구현하는게 어려웠습니다.
App 컴포넌트에서 전체의 data를 관리하고 todoList render할 때는 data 중에 active와 completed에 맞게 filter 후에 render 해줬습니다.
문제는 인덱스를 li 순서대로 정해 놓았기 때문에 todo를 갱신할 때 정상 동작을 못하고 있네요. 고유 id로 구분하면 해결 될 것 같은데 해결법이 딱히 떠오르지 않아 현재 상태로 우선 제출합니다.
그리고 validation 부분도 잘 안됐습니다. target 엘리먼트가 있는지와 타이핑시 공백으로 입력을 주는지 2가지만 확인하고 있습니다.
전체적으로 로토가 알려주셨던 구조를 유지하려고 했습니다.
각 컴포넌트는 각자의 할 일을 수행하고 App에서 data와 component를 사용하도록.
하지만 미션을 수행 할 수록 난잡해진 부분이 있네요.
더 열심히 해야겠습니다.
미션내용
1
진행상황
소감
스터디에 진행했던 내용이라 금방 마무리 할 줄 알았는데 오래 걸렸네요 ㅠㅠ 따로 리뷰어가 지정 안되어 있어서 우선 PR 올리겠습니다.
가장 어려웠던 점은 list의 상태값에 때라 분류하는 기능이였습니다. 분류하는거 자체는 구현할 수 있었지만 분류 후에도 같은 데이터를 유지하도록 구현하는게 어려웠습니다. App 컴포넌트에서 전체의 data를 관리하고 todoList render할 때는 data 중에 active와 completed에 맞게 filter 후에 render 해줬습니다. 문제는 인덱스를 li 순서대로 정해 놓았기 때문에 todo를 갱신할 때 정상 동작을 못하고 있네요. 고유 id로 구분하면 해결 될 것 같은데 해결법이 딱히 떠오르지 않아 현재 상태로 우선 제출합니다.
그리고 validation 부분도 잘 안됐습니다. target 엘리먼트가 있는지와 타이핑시 공백으로 입력을 주는지 2가지만 확인하고 있습니다.
전체적으로 로토가 알려주셨던 구조를 유지하려고 했습니다. 각 컴포넌트는 각자의 할 일을 수행하고 App에서 data와 component를 사용하도록. 하지만 미션을 수행 할 수록 난잡해진 부분이 있네요. 더 열심히 해야겠습니다.