크롬 업데이트(2016.08) 후 스크립트 오류(with 문)

며칠도 안 된 일이다.

멀쩡히 크롬(Google Chrome)으로 잘만 열리던 사내 QA 사이트가

갑자기 열리긴 열리는데 껍데기만 나오고 열리지 않는 것이 아닌가!

(응? 이게 뭔 소리냐고? 좌측 및 상단 메뉴만 나오고 본문이 안 나온다는 얘기...)

무슨 문제가 생긴 것일까, 하고 F12를 눌러서 스크립트 소스를 들여다 봤더니

var d = $$('div'); // == document.getElementById('div')

with (d.style)

{

width = 1;

height = 1;

width = d.parentNode.clientWidth;

height = d.parentNode.clientHeight;

display = 'block';

}

위 빨간 색 부분에서 에러가 발생하고 있는 것이 아닌가!

엥? 잘만 동작하던 스크립트 코드가 왜 오류를???

설마 <div> 태그의 parentNode가 Null인가? 하면서 디버깅을 해봤더니 정말로 "undefined"가 반환됐다.

헉...

그래서 시작된 삽질... Null이 될 수가 없는 것이 Null이 되었으니 삽질을 할 수밖에.

몇 차례의 삽질 끝에 결국 알아낸 것은, parentNode가 Null이 된 것이 문제의 원인이 아니라

with 문을 사용한 것이 문제의 원인이었다.

>> 참조: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with

위 URL에 들어가 보면, ECMAScript 5 strict mode에서 with문이 동작하지 않는다는 경고가 있다.

그래서 사용하지 말 것을 권고하고 있다.

최신 크롬 업데이트 기록에 이런 내용이 없는데 갑자기 적용이 된 것으로 보인다.

(https://en.wikipedia.org/wiki/Google_Chrome_release_history#cite_note-Chrome_52-118)

그래서 with 문을 주석 처리해 봤다.

var d = $$('div'); // == document.getElementById('div')

// with (d.style)

// {

d.style.width = 1;

d.style.height = 1;

if (d.parentNode) d.style.width = d.parentNode.clientWidth;

if (d.parentNode) d.style.height = d.parentNode.clientHeight;

d.style.display = 'block';

// }

정상 동작!

앞으론 Javascript에 with 문을 쓰면 안되겠다.

ps.

며칠 전에는 [Backspace]키로 뒤로 가기가 안되게 막히고

Alt + [왼쪽 화살표]를 입력해야 하는 불편한 업데이트 때문에 짜증이 났었는데...

요즘 크롬이 나날이 사람 귀찮게 한다. 얘들 대체 왜 이러는 걸까?