오늘은 트위터의 일부 모양을 따라서 만들어 보고 자바스크립트를 이용해서 댓글을 작성하면 해당 댓글을 업데이트 하고 업데이트한 댓글의 아이디를 누르면 그 아이디에 해당하는 댓글을 필터해서 보여주는 기능을 만들어 봤다 페어분과 임의로 저장한 댓글 데이터를 출력하는 함수까지 출력하고 나머지 기능인 댓글을 생성하는 기능,새로운 트윗을 조회하는 버튼을 누르면 랜덤으로 생성하는 기능,필터링하는 기능을 나혼자 구현하게 되었다 페어분의 개인적인 사정이 생겨서 그렇게 되었다 혼자서 처음에 기능은 댓글을 작성하는 기능을 구현하였다
댓글 작성
tweet버튼을 누르면 댓글이 작성되는 기능을 만들기 위해 버튼의 아이디를 쿼리 셀렉터로 호출하여 onclick 이벤트를 부여하여 간단하게 구현하였다
랜던 댓글 생성
check new tweet을 임의로 저장된 배열에서 객체를 랜덤으로 선택해서 출력하는 함수를 작성하였다
random함수를 이용하여 배열에서 인덱스를 이용하여 랜덤으로 선택하고 이 추출한 요소를 위와 같은 방식으로 출력하였다
댓글 필터링 함수
댓글 필터링 함수는 처음에 떠올린 방법은 해당 이름에 이벤트를 부여하는데 이 이벤트를 부여할 때 아이디를 받아와서 저장되어 있는 배열을 filter함수를 이용하여 필터링을 해서 새로운 배열을 만들어 내고 작성되어 있는 화면을 지우고 이 새로운 배열로 작성해야겠다고 생각이 들었다 그래서 이벤트를 작성하고 이벤트를 부여해야 할 때 어려움이 생겼다 어떤 타이밍에 이벤트를 부여해야 하는가 라는 어려움이 닥쳤다 제일 코드 밑에서 단순히 이 이벤트를 부여하는 함수를 일일히 호출하면 새로운 댓글이 생기거나 필터링 된 결과를 봤다가 다시 원래 댓글로 돌아오면 이벤트가 부여가 안되는 것이었다 그래서 댓글을 출력하는 함수에서 이벤트를 부여하는 과정을 집어넣었더니 함수를 서로 호출하면서 콜스택이 터져 버리는 모습을 보고 좌절을 했다.... 좀 다른 위치에서 이벤트를 출력해야겠다고 생각이 들었고 생각을 해보니 원래 댓글로 돌아 오거나 새로운 댓글을 만들 때 항상 버튼을 눌러서 이벤트를 처리를 하였는데 그 버튼에서 이 댓글들의 이벤트를 부여하는 과정을 집어넣으면 출력함수와 겹치지 않고 잘 이벤트가 반영되는 모습을 보고 마음을 놓았다
결론
오늘은 간단한 트위터 웹앱을 만들면서 함수를 어떻게 구조적으로 쪼개고 작성하기 전에 어떻게 이를 구현할 지 구상하고 이벤트를 언제 어디서 적용해야할 지 고민할 수 있는 매우 좋은 시간이었다.소스코드는 코드스테이츠 규정상 공개할수 없어 올리지 못하였다.
