background: url을 유의해서 사용하자

에러 발생

React로 된 페이지를 접근했을 때, 페이지 URL을 GET으로 의도하지 않은 호출이 발생했습니다. 그런데 해당 URL을 GET하는 API가 존재하지 않아서 에러가 발생하고 있었습니다.

---

원인

아래와 같이 css background 속성에서 문제가 발생하는 것을 발견했습니다.

// index.js

function Page(){
	const [data, setData] = useState('');

	return (
		<div>
			<div style={{ background: url(data) }} />
		</div>
	);
};

확인 해보니 이미지를 불러오기 위해서 GET을 호출하는데 상대 경로를 의미하는 ‘’ 등을 입력하게되면 URL/{data} 로 API를 쏘게 됩니다.

현재는 해당 URL이 존재하기 때문에 에러는 뱉지않고 있지만, 의미없는 호출과 만약 변수가 undefined 등의 존재하지 않는 URL 값이 들어가게 되면 에러를 뱉어낼 수 있습니다.

---

해결

부득이하게 해당 style을 유지해줘야 한다면, 의미 없는 값이 들어갈 땐 해당 CSS 값이 적용되지 않도록 분기 처리등의 방식으로 적용되지 않도록 해야합니다.

에러 발생

React로 된 페이지를 접근했을 때, 페이지 URL을 GET으로 의도하지 않은 호출이 발생했습니다. 그런데 해당 URL을 GET하는 API가 존재하지 않아서 에러가 발생하고 있었습니다.

---

원인

아래와 같이 css background 속성에서 문제가 발생하는 것을 발견했습니다.

// index.js

function Page(){
	const [data, setData] = useState('');

	return (
		<div>
			<div style={{ background: url(data) }} />
		</div>
	);
};

확인 해보니 이미지를 불러오기 위해서 GET을 호출하는데 상대 경로를 의미하는 ‘’ 등을 입력하게되면 URL/{data} 로 API를 쏘게 됩니다.

현재는 해당 URL이 존재하기 때문에 에러는 뱉지않고 있지만, 의미없는 호출과 만약 변수가 undefined 등의 존재하지 않는 URL 값이 들어가게 되면

위와 같이 에러를 뱉어낼 수 있습니다.

---

해결

부득이하게 해당 style을 유지해줘야 한다면, 의미 없는 값이 들어갈 땐 해당 CSS 값이 적용되지 않도록 분기 처리등의 방식으로 적용되지 않도록 해야합니다.