크로스 브라우징과 JQuery
Post

크로스 브라우징과 JQuery

#들어가기 이번에 IE8을 지원하는 웹사이트 만들기 프로젝트를 받고 깜짝 놀랐다. 지금까지 들은 강의에서는 JQuery는 이제 필요없다. 바닐라 자바스크립트는 ES6으로 배우면 된다고 했는데, 설마 JQuery를 배우게 될 줄은 몰랐다. 그런데 기존 레거시 코드를 React나 ES6 자바스크립트로 옮길 때 JQuery와 IE8에 대한 지식이 나중에 도움이 될 것이라고 생각했고 프로젝트를 진행하면서 JS, CSS, HTML의 기술은 정말 많이 발전했다고 느꼈다. 간단하게 느낀 점을 정리해보고자 한다.

#JQuery - DOM을 쉽고 간편하게 조작할 수 있는 라이브러리이다. - IE8은 ES5를 지원하지 않아서 잘 사용하는 기능들 중에 안 되는 것이 정말 많은데, JQuery가 그 기능들을 모두 다 해준다. - DOM을 선택해서 값을 수정하는 것을 쉽게 해준다. - $() <- 이렇게 선택하면 끝 - IE8에서 이동 애니메이션을 지원하지 않는데 그것마저 JQuery가 쉽게 지원해준다. - 그래서 그 당시 많이 쓰던 라이브러리였던 것 같다.

#IE8 - 지원하지 않는 것이 정말 많다. - border-radius 지원하지 않았다. - flex 지원하지 않았다. -> 그래서 float를 사용했다. - 미디어 쿼리도 지원하지 않았다 -> 여기는 JS와 JQuery의 도움을 받았다. - 시맨틱 태그도 지원하지 않는다. (접근성은…? ㅠㅠ)

#느낀점

  • IE8를 지원하면서 쉽게 코드를 작성하기 위해서는 JQuery가 최선의 방법이라고 느꼈다.
    • IE8과 크로스 브라우징을 지원하기 위해서 ES5 이전의 자바스크립트를 사용해야 했다. 여기에서는 querySelector도 사용할 수 없고, css로서도 미디어 쿼리를 지원하지 않아서 자바스크립트로 하나 하나 코딩해야 했다. 하지만 JQuery에서는 querySelector를 사용하는 것처럼 $()를 사용해서 스타일을 넣을 수 있고 animate 라고 넣는 것 만으로도 간단하게 스크롤 애니메이션도 간편하게 넣을 수 있었다.
  • JQuery의 기능은 HTML5, CSS3, ES6으로 쉽게 구현할 수 있다.
    • JQuery에서 사용한 모든 기능이 바닐라 자바스크립트와 현재 HTML5, CSS3로 구현 가능한 것이었다. 따라서 현재 많이 이용하는 크롬 브라우저에서는 JQuery를 일부러 사용할 이유가 없다고 느꼈다.
  • module화를 하지 못했을 때 협업이 어렵다.
    • webpack같은 것을 사용할 수 없는 상황이라 JS도 모듈화를 하지 못했고, 특히 html 파일은 모두가 공동으로 작업하면서, 코드가 꼬이는 등의 문제로 불편했다. 또한, 코드를 잘못 수정할 수 있는 위험도 있어서 각 부분을 module로 나눠서 작업하는 것이 협업에서 중요하다고 느꼈다.
  • 시맨틱 태그를 사용할 수 없어서 아쉬웠다.
    • html5에 있는 시맨틱 태그를 IE가 지원하지 않아서 div로 모두 구성해야 하는 점이 아쉬웠다.