[JS] href 표현식 <a href=“javascript:;”> </a>

자주 사용하던 사이트의 버튼이 작동하지 않아서 dev tool을 켜보았다.

 

3개의 a 태그가 있고 위에 부터 순서대로 이전버튼, 바로 배포하기 버튼, 바로 저장하기 버튼이다.

이전 버튼은 잘 작동하는데, 바로 배포하기와 바로 저장하기 버튼이 작동하지 않았다.

 

코드를 보니 자바스크립트 함수가 a href 의 형식으로 지정이 되어 있었다.

버튼을 통해 다른 페이지로 이동하는 경우, 나는 주로 onclick을 통해 이벤트를 걸어놓는 형식으로 작업을 했었다.

그래서 처음보는 형식이라 어떤 방법인지 찾아보았다.

 

📌 href 표현식 <a href=“javascript:;”> </a>

http://daplus.net/javascript-href-%ED%91%9C%ED%98%84%EC%8B%9D-a-hrefjavascript-a%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%84%ED%95%A9%EB%8B%88%EA%B9%8C/

onclick을 줄여서 코딩하는 방법인듯 하다.

 

내가 생각했던 문제의 원인

위에 코드를 보면, 잘 작동하는 '이전' 버튼에 대한 코드에서는 href='javascript: 뒤에 함수 이름이 적혀있다. 

하지만 작동이 되지 않았던 두 버튼에 대한 코드를 보면, href='javascript:;'로 코드가 끝나는 것을 확인할 수 있었다. 그래서 들었던 생각은 코드 정리하면서 함수 적는 것을 깜박했나? 였다.

 

또한, 버튼 클릭시 콘솔 창에 위와 같은 에러가 뜨는 것을 볼 수 있었다. 

구글에 검색해보면, axios를 import 할 때의 실수인 듯 하다. (Axios를 import 할때는 {}를 넣지 않아야 한다고 한다)

그런데 지금까지 잘 돌아가던 사이트가 왜 갑자기 코드가 이렇게 에러가 날까? 궁금해서 html 파일을 쭉 한 번 읽어봤다. html 파일 안에 굉장히 많은 script 태그가 들어있었다. 즉 js 파일을 따로 분리해두지 않고 한 파일에 모두 작성해둔 것 같았다. (왜 그렇게 했을까 싶긴 하다. 작은 사이트도 아닌데 흠.. 내가 잘못 파악한 것일수도 있긴 하다.) \

 

코드를 보던 중 발견한 주석...

아마도 내가 추측했던 것이 맞는 것 같다. js 파일로 코드를 옮기던 중에 에러가 발생한 듯 하다.

 

맥으로 열어보기

근데 좀 의아했던 점은... 맥으로 접속하니 작동을 했다. (나는 윈도우)

그래서 dev tool을 몰래 열어봤는데, 코드는 똑같았다. (똑같이 'a href='javascript:;')로 비어있었다는 말)

그래서 내가 지금까지 혼자 추측했던 것이 아무 쓸모가 없어졌다. 

좀 미스터리 하다. 왜 오류난 건지 진짜 궁금하다. 

담주에 고쳐지면 다시 코드 살펴봐야겠다.