22.03.29 항해99 6기 4주 4일차 TIL

Done list

1) 구현

• 과제 요구 사항 보고, 댓글 관련 UI 수정하기(댓글 작성하기 클릭 시 FUNCTION 부터)
• 과제 요구 사항에 맞게, 댓글 UD API 구현(로그인, 사용자 인증 API와 연동해서 댓글 작성자만 수정/삭제 기능 사용)
• 회원가입 Validation 구현(닉네임, 비밀번호 중복 여부, 비밀번호 - confim비밀번호 동일 여부 등)

Trouble shooting

1. 게시글 작성자만 게시글 수정 기능 표출하기.

• 게시글/댓글 목록에서 게시글/댓글을 작성한 사용자만 수정/삭제 버튼이 보이는 기능을 구현해야했다.
• API에서 클라이언트로 데이터는 잘 전송했지만, 클라이언트 쪽에서 게시글/댓글 목록의 각 게시글/댓글 항목마다 현재 로그인한 유저가 작성한 것인지 여부를 파악하도록 하는 로직을 짜는 것이 어려웠다.
• 생각해낸 방법은 다음과 같고, 구현에 성공했다.
  1) SSR 방식이어서, 데이터를 클라이언트에서 직접적으로 호출할 수 없으니, 게시글/댓글 목록에 대한 반복문은 tbody의 tr 태그의 개수를 기준으로 돌리자.(tbody -> tr은 결국 API에서 전달해준 데이터 배열의 길이만큼 생성되기 때문. -1을 한 이유는 thead는 제외하기 위함.)
  2) tr의 property에 userID를 넣어서, 로그인한 유저의 토큰에 담긴 userID와 비교하자!
  3) 두 userID가 동일한 tr만 수정/삭제 버튼을 표출하자.

let currentUserId_DB = response.user._id
    for ( let i =0; i < document.getElementsByTagName('tr').length-1; i++){
      let fixbtnId = $(`#fixbtn${i}`).attr('class').split('`')[1]
      if (currentUserId_DB === fixbtnId){
        $(`#fixbtn${i}`).show()
      }

2. Jquery unrecognized expression 에러

• Jquery를 이용해서 특정 ID값을 가진 태그를 호출하려 했다.
• ID 값은 ABCD(1), ABCD(2) 값이었기 때문에, $(`ABCD(${num})`)으로 작성했다.
• unrecognized 에러가 계속 발생했고, 원인은 '( )'를 Jquery에서 특수문자로 간주했기 때문이었다.
• Jquery를 사용함에 있어서, 특수문자 사용에 주의해야하는 것을 느낄 수 있었다.

To do list

• 배포
• 3~5주차 강의 수강하기