게시글에서 댓글을 작성하고 댓글등록을 누르면 새로고침 없이도
자동으로 업데이트 된 댓글리스트가 아래에 뜨게 만드려고 했다.
문제발견
하지만 댓글을 작성하고 댓글등록을 눌렀을 때는 아무런 반응이 없고,
새로고침을 하거나 게시글 카드를 다시 한 번 클릭했을 때만 업데이트 된 댓글리스트가 나타났다.
첫 번째 시도
처음에 세운 가설>
1. 게시글 카드 최상위 div id 값에 해당 게시글의 document id 값을 저장.
2. 댓글을 저장할 때, 해당 댓글이 달린 게시글의 document id 값을 댓글의 data 로 저장.
3. 게시글의 id 값과 댓글이 가진 id 값을 대조해 일치하는 id 값을 가진 댓글만을 해당 게시글에 불러옴.
댓글을 불러오는 함수는 getCommentList 이고,
아래와 같은 두 가지 상황에서 onclick event 로 작동하도록 되어있었다.
1. 게시글 카드를 클릭할 때
2. 댓글 등록을 클릭할 때
댓글 등록 onclick event 로 save_comment 실행하고,
save_comment 안에 getCommentList 함수를 종속시켜 실행
때문에 게시글 카드를 클릭할 때와 / 댓글 등록 창을 클릭할 때,
공통적으로 이벤트가 발생한 타깃을 기준으로 거슬러 올라가
해당 게시글 카드의 최상위 div id 값을 가져와야 한다고 생각했다.
maincardId : 게시글 카드를 클릭할 때, 해당 게시글 카드의 최상위 div id 값 경로.
feedcardId : 댓글 등록을 클릭할 때, 해당 게시글 카드의 최상위 div id 값 경로.
그리고 댓글들이 가진 게시글의 document id 값과 maincardId 혹은 feedcardId가 일치할 때, 해당하는 댓글들만 가져오라고 조건문을 만들었다.
그랬더니 오류가 발생한 것이었다.
콘솔을 찍어보니 maincardId 의 경우에,
event.target 자체가 card 다보니 card 를 특정하기가 용이했지만,
feedcardId 는 서로 다른 부모 div에 속해있기 때문에,
card 를 특정하기까지 여러 단계를 거쳐야 해서 해당 card를 특정하기가 어려워
잘못된 값이 들어오기 때문에 위의 조건문이 제대로 작동하지 않았던 것이었다.
따라서 다른 방식이 필요했다.
Tip) console 에 함수를 찍어볼 때는 함수의 최상단에 위치시켜야 계산방해가 없음
두 번째 시도 > 해결
바로 로컬스토리지를 이용하는 방식이다.
처음 카드를 클릭해 게시물 상세보기로 들어갔을 때,
로컬 스토리지에 card 가 가지고 있던 document id 를 저장해 사용하는 것이다.
카드를 클릭했을 때 가져올 수 있는 document id 값 혹은
게시글에 들어왔을 때 가져와 로컬스토리지에 저장한 document id 값 을
maincardId 라고 선언하고,
만약, 댓글이 가지고 있는 게시글의 document id 값이 maincardId 와 같을 때,
해당 댓글들을 가져온다는 조건문을 작성했다.
Tip) 변수선언을 읽는 방식은 우항 -> 좌항 순이다.
or ( || ) 연산자의 특징
ex : maincardId = A || B
- 조건문 안에 들어있을 때는 A 와 B 의 순서가 중요하지 않다.
- 변수 안에 들어있을 때는 A 와 B 의 순서가 중요하다.
변수 안에서는 A의 값이 참일 때, maincardId 의 값은 A가 되고,
A가 거짓일 때만, maincardId 의 값이 B가 된다.
..
때문에 카드를 처음 클릭했을 때는 A가 참이여서
(이전 카드의 id 값을 저장하고 있어 거짓인 B의 값과 상관없이) maincardId 의 값이 A가 되고,
댓글등록 버튼을 클릭했을 때는 A가 거짓이여서 maincardId 의 값이 B가 된 것.
위와 같이 함수를 변경하고 나니 댓글 작성후 새로고침이나 카드 클릭을 하지 않아도
업데이트된 댓글리스트가 정상적으로 불러와지는 것을 확인했다.
느낀점
처음에는 로컬 스토리지를 사용하는 방식을 상상하지 못했다.
기능의 존재 자체를 모르니까 사용할 수 있는 기능의 폭이 좁아지는 것이다.
오늘 일을 겪으면서 기본개념의 심화와 다양한 함수 사용 경험의 풀이
효율적인 코드작성에 지대한 영향을 끼친다는 것을 배웠다.
앞으로는 공부 외에도 다양한 코드를 직접 써서 조각기능을 만드는 실습을 병행해야겠다.
TIL 장인... 멋져여