What I Learned Today
tailwind를 들어가기 전에 간단하게 @layer에 대해 배웠다.
@layer는 캐스케이드 레이어를 선언하는 데 사용되며 여러 캐스케이드 레이어가 있을 경우 우선순위를 정의할때 사용한다.
/* 사용 방법 */
@layer 레이어 이름1, 레이어 이름2, ...;
@layer 레이어 이름1 {
CSS 속성
}레이어의 우선순위는 마지막에 나열된 레이어가 우선권을 가진다. (레이어 이름2)
하지만 레이어 밖에 같은 속성을 사용한다면 그 속성이 가장 큰 우선권을 가진다.
public폴더와 src폴더의 차이
- public : 는 변환 없이 그대로 제공되는 파일 (정적 assets)
- 경로 유지 : 빌드 시 파일 이름과 경로가 그대로 유지
- 변환 없음 : 어떠한 처리나 최적화 없이 그대로 제공
- 절대 경로 : 루트에서 시작하는 절대 경로로 참조
- URL 예측 : 파일 URL이 항상 일정하게 유지
- 적합한 유형 파일 : 파비콘, robots.txt, sitemap.xml, 폰트, 큰 이미지, 외부 스크립트, PDF 문서 등
- src : 빌드 과정에서 처리되고 최적화되는 파일 (동적 assets)
- 빌드 처리 : 빌드 과정에서 번들링, 압축, 최적화
- 해시 처리 : 파일명에 컨텐츠 해시가 추가되어 캐싱 문제 해결
- 상대 경로 : 일반적으로 상대 경로로 임포트 (절대 경로 사용 가능)
- 코드 스플리팅 : 필요할 때만 로드되도록 최적화
- 프로젝트 이미지, CSS 파일, SCSS/LESS 파일, Js/Ts 모듈, SVG, JSON 데이터
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
tailwind를 오늘 처음 접해봤는데 생각보다 CSS와 많이 달라서 당황했다.
스타일 속성들을 모두 class에 적는것을 보고 과연 이게 쓸모가 있을까?, 왜 사람들이 많이 사용하는거지?
이렇게 생각했는데 강의를 듣다보니 이유를 알게 되었다.
일단 커스텀이 쉽고 class 이름을 생각하지 않아도 되어서 편했다.
그리고 각종 변수를 이용해 새로운 정의를 할 수 있어서 좋았다.
반응형
