728x90
반응형
react에서 CSS 폴더를 따로 만들어서 각 컴포넌트에 해당하는 css를 렌더링할 때, CSS 코드를 변환하는 과정은 언제 발생할까?
위와 같은 경우에 CSS 파일들은 아래와 같은 절차를 통해 변환된다.
1. webpack과 같은 모듈 번들러를 통해 빌드 과정을 거친다.
2. 빌드 과정에서 JS 모듈로 변환된다.
3. 최종적으로 브라우저에서 코드가 실행된다.
여기서 webpack은 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다.
webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되기 때문에 별도의 모듈 로더가 필요없고,
HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야하는 번거로움도 사라진다.
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
728x90
반응형
'의문점 해결하기' 카테고리의 다른 글
| [react] 언제 memoization을 해야 할까? (0) | 2023.05.07 |
|---|---|
| [JS] [12, 13, 1, 2]를 sort()한 결과가 sort((a,b) => a-b)한 결과랑 같을까? (2) | 2023.05.01 |
| localStorage.getItem()을 상수로 빼서 사용하면 동작하지 않는 이유 (0) | 2023.04.15 |
| Promise를 사용할 때 .catch로 에러를 처리하는 것이 .then의 두 번째 인자로 에러를 처리하는 것보다 더 효율적인 이유 (0) | 2023.02.07 |
댓글