항해 99 5기 TIL_25

▶ Today I Learned

 

<홈페이지 구현>

 

[댓글 수정 구현]

/* 댓글정보 불러와서 표시 */

      async function getComments() {

        $('#tableBody').empty()

        try {
          const response = await axios.get("/api/get-comments");
          console.log('댓글정보 불러오기', response.data)

          let arr = response.data.comment
          let i = 0;
          let orderNumber = 0
          let comment_temp

          for (i; 0 < arr.length - i; i++) { //최신 댓글이 위로 오도록 거꾸로 나열

            if (arr[arr.length - i - 1].postingId === id) { // postingId와 해당 게시글의 Id가 같은 경우만 표시

              let nickname = arr[arr.length - i - 1].nickname;
              let comment = arr[arr.length - i - 1].comment;
              let date = arr[arr.length - i - 1].date;
              orderNumber += 1


              if (nickname === checkingNickname) {

                console.log('실행되었어')
                comment_temp = `<tr>
          <th><strong>${orderNumber}</strong></th>
          <td id="commentNickname">${nickname}</td>
          <td>${comment}</td>
          <td>${date}</td>
          <button class="button is-link is-light is-small" id="edit-btn">수정</button>
          <button class="delete" id="delete-btn" on>삭제</button>
        </tr>`
              } else {
                console.log('안되었어')
                comment_temp = `<tr>
          <th><strong>${orderNumber}</strong></th>
          <td id="commentNickname">${nickname}</td>
          <td>${comment}</td>
          <td>${date}</td>
        </tr>`
              }

              $('#tableBody').append(comment_temp);

            }
          }
        } catch (error) {
          console.error(error);

        }

      };

로그인을 비롯해 5개의 기능을 구현하지 못해 전날부터 밤을 새서 고지를 눈앞에 두었었다.

그러나 댓글 수정기능을 추가하는 과정에서  작성자에게만 댓글 수정/삭제 버튼이 보이도록 하는 부분이 막혔다.

위와 같이 조건문으로 나누어 DB에서 불러온 닉네임과 토큰에 담겨있는 유저의 닉네임이 같으면 버튼이 보이도록 구현한 것인데,

코드는 오류없이 잘 작동했지만 어째 버튼이 계속 나타나지 않았다.

콘솔을 구간별로 찍어 가고 코드의 첫부분부터 흐름을 따라 관찰해보았지만 아직까지 원인을 발견하지 못했다.

중간에 사용한 특정 메서드의 문법이 생각과 다른 것일 수도 있고 눈에 띄지 않는 오타가 난 것일 수도 있다.

혹은 구현 당시 새로고침이나 파일 저장이 이루어지지않아 알고리즘이 업데이트되지 않아서 일 수도 있다.

이유는 알 수 없지만 고려할 것은 많고 살펴볼 것 또한 많다.

위의 코드는 빙산의 일각에 불과하다. 당장 과제는 했던 부분까지만 제출하였고 우선 주말에 한번 코드를 살펴보도록 하자.

 

 

▶ 느낀 점

 

과제를 기한까지 완벽히 구현해내지 못했다. 코드를 처음부터 다시 짜고 새로운 방식인 axios를 도입하느라 시간이 걸린 것, 강의를 바로 보지않고 스스로 답을 찾기 위해 구글링으로 코드를 살펴본 것 때문에 지연되었긴 하다. 그렇다고 해서 많이 다른 코드를 짜거나 훌륭한 답을

찾아낸 것은 아니다.

하지만 나에게 답을 알려주는 상황이 항상 있는 것은 아니기에 스스로 답을 찾을 줄도 알아야 한다.

비록 이번엔 시간을 지키지 못했지만 점점 지식이 쌓이고 경험이 쌓이다보면 해결할 수 있을 거라 믿는다.

다가오는 새로운 한주도, 내일도 화이팅이다..!

 

+ 오늘 밤을 새며 수많은 구글링을 하고 코드를 다양하게 짜보았지만 과제 제출 기한을 지키고자 이것을 별도로 기록하진 못했다.

기록도 핵심 위주로 하도록하고 되도록은 평소 공부에 더 집중해보는 것도 나쁘진 않겠다.

 

▶ 공부 시 참고 링크들

토큰 저장을 로컬에다가 할까 하다가 문득 보안 문제가 생각나서 찾아본 사이트

 

https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie

JWT는 어디에 저장해야할까? - localStorage vs cookie