vite를 사용해서 개발을 할 때, scss가 어떻게 css로 컴파일이 되며 public폴더는 다른 디렉토리와 어떻게 다르게 빌드되는지 알아보자
vite의 scss처리
먼저 scss는 css가 아니므로 css로 컴파일을 하고 빌드를 해야한다.
즉, 바로 index.html에 삽입할 수 없다.
vite를 사용할 경우 어떻게 컴파일이 되는가?
# index.html
…
<body>
<div id=“root”></div>
<script type=“module” src=“/src/main.tsx”></script>
</body># main.tsx
…
import './index.scss'
…이처럼 index.html의 최상단 계층, 진입점인 source가 main.tsx이고, main.tsx에서 scss를 import하면 프로젝트의 전역 스타일 적용 및 컴파일 작업까지 최종적으로 빌드시에 index.html에 삽입된다.
vite가 빌드시점에 scss를 css로 컴파일하고 최종 번들에 포함시킨다.
다른 번들러, webpack을 예로 들면 따로 scss-loader와 같은 것을 설정해줘야한다.
public 디렉토리와 assets디렉토리
이미지, 아이콘 등 여러 리소스를 public 또는 그 외 디렉토리, 주로 assets에 위치시키는데 어떤 차이점이 있는가?
public
vite, webpack같은 번들러가 처리하지않고 그대로 빌드 폴더로 복사, 파일명이 유지되며 해시값이 붙지 않음, 루트경로에서 직접 접근이 가능함.
그럼 언제 사용해야하는가? => STATIC한 파일
Ex) 파비콘, 폰트, robots.txt, mainifest.json, 메타이미지 등
assets
번들러에 포함되어 처리되어 빌드시에 최적화 및 해시값이 붙은 파일명으로 변환.
그럼 언제 사용해야하는가? => DYNAMIC한 파일
Ex) UI 컴포넌트에 사용되는 이미지, 버튼이나 아이콘의 png/svg 배경이미지, 로고이미지, 상품이미지 등
그럼 동영상파일은 어디에 넣어야하는가?
정답 : public 디렉토리
Why?
동영상처럼 대용량 파일은 번들러가 처리하려고할때 빌드시간이 증가함, 또한 동영상은 이미 최적화된 형태로 인코딩이 되어있기때문에 추가 최적화가 불필요하고 비효율적이므로 public 디렉토리가 적합함.
추가) index.scss 정리
@use reset.scss
// 브라우저 간의 일관된 스타일링을 위해 (여기에 var(--font-family) 적용할듯)
@use font.scss // 필요한 경우 외부 폰트 사용
# css변수 생성
:root {
--green-250: #09ab49;
--font-family: ‘font.scss에서 사용하는 font-family이름’ ,-apple-system, BlinkMacSystemFont, helvetica,
'Apple SD Gothic Neo', '나눔고딕', NanumGothic, '맑은 고딕', MalgunGothic, sans-serif;
// 폰트의 적용 우선순위
...
} // 이와 같이 디자인시스템에 기반한 컬러,폰트 등 css변수를 만들수 있고 사용할때는 var(변수이름)
