260326_OurClass_Contact_List 만들기

메인 Tasks

• 요구사항
  • 1. 입력, 목록 화면 보이기
  • 2. 정보를 입력하고 추가 버튼 클릭 시 하단 목록에 추가
  • 3. 삭제 버튼 클릭 해당 목록 삭제

2번 테스크 접근 방법

1. 처음에는 APP.vue에서 전체 데이터를 관리하려고 했는데, 폼 입력은 ContactForm.vue에서 직접 다루는게 자연스럽다고 판단
2. 입력 → 검증 → emit으로 APP.vue로 보내기 → APP.vue 부모에서 contacts에 push → 폼 초기화

3번 테스크 접근 방법

1. 삭제 기능은 리스트에서 발생
2. ContactItem.vue에서 버튼 클릭 → emit → 부모에서 핸들링 함수 실행 → 배열에서 제거 순서

결과

Review

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