컴퓨터공학과를 전공했고 웹개발을 맡은건 아니지만 웹 애플리케이션 개발 프로젝트를 몇번 해오면서 DOM, 리액트와 같은 키워드를 정말 많이 들었다.
모르는 단어들의 정의도 찾아보고 유튜브로 강의도 찾아봤지만 웹이 어떤 원리로 동작하고 프론트-백-DB가 어떻게 연동되는지에 대한 지식이 부족해서 들어도 잘 이해가 가지 않거나 아예 와닿지 않을 때도 있었다.
근데 리액트로 개발을 해보고싶었다. 다들 하니까 유행에 올라타보고싶기도 했고.. 애매하게 알고있는 나에게는 웹개발과 관련된 지식들을 공부하는 것이 오랫동안 미뤄온 숙제처럼 느껴졌다.
웹개발자로 인턴을 하고있는 지금에 와서야 제대로 알아가겠다고 생각했다.
DOM
돔이 document object model 이라는건 알고있었지만 뭘 보고 돔이라고 하는건지 물어보면 대답을 할 수 없었다.
'돔'이란 XML이나 HTMl문서에 접근하기 위한 일종의 인터페이스이다.
문서 내의 모든 요소들을 정의하고 각각의 요소에 접근하는 방법을 제공한다.
js는 이러한 객체 모델을 이용해서 HTML, CSS의 이벤트에 반응을 할 수 있다.
리액트, 뷰가 사랑받는 이유(?) (..제이쿼리에 비해서..)
DOM과 제이쿼리
사용자의 조작에 맞추어 동작하는 인터렉티브 웹을 구현하기 위해서는 DOM조작이 필수적이다.
브라우저에서 돔 조작이 발생할 때마다 배치, 화면표시에 많은 연산이 발생하는데 이것은 조작이 증가할수록 웹브라우저의 성능이 감소한다는 뜻이다.
제이쿼리는 돔을 컴트롤 할 수 있는 편리하고 강력한 방법 중 하나이지만 돔에 직접적으로 접근하는 방식이기 때문에 무분별하게 사용시 심각한 성능의 문제를 야기한다.
가상 돔 사용
제이쿼리가 돔을 컨트롤할 때 야기되는 문제를 해결하기 위해 가상돔을 만들어 실제의 돔과 차이점을 비교하고 변경된 부분만 실제 돔에 적용하는 방식을 선택하기 시작했다. (뷰, 리액트)
화려한 인터렉션을 주고받는 웹페이지를 비교적 뛰어난 성능으로 개발할 수 있다.
가상 돔을 사용하는 라이브러리가 많아질수록 돔을 조작하기 위한 제이쿼리의 필요성이 줄어들고있다.
제이쿼리는 어떻게 대응하고 있을까
자바스크립트는 컴파일 과정 없이 바로 실행이 가능한 스크립트 언어로 크기가 커질수록 전송,파싱, 실행 등에 지연이 발생한다. (성능 감소) 때문에 자바스크립트 라이브러리들은 용량을 줄이기 위한 노력을 하는데
제이쿼리는 경량의 라이브러리로 유명하다. 여기서 한번 더 경량화를 시도하고 있으며 세부내용을 적어보겠다.
-
인터넷익스플로러11 미만 버전 지원 중단
-
시즐의 내재화
제이쿼리가 지금의 위치에 도달하기 까지는 CSS의 선택자 엔진인 시즐(sizzle)의 역할이 컸다. 이전의 개발자들은 엘리먼트를 찾을 때 getElementById 처럼 길고 복잡한 API를 사용할 수 밖에 없었고 복잡한 돔 구조에서는 코드가 난잡해졌다.
시즐의 경우 CSS작성 시 사용하는 선택자와 시즐만의 확장 선택자를 이용하여 복잡한 돔 구조라도 짧은 코드로 엘리먼트를 찾아낼 수 있게 했다.
제이쿼리는 시즐을 포함하여 배포해왔고 제이쿼리가 호평을 받는 중요한 이유가 되었다. 하지만 querySelector API가 인터넷익스플로러8 이후의 모든 브라우저에서 지원되기 시작했고 CSS표준에서 선택자에 대한 지원도 강화되면서 시즐의 필요성은 점차 줄어들었다.
제이쿼리가 속해있는 OpenJS재단은 시즐의 수명이 다했다고 판단하여 명예 프로젝트로 분류했고 점진적으로 시즐만의 확장기능을 제거하고 필수 기능만 지원하는 형태로 수정할 계획이다.
