260326_OurClass_Contact_List 만들기
메인 Tasks
- 요구사항
-
- 입력, 목록 화면 보이기
-
- 정보를 입력하고 추가 버튼 클릭 시 하단 목록에 추가
-
- 삭제 버튼 클릭 해당 목록 삭제
2번 테스크 접근 방법
- 처음에는 APP.vue에서 전체 데이터를 관리하려고 했는데, 폼 입력은 ContactForm.vue에서 직접 다루는게 자연스럽다고 판단
- 입력 → 검증 → emit으로 APP.vue로 보내기 → APP.vue 부모에서 contacts에 push → 폼 초기화
3번 테스크 접근 방법
- 삭제 기능은 리스트에서 발생
- ContactItem.vue에서 버튼 클릭 → emit → 부모에서 핸들링 함수 실행 → 배열에서 제거 순서
결과


Review
- 컴포넌트명과 이벤트명,핸들링용 함수명 등을 자꾸 섞어서 쓰는 바람에 에러가 너무 많이 났다. 좀 더 가독성이 좋도록 네이밍에 신경쓸 필요가 있다.
- 로그를 좀 찍으면서 작업하자.. 잔실수가 너무 많다. 이제라도 좀 잘 쓰자.
금방 끝낼 문제를 1시간 넘게 잡았다 tq