[웹] 화면 중복 호출 되는 경우 css background : url("")

발단

화면 진입하여 생성된 토큰 값을 서버로 보내 검증하는 작업을 진행하던 중

동일한 기능을 여러 페이지에 삽입하던 중 특정 페이지에서

토큰 값이 일치하지 않다는 오류 로그를 확인하게 되었음.

---

원인

디버깅과 로그를 확인하며 원인을 찾아보던 중 의심이 가는 부분을 확인하였음.

확인한 로그에서는 토큰을 두번 생성하고 있었음.

두 번 생성한 원인은 해당 페이지를 재호출하는 것으로 확인이 되었음.

 

개발자 모드로 화면이 로드되는 과정을 한라인씩 따라가 보았지만

JavaScript 부분에서는 호출되는 부분을 확인할 수 없었음.

페이지 내에 라인 별로 콘솔창에서 확인할 수 있도록 콘솔 로그를 삽입한 결과

특정 라인 이후로 콘솔 로그까지 표출되었다가 다시 처음부터 콘솔 로그가 표출되는 것을 확인하였음.

 

확인된 부분은 CSS style 태그 안에 있었음.

 

<style>
	#select { background: url("") no-reoeat;)
</style>

위 코드를 확인하면 css 문법 중 background 속성의 이미지 경로를 url형태로 불러오는 부분인데

해당 url 속성 내에 값이 비어있었음.

---

조치

해당 부분을 주석 처리하고 해당 페이지를 다시 불러온 결과 정상적으로 페이지를 한 번만 호출하고

토큰 값도 정상적으로 한 번만 생성해서 서버에서도 잘 인증되었음.

이미지를 사용하지 않기 위해 사용한 의도라면 아래 속성을 사용을 권함.

background-image : none;