-
apply개발공부/TailwindCss 2023. 12. 13. 18:32
https://hani-develop-history.tistory.com/59
색깔 적용 안됨
최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용
hani-develop-history.tistory.com
오늘의 위의 글에 이어서 프로젝트에서 tailwindcss를 사용하면서 발생했던 문제에 대해 다뤄보고자 한다.
문제 발생
페이지 이동할 때 초기화면에 로딩되는데 오랜 시간이 걸린다.
문제 원인
코드를 깔끔하게 만들기 위해 css 파일을 분리하기로 결정했었다.
그 방법으로 폴더별로 {페이지 이름}.modules.css 파일을 만든 후, apply를 사용해 .tsx에서 import 해서 사용하는 방식으로 진행했었다.
.tsx 파일 .modules.css 파일 껄껄 하지만 이 방식이 성능을 망치는 주범이었다는 사실을 알게 되었다..
docs에서 깔끔해 보이기 위해 @apply를 사용하는 것은 대표적인 안티패턴이라고 한다.
@apply를 쓰는 만큼 css 번들 크기가 증가하는데, 이것은 그만큼 초기화면을 그리는데 시간이 더 필요하다는 것을 의미한다.
그래서 우리 페이지가.. 화면에 그려지는게 느렸던 거 같다.. 그래서 이를 확인 후 개선 완료!
해결 방법
className에 바로 코드를 넣어주었다! ㅎㅎ (modules.css 파일은 삭제!)
개선 후 다른 사람들은 이런 실수 하지 않기를 바라며 오늘은 이만 총총
728x90'개발공부 > TailwindCss' 카테고리의 다른 글
색깔 적용 안됨 (2) 2023.12.12