블로그 이미지

Gicomong (Lux)

  • 분류 전체보기
    • 개발 기술
      • 사소하지만 놓치기 쉬운 개발 지식
      • css 애니메이션 (with js)
      • 개발 이야기
      • jest로 테스트하자
      • 함수형 프로그래밍
      • 타입스크립트
    • 사용자의 접근성 높이는 방법
      • W3C 기준
    • 조직 문화
    • 이번엔 이 공부 끝내겠다 시리즈
      • 테스트코드
      • github actions
      • 정규표현식
    • 라이브러리 파헤치기
    • error log
    • 주저리
Visits

Mong dev blog

  • 관리
  • 글쓰기
  • 방명록
  • 로그인
  • 로그아웃

프론트엔드 성능1

Tailwind 없이, PostCSS+PurgeCSS로 유틸리티 클래스 구축하기
0. 들어가며…올해 사이드 프로젝트를 진행하며 자연스럽게 TailwindCSS의 유틸리티 클래스 방식을 자주 접하게 되었다.Tailwind를 쓰면서 특히 마음에 들었던 점은, 마진(margin)이나 패딩(padding)처럼 반복되는 스타일을 단일 클래스 호출만으로 해결할 수 있다는 점이었다.덕분에 각 .tsx 파일 안에서 바로 스타일을 정의·수정할 수 있었고, 코드베이스가 한결 깔끔해졌으며 유지보수도 쉬워졌다.그래서 다른 프로젝트에도 TailwindCSS를 적용하면 어떨지 고민했으나, 해당 프로젝트와 전역 CSS와 비교해 보니, Tailwind가 제공하는 방대한 클래스 중 일부만 사용할 수 있었다.게다가 기존 전역 CSS를 전부 Tailwind 방식으로 바꾸려면 작업 규모 대비 리스크가 컸다. 그럼, 어..
2025. 5. 26.
이전 1 다음

티스토리툴바