팀과제 프로젝트에서 댓글 CRUD 구현과제를 만들고 리팩토링 하는 과정에서 문제가 발생했다.
아이콘 버튼을 누를 시 수정과 삭제가 되게 만들었는데
새로운 감상평을 등록하고 나면 버튼이 동작하지 않는다.
그러나 새로고침을 하면 동작을 하게 된다.
처음 생각난 것은 댓글들이 리스팅 되고 이벤트리스너가 추가된 뒤 댓글을 작성하고 리스팅하면 이벤트 리스너가 추가되지 않는 것 같다 였다.
구조상 리스팅 함수 다음에 무조건 수정기능 함수와 삭제기능 함수를 오게 만들었다.
기존에는 따로 함수를 만들지 않고 리스팅함수 내부에서 수정기능과 삭제기능을 구현했었는데 구조상 깔끔하지 않아 함수로 만들기로 했다.
getReviews();
deleteReview();
editReview();위와 같은 식으로 get하는 모든 구문에 다른 함수들을 추가 함으로써 동작되게 바꾸었다.
동작 확인 후 아예 getReviews() 함수 내부에 삭제와 수정기능 함수를 호출하게 함으로써 코드를 간소화 시켰다.
처음 코드를 짤때 약간 레이아웃 예시도 없어서 막막했는데 기존 웹사이트의 디자인을 따라하니 어느정도 레이아웃이 잡혔다.
이후 할 수 있는대로 코드를 막 치면서 기능을 구현했는데 수정 기능을 작성할 때에는 손쉽게 기능을 만들 수 없어 생각하는 시간을 가졌다.
코드를 치지 않고 앉아서 30분동안 구상만 했다. 내가 아는 방법을 총 동원해서 말이다.
결론적으로 댓글 입력창을 재활용하고 싶다는 생각이 들었고 어떻게 하면 될지 순차적으로 생각해냈다.
그럼 전역변수를 하나 만들어 등록할때와 수정할때에 기능을 분기시켠 되겠다 라는 생각에 도달했고 그 이후는 순식간에 의사코드를 작성했다.
// 수정기능 만들기
// 등록창을 이용해서 수정 버튼 클릭시 비밀번호를 제외한 내용 자동 입력
// 등록버튼의 텍스트를 수정으로 변경
// method 전역변수를 만들어 수정아이콘이 눌렸을 경우 edit상태로 만듬 (default 값은 submit)
// method 전역변수 상태에 따라 등록버튼의 기능을 등록과 수정으로 분기 시킨다.
// 그 전역변수가 edit 상태면 기존 정보를 불러와 감상평만 수정이후 코드작성을 순조로웠고 생각보다 금방 기능을 구현할 수 있었다.
오히려 막무가내로 기능을 구현하기보다 생각을 해서 정리를 하고 만드는 것이 훨씬 빠른 것 같다.
오늘의 핵심은,
- 무작정 타이핑을 하지 말자.
- 어떻게 구현할 것인지 생각해서 확정을 짓는다.
- 기능구현을 위한 주석을 작성하자.
- 결코 빨리 만드는게 중요하지 않다. 질 좋은 코드를 만드는게 중요하다.
