<aside> 📎

</aside>

빌드타임? 런타임?

1. 빌드타임

• 브라우저 렌더링 이전 단계
• 소스코드가 브라우저에서 실행 가능한 형태로 변하는 과정
• Babel 을 통해 트랜스파일링
  • 왜? 모든 브라우저가 최신 js 기능을 지원하지 않음. es6+ 문법을 지원하지 않는 경우도 있음,
  • 그래서

2. 런타임

• 브라우저에서 실제 코드가 실행되는 시점

• HTML 파싱, DOM 트리 구성, CSSOM 생성, 렌더트리구축, 레이아웃, 페인팅 작업

• Utility-first (tailwind css) : 빌드 타임에 미리 정의된 클래스 사용으로 런타임 오버헤드 없음

• CSS-in-JS (style, emotion): 런타임에 스타일 객체 파싱 및 DOM 주입으로 초기 렌더링 지연

• Zero-runtime CSS-in-JS (panda css): 빌드타임에 CSS 추출하여 런타임 오버헤드 감소

css 스타일링 종류

1. CSS

• 단점
  • 전역 스코프
    • CSS의 속성은 어디서든 선언 가능함. 스코프가 분리되어있지 않음
    • 이를 위해 css 선택자를 더 상세하고 겹치지 않게 짜야함
• 이러한 네이밍 문제를 해결하기 위해, SCSS, BEM 방법론이 도입됨

  • SCSS

    • 대표적으로 중첩기능 제공

    .btn {
      background-color: $primary-color;
      &:hover {
        background-color: darken($primary-color, 10%);
      }
    }
    

  • BEM

    • css 네이밍을 결정하는 방법론
    • https://nykim.work/15

2. CSS-Modules

• SCSS, BEM은 네이밍 복잡성을 위해 나온 방법임.