21+DAY_멋사 프론트엔드 부트캠프 14기_TIL

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 이름을 생각하지 않아도 되어서 편했다.

그리고 각종 변수를 이용해 새로운 정의를 할 수 있어서 좋았다.