-
[React 기초] Webpack 설치 및 실행 : 6탄 - CSS Loader 설치하기컴퓨터 알아가기/React 2023. 12. 31. 20:00728x90반응형
지금까지 순조롭게 웹팩 설치에 대한 순서를 같이 공부한 분들은 이해도가 상당히 높아졌을것으로 판단됩니다. 이제는 CSS 파일을 웹팩에서는 어떻게 연결할 수 있을지 알아볼 차례입니다.
이 부분은 코딩앙마의 프론트엔드 개발 과정을 공부하면서 React 웹팩에 적용하면서 확인한 내용입니다.
▒ 웹팩 CSS Loader
1. <head>태그내 <style>태그로 연결 : Inner 방식
이 방식은 하나의 HTML 파일 <head>태그 사이 <style>태그를 생성하는 inner CSS loader방식입니다.
어찌되었던 CSS Loader설치가 필요해 보이네요. 다움과 같이 진행합니다.
① Node에서 설치
상기 설치모듈중 css-loader는 CSS파일을 찾아서 읽어내는 역할을 하고 style-loader는 <head>태그내 <style>태그를 만들어 내는 역할을 합니다.
package.json에 설치가 잘 된 것을 확인할 수 있습니다.
설치가 되었으면 이제 설정을 해야겠지요.
② webpack.config.js 설정
CSS Loader는 module에서 설정합니다. 지난번 Babel설정이 되어 있는 형태로 하면 됩니다.
정규표현식을 통하여 CSS파일을 test하고 loader를 사용(use)한다라는 개념으로 설정합니다. 배열은 뒤에서부터 읽어 오기에
CSS파일을 찾아내는 css-loader사용이 뒤에 있어야 합니다.③ 실행 확인
이제는 간단한 CSS 파일을 만들어 확인해 볼 수 있습니다. src폴더에 만들어야 되는것은 이제 이해 하겠죠?
그런데 이 방식은 <style>태그를 삽입하는 방식으로 dist폴더만 배포하는 원래 취지에는 맞지 않습니다. 별도의 CSS파일을 src폴더에 만들고 배포용 CSS파일을 생성시키는 방식으로 우선 먼저 해보겠습니다.
2. 외부 CSS 파일 연결
일반적으로 외부에서 CSS파일을 연결해서 사용하는 경우가 많기 때문에 이 부분부터 정리를 해 보겠습니다. 이후 예제를 통해서 확인하면서 에러가 있을 경우 수정하는 방식으로 진행하겠습니다.
① 외부 CSS확인 플러그인 설치
역시 노드에서 플러그인 설치가 필요합니다.
② webpack.config.js 설정
일단 require( ) 함수를 사용 플러그인을 선언해야 되겠죠.
플러그인에서 설정 작업을 진행합니다.
상기 그림에서 filename은 최종 dist폴더에서 만들어지는 파일명입니다.
다시 rules로 가서 use를 다음과 같이 바꾸어줍니다.
이는 inner에 삽입하는 style-loader대신 외부에서 가져오는 MiniCssExractPlugin로더를 사용한다는 의미입니다.
entry도 설정이 필요합니다.
src폴더에 gugudan.jsx 파일을 완성해 봅니다.
③ 실행
이제 빌드를 해서 확인해 봅니다.
dist폴더에 gugudan.css 파일이 생성이 되고 index.html 파일을 보면 외부로 CSS파일 링크가 만들어졌습니다.
웹상에서 보여지는 모습은 다음과 같습니다.
작동이 잘 되고 있습니다. 경고가 하나 떠 있군요. client.jsx에서 수정해 주면 완성이 되는 것을 볼 수 있습니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
[React 기초] Webpack 설치 및 실행 : 8탄 - Babel preset-env 환경 설정 (0) 2024.01.11 [React 기초] 구구단게임 웹팩으로 실행하기 (0) 2024.01.10 [React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치 (0) 2023.12.31 [React 기초] Webpack 설치 및 실행 : 4탄 - HTML Plugin 설치 (0) 2023.12.30 [React 기초] Webpack 설치 및 실행 : 3탄 - React Webpack Babel Module 설치 (0) 2023.12.29