흔한 버그 수정하기

글 추가

이렇게 글 2개를 추가하면 id가 같은 일기가 생성된다.

 

-에러

Encountered two children with the same key

이런 버그를 만나면 key가 여러 개 존재한다는 것이다. 테스트해보는 dummy data를 사용할 때 자주 발생한다.

 

-App.js

  const dataId = useRef(6);

dummy data가 5개 있었으니까 초기값을 6을 줘야 에러가 발생하지 않는다.

---

최신순 정렬에서 글 추가하면 정렬 안되는 버그

이건 놀랍게도 오타 때문이었다. TypeScript는 이런 오타를 해결할 수 있다고 한다.

 

-DiaryList.js 

  const [sortType, setSortType] = useState("latest");

latest가 아닌 lastest라고 썼다.

---

글 쓰기에서 미래 날짜로 작성시 안보이는 버그

달의 마지막 날에 글을 작성하면 화면에 뜨지 않는다.

 

하지만 개발자 도구에서 확인해보면 잘나오는 것을 알 수 있다.

 

-Home.js

 const lastDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth() + 1,
        0,
        23,
        59,
        59
      ).getTime();

마지막 날은 그 날의 끝인 23시 59분 59초까지 명시해줘야한다.

---

개인적으로 잡아본 버그

img 태그 alt

img 태그 안에 alt 속성이 반드시 존재해야 한다는 버그나 나서 alt에 아무글이나 넣었더니 해결되었다.

 

수정에서 취소하기 버튼

취소하기 버튼은 negative 속성을 가져서 빨간색 배경으로 해야하는데 negative인 type이 전달되지 않아 default로 나왔다.

 

-DiaryEditor.js

	 <MyButton
              text={"취소하기"}
              type={"negative"}
              onClick={() => navigate(-1)}
            />

따라서 type을 negative로 전달해줬다.