자바스크립트 프레임워크의 동작 원리, CSS 개발의 Preprocessor 및 Framework

자바스크립트의 동작 원리

• 수많은 자바 스크립트의 라이브러리를 종합해서 제공하는 프레임워크는 수많개의 자바스크립트 파일을 가지고 있다.
• 한 자바스크립트 프레임워크 내 다양한 기능을 제공하는 자바스크립트들이 있다보니 많은 파일이 존재한다.
• 유저가 웹 브라우저에서 웹 페이지를 보기 위해 오만개의 자바스크립트의 파일을 다운로드하면 컴퓨터가 터질 가능성이 높아진다.

  그러므로 하나의 웹 페이지를 보여줄 때 다양하고 번들러를 통해 다수의 JS 라이브러리 파일들을 하나의 JS파일로 압축하는 번들링 작업이 필요하다.

트랜스파일러/컴파일러

• 특정 버전의 자바는 특정 버전의 JVM에서 동작되는 JAVA와 달리
  특정 버전의 자바스크립트는 다양한 ES버전의 웹 브라우저에서 동작되기 때문에 JS버전 호환성 문제가 발생할 수 있다.
• 다양한 버전의 웹 브라우저에서 모두 동작되게 하려면 최소 버전을 지원하면 된다.

그러므로 고버전의 ES에서 저버전의 ES로 버전으로 변환하는 과정을 Babel 트랜스파일러를 통해 변환한다.

CSS 개발의 Preprocessor 및 Framework

• CSS 개발을 쉽게 도와주기 위해서 CSS Preprocessor와 Framework를 사용한다.
• CSS Preprocessor는 Bundler + TransPier를 합친 것이다.

CSS Preprocessor는 다양하고 편리한 CSS 확장 문법을 제공해주고, 번들링을 통해 파일 개수를 줄여주는 기능을 한다.

• 유명한 CSS Preprocessor 중 SASS 의 예를 들면 트랜스파일링 + 번들링을 통해 최종 CSS 로 변환된다.

CSS Preprocessor / CSS Framework / UI Framework 구별하기

• CSS Preprocessor : SASS, SCSS
  • CSS 활용을 위한 확장 문법들을 제공한다.
• CSS Framework : Tailwind CSS (유틸리티 클래스 기반)
  • CSS 활용을 위한 방법론 및 디자인 시스템 제공을 제공한다.
• UI Framework : Tailwind, Material UI, Chakra UI, Shadcn/ui
  • 디자인 시스템 제공 및 UI 컴포넌트 제공을 제공한다.
    • 이에 따라 UI 컴포넌트를 직접 HTML 태그를 확장하여 만들지 않아도 되고
    • 간단하게 디자인 시스템을 구축하여 일관된 Look & Feel 제공 가능

정리

• JS를 통해 DOM 조작을 풍부하게 하기 위해서는 → Javascript Framework (번들링 + 컴파일/트랜스파일 + 렌더링)
  • Javascript Framework = Rendering System
• CSS 설정을 풍부하게 하기 위해서는 → CSS Preprocessor (번들링 + 트랜스파일)