금년도에 프로젝트를 하면서 가장 역사적(?) 인 사건을 하나 꼽으라면.. (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 이하 브라우저를 대상으로 개발하는 경우가  없겠지만.. 나중을 위해 리마인드.( 다시 볼일 없기를..)

이놈의 IE8 은 제발 없어져야 (.. ) 할 브라우저이다.

웹개발시에 이미지가  base64 encode되어서 들어가는 경우도 사실상 존재하긴한다.

(물론.. 절대경로 형태로 특정 이미지를 load하는게 더 좋은 방법이다. )

금년도 진행했던 프로젝트에서 텍스트 에디터로 summernote 라는 오픈소스를 사용했는데. ( http://summernote.org/  ) 다른 텍스트 에디터에 비해 최신 브라우저 지원이 잘되어있으며, bower  와 같은 도구도 지원하고 ui도 필요한것만 있어서 아주 유용하게 사용했다. (라이센스도 MIT이고.)

다만 이미지 업로드를 붙히는 과정에서. 여력이 안되서. 초기버전에는 summernote에서 지원하는 base64 encode 방식으로 이미지 삽입 기능을 사용했는데.

해당 기능을 사용하면 아래와 같이 HTML에 삽입이 된다.

<img style=”width: 275px;” src=”data:image/jpeg;base64,/9j/…..M0gH//2Q==” data-filename=”3.jpg”>

물론 간단한 이미지를 올리고 표시하는 경우에는 별도의 이미지 업로드 서버가 없이 사용할 수 있어, 상당히 유용한데.

문제는 이 데이터가 증가하면 DB가 감당하기도 어렵고, 조회 할때 너무 많은 데이터를 불러와서 API형태의 웹페이지에서는 그렇게 좋은 방법 같지는 않다.

게다가 여기서 문제가 발생했다.

QA를 통해 IE8에서 해당 이미지가 안보인다고 이슈라이징이 되었는데..

문제는 내 개발 PC 는 IE10이고. 개발자도구로 IE8로 렌더링/브라우저 모드를 변경해도 해당 이슈는 재현되지 않았다.

그래서 여러방면으로 찾아본 결과 아래의 글을 찾기에 이른다.

http://stackoverflow.com/questions/10159500/internet-explorer-and-base64-image-display

즉 IE8 에서는 32KB이상의 base64 encode 이미지를 지원 하지 않는 다는 것이다.

base64이미지를 사용하려면 32KB보다 낮은 이미지를 사용해야 하는데 사실상 안전성을 위해 사용하지 않는 편이 더 좋은것 같다. (급할땐 어쩔수 없지만..)

이후에 해당 기능은 별도의 이미지 서버에 올려서 URL을 리턴받는 방식으로 개발 교체 되었고, 지금은 문제가 발생하지 않는다..(하지만 이미이전에 만들어놓은 데이터가 속을 썪이고.. 있다.. )

만약 base64 인코딩된 이미지로 HTML에 삽입해서 페이지를 개발했는데 IE8에서 이슈가 발생한다면 빨리 이미지업로드 서버구축후 ( 아니면 오픈된 다른것을 사용하던가. ) 해당기능은 교체해야 할 것이다.