[TIL] 오늘의 개발일지

 

 

프로젝트 기간 특징 : 개발일지 쓰려고 보면 오늘 뭐했더라 갑자기 멍때리게 됌

되게 뭔가 작업을 많이 하고 돌아온거 같은데 나 오늘 뭐했지 하면 멍해진당

 

오늘은 로그인시 페이지가 새로고침 되는 과정에서 유저 정보가 바로 불러오는데까지 걸리는 시간차때문에 발생하는

문제를 잡기 위해서 세션스토리지를 사용해서 유저 정보를 저장하고 해당 정보로 확인하여 변경시키는 로직을 추가했다

 

또.. 댓글 CRUD을 CSR로 바꾸기 위해서 짜놓았던 로직을 전면 수정했다

그리고 처음에 만들땐 몰랐는데, 수정하기를 클릭하면 전체 댓글의 input창이 조 ㅏ라락 같이 열리는 문제가 발생했고

어떻게 할까 지이인짜 오래 고민하다가, 해당하는 Index값과 일치하는 가짜(?)index를 만들어서 일치하는 애만 보이도록 하면 어떨까 하고 로직을 짰다

 

이 부분인데, targetIndex가 방금 말한 짜가 index이고

    {boardComments?.map((item, index) => {
            return (
              <>
                {targetIndex === index ? (
                  <input
                    key={index}
                    type="text"
                    style={{ border: "1px solid black" }}
                    value={editComment}
                    onChange={(e) => {
                      setEditComment(e.target.value);
                    }}
                  />
                ) : (
                  <p>{item.comment}</p>
                )}

수정 버튼을 눌렀을때, 

 <button
                      type="button"
                      style={{ border: "1px solid black" }}
                      onClick={() => {
                        // 댓글 id
                        commentEdit(item.id, index);
                      }}
                    >
                      {targetIsEdit === index ? "완료 " : "수정"}
                    </button>

 

이런식으로 index를 같이 넘겨준 다음에

  const commentEdit = async (id, index) => {
    // id는 해당 게시물의 고유 id
    console.log(id);
    console.log("index:", index);
    // targetIndex와 index가 같아져서 수정input창이 열리고
    setTargetIndex(index);
    // isEdit과 index가 같아져서 '완료'라는 버튼으로 바뀜
    setTargetIsEdit(index);

    const postRef = doc(dbService, "comments", id);

    if (editComment) {
      await updateDoc(postRef, {
        comment: editComment,
      });
      alert("댓글 수정 완료!");
      setTargetIsEdit(!index);
      setTargetIndex(!index);
      getWholeComments();
    }
  };

요렇게 수정완료가 되고나면 index값과 달라지는 식으로 특정 댓글만 수정창이 열리도록 바꿔봤다

난 이게 왜이렇게 헷갈렸을까

저번에 타입스크립트 타임어택할때는 아예 스토어에다가도 값을 변경해줘서(isEdit 이런식으로) 그냥 해당 글의 isEdit만 (예를 들어 true로) 바꿔주면 됐었는데, 이번엔 애초에 db에 "편집중"인 상태가 안들어가있다보니

이렇게 map을 돌려서 뿌려줄때, 특정 글만 수정창이 보이게 하는게 어떻게 구현해야될지 연구하다 최소 2시간은 썼던 것 같다

 

아!!! 그리고 나중에 ㅎㅈ님이랑 테스트를 하다가 발견한 에러 하나 더있었는데

수정을 "완료" 버튼으로 닫아주지 않고 댓글을 삭제하면 input창이 계속 안닫히는 현상을 발견했다

 

저 헛점은 어디서 나오는거지 하고 또 하나하나 뜯어봤는데

원인 : "완료"버튼을 누르지 않으면, 내가 위에 써놓은 저 코드의 setTargetIsEdit 요런 애들이 실행이 안되서, !index를 해주지 못하고 계속 input창이 열리는 현상이 발생한거였다

해결 : 댓글 CRUD를 하고 나면 나오는 (직접 파베에서 댓글 가져오는거) 함수 안에다가 요렇게 index값을 다르게 줘버리는 꼼수를 부렸다

    // 😍새롭게 추가된 부분----------(시작)
    setComment("");
    setTargetIndex("reset");
    setTargetIsEdit("reset");
    setEditComment("");
    // 😍새롭게 추가된 부분----------(끝)

 

오늘은 훈련장려금 들어왔으니까 야식 시켜서 오랜만에 일탈(?)을 해보아야게따 씐나

나에게 주는 보상❤️❤️❤️

먹고 내일 새벽에 두배로 운동해야되네 ❤️ 

 

오늘의 개발일지 끄읕-