티스토리 댓글창 안열림 window.open is not a function 문제 해결

오랜만에 블로그 댓글이 달려서 몇 분한테 댓글을 달려고 했더니 댓글이 달리지 않는 이상한 문제가 발생했습니다.

F12로 개발자 도구를 열어서 디버깅을 해보니깐 

 

window.open is not a function

위와 같은 문제가 생기더라구요? 티스토리에서는 블로그 관리에 필요한 대부분의 자바스크립트 코드를 알게 모르게 common.js 라는 파일에 둬서 티스토리 기반의 블로그에 삽입 시켜 자동 로딩 시키는 듯 한데요.

 

솔직히 굉장히 당황했습니다. 이번에 바꾼 스킨 문제인가? 티스토리에서 뭔가 바뀌어서 버그가 생긴건가 하고 스킨 판매자님 홈페이지에 가서 댓글을 작성했는데 거기선 또 잘되더라구요.

 

일단 문제에 대해 조금 더 자세히 알아보자면

 

댓글창에서 수정, 삭제 또는 답글 버튼을 누르면 아무것도 동작하지 않고 스크롤이 위로 올라갑니다.

 

아마 a tag에 href URL 속성에 # 값 (빈 URL)을 걸어서 클릭 효과는 낼 수 있게 하고 onclick 이벤트를 실행 시켜서 수정, 삭제, 답글에 관한 창을 여는 자바스크립트 코드를 실행시키는 건데 그 자바스크립트 코드가 제대로 실행되지 않아서 수정, 삭제, 답글이 열리지 않는 거 같습니다.

 

위에 답글 버튼 및 수정 삭제 버튼에 HTML 코드를 분석해보니 역시 href 값에 #가 들어가 있고 onclick 이벤트 리스너에 deletecomment, commentcomment 라는 함수를 실행시키게 되어 있네요.

 

개발자 도구를 띄어 놓고 콘솔 창에 가서 수정, 삭제 버튼을 누르니 [**Uncaught TypeError: window.open is not a function**] 라는 오류가 발생하네요. 

저기 오른쪽에 빨간색 부분에 보시면 알다 싶이 common.js 코드에서 203번째 라인에 문제가 발생하고 있습니다.

 

눌러서 코드쪽으로 따라갑니다.

 

이쪽 부분이 문제의 작동하지 않는 코드네요. 알다 싶이 티스토리에서 댓글 삭제나 수정을 누르면 작은 창이 열리면서 작업을 할 수 있게 해주는데 자바스크립트에서 브라우저 창을 여는 함수(메서드) 가 window 객체의 open 함수인가 봅니다.

근데 왜 open 함수가 작동하지 않는거지..? 몇 시간째 고민하다가 아래 스택 오버 플로우를 읽어보면서 답을 찾게 되었습니다.

 

https://stackoverflow.com/questions/15019992/typeerror-window-open-is-not-a-function

TypeError: window.open is not a function

여기서 2가지 정도 답변만 읽어봐도 답이 나오는데요.

 

자바스크립트에서 open = true; 나 var open = true 와 같이 open 이란 이름으로 전역 변수를 등록하면 open() 이라는 함수는 더 이상 동작하지 않는다고 합니다 ㅡㅡ;; window.open = false; 와 같은 코드도 자바스크립트에선 실제로 동작한다고 합니다. 

 

아니 전역 변수 등록했다고 함수가 망가지게 언어를 설계했다니.. 개인적으로 ES6 이전의 자바스크립트 문법때문에, 저는 기본적으로 자바스크립트를 많이 싫어하는 편인데 이번에도 이런 어이없는 버그를 만났네요.

 

어쨌던 간에 일단은 제가 실수한건 자명 사실이 되었습니다.. 아니 내가 open 이라는 전역 변수를 어디에다가 선언해둔거지? 해서 다시 개발자 도구를 열고 제 블로그 웹 페이지에서 모든 js 에서 open 이라는 변수를 찾아봤습니다.

 

 

특정 웹 사이트에서 로딩 하는 모든 HTML, CSS, JS 코드에서 특정 키워드를 한 번에 검색하고 싶으면 개발자 도구를 띄어 놓은 상태에서 네트워크 탭으로 이동, 새로고침을 해서 일단 웹 페이지 데이터 로딩을 한번 하시고 왼쪽에 보이는 검색 창에 검색을 하면 됩니다.

 

"open =" 이라고 검색하니 제가 전역 변수로 open 이라는 이름을 썼던게 보이네요. 지금은 실수를 알고 주석처리로 해놨는데 저게 사실 티스토리에 더보기 버튼 (접은글 기능) 접은글 펼치기로 바꾸려고 임시 저장해놨던 텍스트인데요.. open 이라는 변수 이름 대신에 open_article 이라고 하니 댓글 작성 기능이 고쳐졌습니다.

 

ㅋㅋ;; 변수 이름때문에 함수가 영향 받는다니.. 진짜 자바스크립트의 철학은 이해할 수 가 없네요.

자바스크립트 혐오 적립이 오늘도 +1 예전에 자바스크립트 대신에 프론트엔드에 파이썬 도입하는 프로젝트도 하는걸로 보이던데 전 항상 적극적으로 지지합니다.

 

물론 타입스크립트.. 는 그래도 인간적인 언어라서 쓰긴 씀. 이것도 결국에 자바스크립트로 컴파일 하는거긴 한데.. 

 

오늘의 결론 : 전역 변수 이름은 open으로 하지 말자. window.open() 이 작동하지 않게 됨