개선사항: 웹에서 연도에 5자리를 입력하는 등의 먼 미래 날짜를 지정하는 경우
테스트하는 프로젝트에서는 input type="date"를 내가 구현하지 않았었는데,
최근에 날짜 범위를 지정해 데이터 시각화를 구현하며 다뤄본 적이 있어 나름 수월하게 수정했다.
개선사항: 금액 입력 시 소수점 입력 제한
input type="number"에 소수점 제한을 아무리 찾아봐도 기본값이라고 하는데 이상하게 소수점이 너무나도 잘 입력이 된다.
step이라는 프로퍼티도 배웠지만, input의 화살표를 사용할 때는 유용하지만 소수점 제한이 되지는 않는다.
결국 오랜만에 정규표현식 사용.
/\d{0,8}/ 이렇게 사용했는데, 소수점 기준 앞뒤로 모두 매치가 되어 소용이 없었다./^\d{0,8}$/개선사항: 닉네임에 공백만 있는 경우 제한
글자수만 생각해서 생각을 미처 못했는데, 글자수에 맞게 공백을 넣는 경우도 유효성 검사를 통과해버렸다.!
trim() 후 length를 사용하여 유효성 검사를 해주었다.useRef()를 연결해 focus() 해주면 UX가 개선된다!개선사항: A페이지에서 데이터를 변경시키는 경우 해당 데이터를 갖고 있는 다른 쿼리가 캐싱되어 있어 B페이지에서 오래된 데이터를 표시하게 됨
이 부분은 리액트 쿼리를 사용하며 오랫동안 고민한 부분이라 나름 깊은 고민 없이 처리해 주었다.
(같은 데이터를 공유하는 다른 쿼리라는 조건 하에) refetch와 invalidate 선택에서 내가 고려하는 사항은 같은 페이지에서 사용되는지, 다른 페이지에서 사용되는지이다.
A 페이지에서 여러 번 데이터를 변경하는 동안 B 페이지로 이동하지 않는다면 굳이 refetch할 필요가 없다!
invalidate하면 B 페이지로 이동했을 때 한번만 fetch 되기 때문에.
하지만 같은 페이지에서 사용된다면 항상 최신의 데이터를 보여줘야 하므로 refetch가 맞다.
invalidate로 처리