-
map으로 이상하게 찾던것을 array.find로 대체
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find -
img태그에 alt 추가
https://velog.io/@suhyeon0111/React-img-%ED%83%9C%EA%B7%B8%EC%97%94-alt%EB%A5%BC-%EB%B6%99%EC%9D%B4%EC%9E%90 -
img 태그 not found 되는 것 랜덤 이미지로 대체하기
에러 이미지 주소에는 특정문자열이 포함되어 있었으므로
String.includes를 사용해서 true일때는 랜덤 이미지 제공 url에서 받아올수 있도록 함
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/includes -
a link 에 target="_blank" 으로 넣어줬기 때문에 발생하는 에러 (보안상의) 수정
rel ="referrer"
사실 rel= "noopener" 이 더 적합한게 아닌가싶은데..referrer만 수정가능하다고 터미널에서 가이드 해주고 있어서 우선수정함.
웹 브라우저를 위한 속성도 있습니다. noreferrer를 사용하면 링크를 클릭했을 때 HTTP 리퍼러 헤더(referer header)를 넘기지 않을 수 있습니다. 출처
- 무한 스크롤 구현하려다가 실패함. 페이지 개념을 넣어줘야하는 부분을 정확히 이해하지 못했는데..구현할 시간이 없다는 핑계를 대보았다. 사실 제공받은 api에서 애초에 받아오는 데이터가 40개로 한정이 되어있어서, 이럴때 무한스크롤을 구현해보려면 40개를 반복적으로 보여주도록 하면되는지, 구현할수 있는지 궁금함.
https://hye-on-astrogrammer.tistory.com/21
https://juni-official.tistory.com/226
무한스크롤 다양한 글을 참고해서 스크롤 자체는 구현했는데, 생각지 못한 문제가 생겼다.
const [loading, setLoading] = useState(true);
const [characters, setCharacters] = useState([]);
const target = useRef(null);
const [scrollLoading, setScrollLoading] = useState(false);
const page = useRef(1);
const getCharacters = async () => {
setScrollLoading(true);
const json = await (await fetch(URL)).json();
setCharacters(json.data.results);
setLoading(false);
setCharacters((prev) => [...prev, ...json.data.results]);
setScrollLoading(false);
};
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
// entry가 interscting 중이 아니라면 함수를 실행하지 않음
if (scrollLoading) return;
// 현재 page가 불러오는 중임을 나타내는 flag를 통해 불러오는 중이면 함수를 실행하지 않음
page.current += 1;
getCharacters();
});
});
observer.observe(target.current);
}, [scrollLoading]);바로 같은 데이터를 반복적으로 li에 집어넣기때문에 list 의 key 값이 동일해져 버린다는 것 ..
일단 보류
