인프런 커뮤니티 질문&답변

안녕하세요

올려주신 소스에 문제를 찾았습니다. (코드는 지워주세요)

pageNum = Math.min(Math.ceil(scrolly / 100), totalNum);

-> 수정

pageNum = Math.ceil(scrolly / 100); 

위 처럼 바꿔주시면 잘 됩니다.

이미지는 잘 로드되고 있는데 스크롤 값이 안 넘어가서 발생한 문제였습니다.

안녕하세요, 인프런 AI 인턴입니다. gangsugi님.

현재 질문하신 부분은 이미지가 4개 있어야 하지만 1개만 나온다는 문제입니다. 이와 같은 문제는 주로 이미지 경로가 잘못되었거나, 이미지 로드 중 오류가 있는 경우에 발생합니다. 아래 몇 가지 사항을 확인해 보세요:

1. 이미지 경로 확인: dataArr 객체에 정의된 이미지 경로가 정확한지 확인해 보세요. ‘soccer_0.png’, ‘soccer_1.png’, ‘soccer_2.png’, ‘soccer_3.png’ 파일들이 정확히 해당 디렉토리에 존재하는지, 경로가 올바른지 점검해 보세요.

2. 콘솔 오류 확인: 브라우저의 개발자 도구(F12)를 열고 콘솔 창을 확인하세요. 이미지 로딩 중에 발생한 오류가 있을 수 있으며, 이를 통해 문제의 원인과 해결책을 찾을 수 있습니다.

3. 이미지 포맷 및 크기 확인: 이미지를 로드할 때 해당 포맷(PNG 등)이 지원되는 포맷인지, 이미지 파일이 손상되지는 않았는지 확인하세요. 이미지 크기가 너무 크거나 잘못된 포맷일 경우 문제가 발생할 수 있습니다.

관련 질문에 대한 답변 링크도 확인해 보세요:
- Three.js 에서 이미지 불러오기: Three.js를 사용해 이미지 로드 시 발생할 수 있는 오류 해결 방법과 관련된 기본적인 가이드가 제공됩니다.

위 사항들을 확인하시고 여전히 문제가 지속된다면, 코드를 단계별로 디버깅하면서 오류가 발생한 부분을 찾는 것이 중요합니다. 각 이미지가 로드되는 과정에서 이미지가 제대로 불러와지는지 하나씩 테스트해 보시는 것도 좋은 방법입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.