금년도에 프로젝트를 하면서 가장 역사적(?) 인 사건을 하나 꼽으라면.. (angualr,gulp,등등이 있지만..)

IE8 을 대상 브라우저에서 제외 시키기로 결정했다는 점이다.

사실 이 부분은 기존의 프로젝트가 탄생했을때부터 문제가 되었던 부분이며 해당 프로젝트는. IE7 을 지원했고,
IE7 에서 너무 극악으로 성능이 떨어져 어쩔수 없이 (+ 사용자도 없고..) 제외 했지만. IE8 도 만만치 않은 놈이라. 생각보다 너무 많은 고생을 했다.

제외에 대한 근거로는

  1. 사용자가 거의 없음
  2. 성능이 원하는 만큼 안나옴
  3. 개발 리소스가 너무 많이 들어감

이였지만. 한마디로 요약하자면 “IE8에 들어가는 리소스를 다른데 투입하면 완성도를 더 높힐수 있다” 였다.

이러한 근거로 기획팀을 설득했고. 접속자중에 실 사용자가 없다는게 파악되면서 결국에는 IE8을 대상 브라우저에서 제외시키기로 하였다.

결론적으로는 IE8을 제외 하면서 angular.js 도 사용가능하게 되었고. jQuery도 일부 버전 업데이트 가능하게 되었고 얻은게 더 많은것 같다.

다만.. 그동안 IE8 에서 고생했던 부분을 블로그에 짤막히(?) 정리해보고자 한다. 대략적으로 생각나는 이슈는 아래와 같다.

  1. 셀렉터 이슈
    1. pseudo 셀렉터가 잘 먹지 않으며
    2. 멀티 셀렉터도 잘 먹지 않는다.
    3. 즉.. 믿고 쓸수 있는건 id, class
    4. 이건 나중에 정리하자
  2. base64이슈 
    1. base64로 인코딩 된 이미지의 용량 제한이 발생
  3. Hover 이벤트 동작 안함
    1. $().is(“:hover”) 가 IE 78 에서는 동작안함
    2. 정리 예정
  4. change 이벤트 오류 (IE7에서 발생 )
    1. IE7에서는 change 이벤트가 정상동작안함
    2. jQuery에서는 click 이벤트로 fallback
    3. 이것에 대한 side effect 정리.
  5. property와 attribute 의 차이  $().prop을 써야하나?  $().attr()을 써야하나?
    1. 이건 jQuery 공식문서에도 나와있는데 다시 정리 필요
    2. 여기 해당 이슈에 대해 일부 정리 http://blog.kazikai.net/?p=111
  6. localStorage 이슈
    1. localStorage가 지원되지 않아. $.jStorage 를 사용했는데 여기에도 조심해야 할 이슈 있음
  7. window.opener 이슈
    1. window opener 로 창을 열고 데이터를 전달할때
    2. JSON형태의 데이터는 동작을 보장하지 못함
    3. IE 7,8,9, 심지어 10 에서도 자주 나타남
    4. 결국 데이터 전달할때는 JSON.stringify()로 .. 문자열로 변환해야함
    5. 관련 포스팅은 IE8과 9에서 발생하는 javascript memory leak 이슈

이제는 IE8 이하 브라우저를 대상으로 개발하는 경우가  없겠지만.. 나중을 위해 리마인드.( 다시 볼일 없기를..)

자바스크립트 란 언어가 다른 프로그래밍 언어와 다른 이유는 여러가지가 있지만.

기존의 초급자들한테 가장 다가오는것중에 하나는 == 과 === 의 존재이다.

일반적으로 비교연산자 == 은 다른 프로그래밍 언어에서도 자주 쓰이는데. 자바스크립트는 유독 === 이 존재하며

JSHINT, JSLINT, ESLINT 등의 정적 검사도구에서 조차 === 을 권장하고 또는 == 을 안티패턴으로 정의하기도 한다.

== 과 === 의 차이는 그럼 무엇일까?

가장 쉬운 답변은 “===” 은 타입까지 검사한다 ( 스펙 문서에 보면 identically eqaulity 라고 되어있다. ) 라고 할수 있다. 그럼 == 의 로직은 어떻게 동작하는 것일까?

다시 말하면

5 == “5” 가 어떻게 true 가 되는지에 대한 정리를 하고자 한다.

우선  2 개의 값이 서로 다른 타입일 경우에는 타입을 강제로 변환하며,
같은 타입일 경우에는 데이터 타입을 변환 하지 않는다.

즉 숫자와 문자열을 비교할 경우에는 문자열이 숫자로 변환되고 비교 연산이 수행된다.

아래의 예제를 보면 그 사실을 확인 할 수있다.

"0x15" == 21 // true

16진수가 10진수로 변환되며 비교연산이 수행 되는것이다. 즉 문자열->Number()를 사용한것과 같이 수행 됨

Boolean 타입의 경우에는 먼저 숫자로 변환된다음 변환된다.

true 는 1 false 는 0 으로 변환된다.

false == "" //true

위의 예제를 보면 조금더 이해가 쉽다.

그다음  마지막으로 객체의 경우는 다음과 같은 연산을 수행한다.

  1. 해당 객체에 valueOf 메소드가 있다면 valueOf() 호출 비교 연산 수행
    1. valueOf 는 특정 객체의 primitive Value를 리턴하는 함수
  2. valueOf() 메소드가 없다면 toString()을 호출 한후 비교연산 수행

이 연산이 끝난다음  같다면 true로 리턴되는 것이다.

재밌는(?) 예제가 있는데 아래 코드를 보자

var a = {};
a.toString = function(){ 
    return "hello" 
};
var b = "hello";
 
a == b // true;

즉 toString() 메소드가 == 연산에서 호출 되는것을 확인할 수 있다.

이 연산은 + 로 두가지의 값이 더해질테도 이용되는데 + 연산일경우 한쪽이 string이면 다른 한쪽은 강제로 toString()연산후에 값이 만들어진다.

var c = "hello";
var d = {};
d.toString = function(){ 
    return "kazikai"; 
};
c + d // "hellokazikai";

위 코드를 보면 조금 더 이해가 쉽다.

즉 다시 정리하자면

== 는 모든 값을 Number 화 시킨다음 비교

다만  객체의 경우에는 valueOf 메소드를 호출해서 얻은 데이터로 비교 만약에 valueOf 가 없다면 toString()을 호출 하고 비교함