크로스 브라우징 Cross-browsing 이란? (Pollyfill 폴리필, Babel 바벨, Webpack웹팩)

bbio3o·2021년 2월 13일
0

📌 크로스 브라우징이란?

Croos Browsing이란 적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 즉, 브라우저의 렌더링 엔진이 다른 경우에 인터넷이 이상없이 구현되도록 하는 기술이다. 웹 사이트를 서로 비슷하게 만들어 어떤 환경 에서도 이상없이 작동되게 하는데 그 목적이 있다. 즉, 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 방법을 말한다.

어떤 페이지는 일부 브라우저들에서 다른 브라우저에서 보다 더 좋아 보일 수 있지만, 어떤 브라우저로도 읽을 수 있게 되어야 합니다. 나는 적절한 방법이고 사용할 이유가 충분한 경우에만 브라우저 별 태그를 사용하려고 노력하고, 이미지 맵, 프레임, 자바 등과 같은 일부 브라우저들만이 지원하는 태그를 사용한 것이 이 경우에 해당합니다. 그것들을 지원하지 않는 브라우저들에 대해서는 HTML로 사용할 수 있는 우아한 낮춤을 활용하거나 대안을 제공하는데 최선을 다했습니다.

웹 페이지가 모든 브라우저에서 정확히 100% 똑같이 구현 될 수는 없겠지만, 어떤 브라우저를 방문하든 웹 페이지가 비슷하게 보이고 사용자가 정보의 소외를 느끼지 못하도록 동등한 수준의 정보와 기능을 제공하여야 합니다.


📌 크로스 브라우징을 어떻게 체크할까?

1. Caniuse.com

caniuse.com에서 모던 자바스크립트를 지원하는지 안 하는지 브라우저 별로 체크가 가능합니다.


2. 폴리필

폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다.


3. 바벨 사용하기


바벨은 트랜스파일러(transpiler) 로, 모던 자바스크립 코드를 구 표준을 준수하는 코드를 바꿔줍니다.

바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다. 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줍니다. 이런 과정이 없으면 개발이 끝난 코드를 한데 통합하는 데 어려움이 있을 수 있습니다.


여기서 웹팩(Webpack)이란?


웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 **모듈 번들러(Module Bundler)**입니다.

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

웹 애플리케이션을 구성하는 몇 십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 합니다.

✨ 모듈번들러란?

사실 몇 십년 전만 해도 하나의 파일을 읽는 중에 또 다른 파일에 접근하는 것은 시간이 많이 걸리는 일이었기에 가능하다면 피하는 것이 좋은 일이었습니다. 하지만 지금은 파일을 몇 개를 나누던 거의 차이가 없을 정도로 컴퓨터 성능이 좋아졌습니다.

그래서 웹 어플리케이션에서 가장 느린 부분은 일반적으로 HTTP Request입니다. 파일을 아무리 많이 나누어도 거의 차이가 없는 머신 내에서의 처리와 달리 웹 상에서의 처리는 요청과 응답으로 이루어져 있기 때문에 시간적인 갭이 클 수 있습니다. 만약 요청을 하고 응답을 받는데 이 서버가 미국에 있는 등의 환경에 의해서 2초가 걸린다고 가정을 해보겠습니다. 만약 파일 1개인 프로젝트라면 요청하는데 2초가 걸릴 것이고 5개인 프로젝트는 10초가 걸릴 수 있습니다. 만약 꽤 큰 프로젝트여서 50개 정도의 파일로 이루어졌다면 모든 요청이 끝나는데 100초가 걸릴 수 있습니다.

웹 환경에서는 머신의 성능과 관계 없이 인터넷 속도나 거리 등에 의해서 영향을 받을 수 있는 것입니다. 그러니 가능하면 파일을 나누어서 요청을 받기 보다는 하나로 합쳐서 보내는 것이 현명할 것입니다.

분명 컴퓨터에게는 하나의 파일이든 여러 개의 파일이든 차이 없이 인식을 할 것입니다. 하지만 개발자 입장에서 5000줄 정도의 파일을 작성하고 관리를 해야 한다면 그건 저주와 같을 수 있습니다. 극악의 가독성을 자랑할 것이고 유지 보수는 점점 더 어려워 질 것입니다. 만약 이런 프로젝트를 인수인계 받아야 된다고 가정해 보는 것만으로도 끔찍하네요. 그러니 HTML파일, CSS파일, JS파일 등을 깔끔하게 분리하고 가독성을 위해서 추가로 나누는 것은 꼭 필요합니다. 그렇다면 UX와 퍼포먼스는 포기해야 하는 것일까요?

이런 고민을 해결해 줄 수 있는 것이 번들러입니다. 번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있은 환경을 만들어주는 역할을 합니다. (어떤 면에서는 컴파일러와 닮아 있기도 하지만 이렇게 합쳐진 파일이 실행되는 것은 여전히 스크립트 방식일 것입니다. )

✨ 웹팩의 장점

  • 모듈시스템 제공
  • 다른 module bundler에 비해 성능이 우수
  • Code Split:chunk(코드 혹은 모듈을 묶는 하나의 단위)단위로 의존성 트리를 동기적, 비동기적으로 분할
  • Loader가 존재하여 다른 리소스를 순수 JS로 변환 가능하고, 모든 리소스에 대한 모듈을 구성한다.
    ex)css-loader, style-loader, babel-loader
  • Module bundler의 대부분의 기능을 사용자가 커스터마이징하여 사용할 수 있다.
  • 다양한 플러그인을 제공

출처1 출처2 출처3 출처4 출처5

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글