2022-03-09 피드백

[daehwan2]

• 삭제 버튼시 alert
• 중복이미지 alert반복
• 다중이미지 했을때 다 안나옴.
• UX를 신경쓰자(focus, tab, enter)
• progress bar => alert에 가림.
• alert 보다 트렌디한걸 생각

[daehwan2]

다중이미지 했을때 다 안나옴.

처음에는 다중이미지 중 파일로드가 실패해서 items에 들어가지 못한다고 생각했었는데 확인해보니 로드는 제대로 되었다.

파일 로드가 끝날때마다
setItems((prev) => [...prev, item]);
으로 했었는데 이렇게 하니 load가 거의 동시에 완료될 경우
prev가 제대로 인식이 안되어서 items에 들어가지 못하는 것으로 확인되었다.

✨해결 : 파일 로드가 끝날때마다 임시 배열에 미리 넣고 로드가 전부 끝날시에 setItems를 해준다.

if (i === fileCount - 1) {
   //끝날때
  setItems((prev) => [...prev, ...tempItems]);
}

생각보다 굉장히 많은 시간을 들여서 문제를 확인할 수 있었다. => 리액트의 라이프사이클에 대해 더욱 이해가 필요할것같다.

[daehwan2]

UX를 신경쓰자(focus, tab, enter)

엔터 이벤트발생시 다음으로 포커스주기.

tabindex=-1 을 하면 tab순서에서 제외된다.

[daehwan2]

삭제 버튼시 alert

form 태그안에 button 태그인경우 type="button"을 명시적으로 입력해주지 않으면
type="submit"으로 들어가 버려서 생긴 버그