Jaymyong66

  • 홈
  • 태그
  • 방명록

2025/05/16 1

CSS in JS vs CSS in CSS

각각의 장단점과 어떨 때 무엇을 쓰면 좋을까?이전 우테코 프로젝트를 할때는 Emotion CSS를 사용한 바 있고, 해당 기술 사용을 결정할 때 조사했던 부분이 있다.(Github Wiki)그럼에도 CSS in JS의 기술적 기반, 배경에는 뭐가 있는지 명확히 알아보았다. 비슷한 볼륨의 프로젝트는 아니지만, SCSS 기반보다 Emotion CSS 기반 프로젝트가 초기 로딩 속도가 300ms 느린 것을 확인했다.왜 그럴까?각각의 장단점CSS in CSS장점초기 렌더링이 빠르다. CSS는 HTML 파싱 중 병렬로 로드되므로 렌더링을 차단하지 않는다.CSS 정적파일이므로 브라우저 캐싱이 쉽다. (재방문시 속도 빠름)스타일 적용 시점이 CSS 파일 로드 직후이다.따라서 런타임 비용이 없다모든 CSS 파일을 로딩..

프론트엔드 2025.05.16
이전
1
다음
프로필사진

Jaymyong66

https://github.com/JayMyong66

  • 분류 전체보기
    • 프론트엔드
    • 우아한테크코스-6th-FE
      • 트러블슈팅
    • 회고
    • 백엔드
    • CS지식
    • Web3
    • 인프라
    • AI
    • 알고리즘

Tag

팀네이버, cs면접, ai agent, 프론트엔드, react-query, 트러블슈팅, ai_agent, React, CS지식, web3, notgpt, playwright, 티스토리챌린지, 리액트쿼리, 기술면접, 오블완, 자료구조, styleLint, tanstack-qeury, tanstack-query,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 05  
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © JaewiMyong66. All rights reserved.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.