리액트를 배우면서 반복문으로 출력된 dom 요소의 경우 `key`를 명시해주어야 하는 것을 알고 있었다. 하지만 지금까지 `key` 를 쓰지 않거나, 대충 사용했을 경우에 대한 문제를 직면해본적이 없어서 그냥 저냥 콘솔에 `key`가 잘못 되었다는 에러를 숨기기 위한 목적 정도로만 사용을 해왔었다. 🚨 토스트 라이브러리 구현하지만 토스트 라이브러리를 직접 만들어보고, 커스텀하는 작업을 진행중에 `key` 를 쓰지 않아 버그가 발생했다. 토스트 라이브러리를 사용해본 사람은 알겠지만 순차적으로 쌓였다가 하나씩 사라지게 된다. 토스트 요소의 시간이나, 메시지, 색상 등이 전부 동일하다면 `key`를 `index`를 주어 사용해도 문제가 생기지 않는다(정확히는 문제가 생겨도 보이지 않는다). 하지만 이번에..
💡 Suspense"`` lets you display a fallback until its children have finished loading.""``를 사용하면 자식이 로딩을 완료할 때 까지 폴백을 표시할 수 있습니다." https://react-ko.dev/reference/react/Suspense 📍 fallback로딩이 완료되지 않은 경우 실제 UI 대신 렌더링할 대체 UI이다. 어떤 React 노드를 사용해도 되지만 주로 로딩 스피너, 혹은 스켈레톤 UI 처럼 가벼운 플레이스홀더 뷰르를 사용한다. 즉, Suspense는 `children` 이 중단되면 자동으로 `fallback` 으로 전환되고, 데이터가 준비되면 다시 `children` 으로 전환된다. 💡 useQuery vs us..
`img`태그에는 alt 속성이 있다. 나는 페이지의 디테일(사용자 경험)의 문제만이라고 생각했고, 크게 중요한 속성이라고 생각하지 않았다. 하지만 `SEO`까지도 영향을 줄 수 있다는 걸 알게되어서 습관을 잘 갖춰야 되겠다고 생각이 들었고, 간단하게 정리할 겸 글을 작성함 💡 SEO (검색 엔진 최적화)SEO란 정말 간단하게 구글 같은 검색 엔진에 친화적으로 사이트를 제작하는 것을 의미한다. 그럼 어떻게 최적화를 할까? 가장 쉽고 바로 적용할 수 있는 방법이 바로 메타데이터(title, description 등), 시맨틱 태그 그리고 img의 alt 속성 같은 것들을 목적에 맞게 명확하게 작성하는 것이다. 웹 크롤러가 돌아다니면서 페이지의 정보(메타데이터)를 수집하는데 그 때 해당 정보 같은 것 들..