에러 발생
React로 된 페이지를 접근했을 때, 페이지 URL을 GET으로 의도하지 않은 호출이 발생했습니다. 그런데 해당 URL을 GET하는 API가 존재하지 않아서 에러가 발생하고 있었습니다.
원인
아래와 같이 css background 속성에서 문제가 발생하는 것을 발견했습니다.
// index.js
function Page(){
const [data, setData] = useState('');
return (
<div>
<div style={{ background: url(data) }} />
</div>
);
};
JavaScript
복사
확인 해보니 이미지를 불러오기 위해서 GET을 호출하는데 상대 경로를 의미하는 ‘’ 등을 입력하게되면 URL/{data} 로 API를 쏘게 됩니다.
현재는 해당 URL이 존재하기 때문에 에러는 뱉지않고 있지만, 의미없는 호출과 만약 변수가 undefined 등의 존재하지 않는 URL 값이 들어가게 되면
위와 같이 에러를 뱉어낼 수 있습니다.
해결
부득이하게 해당 style을 유지해줘야 한다면, 의미 없는 값이 들어갈 땐 해당 CSS 값이 적용되지 않도록 분기 처리등의 방식으로 적용되지 않도록 해야합니다.