[팀 프로젝트] 트러블 슈팅

기존에 구현했던 무한스크롤에서 문제가 생겼다
초기에 10개의 데이터를 가져오고 스크롤을 하면 나머지 모든 데이터가 불러와지고 있었다
그래서 스크롤을 할 때 마다 데이터를 10개씩만 가져오도록 수정을 했다

const fetchData = useCallback(async (page : number, languages : string[] = []) => {
	try {
    	const langQuery = languages.length > 0 ? `&languages=${encodeURIComponent(JSON.stringfy(languages))}`
        const url = `/api/proMain?page=${page}${langQuery}`
    	const response = await fetch(url)
        const data = await response.json()
        
        if(data && Array.isArray(data)) {
        	if(page === 0) {
            	setPosts(data)
            	setFilteredPosts(data)
        	} else {
        		setPosts((prevPosts) => [...prevPosts, ...data])
        		setFilteredPosts((prevPosts) => [...prevPosts, ...data])
		} else {
        	console.error('data fetch error')
        }
    } catch (error) {
    	console.error(error)
    }
}, [])

기존의 코드에서 hasMore 라는 상태관리를 추가해서 10개의 데이터만 가져오도록 수정했다

  const fetchData = useCallback(async (page: number, languages: string[] = []) => {
    setLoading(true);
    try {
      const langQuery = languages.length > 0 ? `&languages=${encodeURIComponent(JSON.stringify(languages))}` : '';
      const url = `/api/proMain?page=${page}${langQuery}`;
      const response = await fetch(url);
      const data = await response.json();
  
      if (data && Array.isArray(data)) {
        if (page === 0) {
          setPosts(data);
          setFilteredPosts(data);
        } else {
          setPosts((prevPosts) => [...prevPosts, ...data]);
          setFilteredPosts((prevPosts) => [...prevPosts, ...data]);
        }
        setHasMore(data.length === 10); 
      } else {
        console.error('Data fetch error');
        setHasMore(false);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }, []);

그리고 next.config.mjs 에서도 에러 메세지가 나왔다.
실행하는데 문제가 있던건 아니지만 서버에서 images.remotePatterns 방식을 사용하라고 나왔다

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'url'
      },
      {
        protocol: 'https',
        hostname: 'url'
      }
    ]
  }
};
export default nextConfig;

구글링으로 remotePatterns 세팅하는 방법을 찾아보고 적용시켰더니 에러 메세지가 사라졌다