브라우저 렌더링에 영향을 주는 build 도구란 무엇인가?
보통 많이 들 사용하는 대표적인 빌드도구는 gulp, grunt, webpack등이 있다.
이러한 빌드도구는 업무의 효율성에서도 탁월하게 도움을 준다.
본인은 gulp와 webpack를 모두 조금씩 사용해보고, gulp를 더 자주 사용하고 있다.
이유는 webpack은 webpack2를 넘어 webpack3까지나면서 문법을 사용하는 방식도 달라지도 있기때문에,
설정을 하는데 조금 어려움이 있다.
그러한이유로 gulp를 사용하는것이 더 편하다고 느껴 gulp를 사용하고있다.
앞서 작업에 효율성에 도움을 준다고 하였는데, 대표적인 예시로는 gulp-spritesmith가 있다.
이처럼 자바스크립트 모듈을 사용하여, 스프라이트 이미지를 만들어주는 것이다.
이처럼 빌드도구는 필요한 모듈을 사용하여, 설정을 하고 작업에 효율성을 주는 도구이다.
빌드도구를 사용하는 방법은 이번편에서 언급하지 않겠습니다.
build 도구를 사용하는 이유는 무엇인가?
이렇게 작업을 효율성을 주어, 스프라이트 이미지를 사용하는 이유를 아는가?
전에 1편을 보신분은 마지막쯤에 언급한대로 ‘구조가 복잡하거 길면 렌더링의 영향을 주겠구나..’라는 언급을 기억하실 수 있습니다.
맞습니다! 분명히 영향을 받습니다!
하지만 돔관련해서 문서가 길어서 불필요한부분이라서 렌더링의 영향은 굉장히 이후 언급할 내용에 비하면 미비하다고 할 수 있습니다.
이러한 랜더링 부분에서의 더큰 영향을 주는 것에 대해 이해하려면 네트워크의 동작원리에대해 알아야 합니다.
네트워크의 기초는 기본 http프로토콜을 사용하여 데이터를 주고 받는데,
자세한 부분 http프로토콜 MDN web docs를 통해 살펴보도록 합니다.
문서에서 보면 나와있겠지만, http프로토콜을 이용하여 서버와 클라이언트(사용자)가 데이터를 주고받는데,
가장 많은 리소스가 소비되는 구간은 요청 구간이다.
클라이언트에서 http프로토콜을 이용하여, 서버에 데이터를 요청하면 OSI7계층 모델을 통해
응용계층부터 => 표현계층 => 세션계층 => 전송계층 => 네트워크계층 => 데이터 링크계층 => 물리계층까지
순차적으로 요청을 한다.
그러면 요청에 의한 답변을 역순으로 준비가 되었다고 답변을 올려보내고,
그후에 다시 순차적으로 데이터를 받을 준비가 되었으니 보낸달라는 요청을 보낸후에,
역순으로 데이터를 주고 받는다.
자세한 네트워크 기초에 대한 이야기는 후에 포스팅을 통해 진행하도록 하겠습니다.
이 포스팅의 주제로 돌아와서,
데이터를 클라이언트와 서버에서 주고 받을때 가장 많은 리소스가 소비되는 구간은 요청구간이다.
우리는 지난번에 간단히 1편을 통해 랜더링이 이루어지는 과정에 대해 알아보았습니다.
html문서를 파싱해서 내려가다보면 돔을 구성하고 돔안에 컨텐츠를 파싱할때, 이때 서버에 http프로토콜을 이용하여 내려 받는 것이다.
이 포인트를 기억하면
‘음.. 그럼 컨텐츠가 적으면 적을수록 요청이 적어지니까 렌더링이 더 빨라지겠군.’
이러한 결론이나옵니다.
맞습니다. 우리가 빌드도구를 사용하는 이유는 include 및 live server등의 기능도 있겠지만,
sprite-smith를 이용해 스프라이트 이미지를 만들고,
그리고 여러개로 나뉘어 있는 css, javascript문서를 하나로 합치는 부분이 가장 핵심적인 부분이라고 생각합니다.
물론 대한민국은 전세계적으로 인터넷이 빠르기로 유명합니다. 그러므로 PC에서는 그 영향이 좀 덜할지 모릅니다.
하지만 모바일환경이라면 어떨까요?
모바일에서 와이파이를 사용하면 관계없겠지만,
데이터가 나가는 환경이라면, 말이 달라집니다.
왜냐하면 렌더링이 늦어지면 늦어질수록 데이터는 더 많이 나갈테니까요.
데이터가 많이 들면, 고객이 불편함을 느껴 서비스를 떠날수 있는 환경이 됩니다.
자사서비스를 하는 회사에선 고객이 떠나는 것 만큼 큰 손해는 없습니다.
그렇기때문에 자사서비스를 하는곳에서는 더더욱 렌더링에 신경을 써야합니다.
그럼 우리 front-end개발자라면 앞으로 신경써야하는 렌더링을
빌드도구를 사용하여, 보다 쉽게 작업을 하고, 효율적인 렌더링을 통해 고객을 불편을 줄여줘야하는게 업무가 아닐까요?
이상으로 포스팅을 마치겠습니다.