부록. React 에서 stylesheets embedded 시키기 ( 그리고 webpack 조금.. ㅋㅋ )

쩝... 너무 별거 아닌 팁이긴 한데... 일단 공유해 봅니다 ㅎㅎ

그리고 react 를 쓴다면 webpack 을 쓴다는걸 당연하게(?) 가정하고 글을 씁니다.

webpack 은 Module bundler 로도 많이 알려져 있지만, 요새는 Gulp, Grunt 와 같은 task runner 들에서 하는 갖가지 일을 대신해 줍니다. 그러면서 react 를 할때는 굳이 Gulp 나 Grunt 를 쓰는 시대는 지났죠! Webpack 이 짱먹었으니까요 하하!!

webpack 소개 에 대한 자세한 글은 아래 링크를 참조해 주세요.

https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.eefnwbwh3

그리고 webpack 도 버전 2가 나왔어요!

https://webpack.github.io/

근데 이렇게 다른글에 모든 책임을 넘겨버리는건 너무 무책임하기도 하고... ㅋㅋ

저렇게 써놓으면 잘 안읽더라구요 ㅠㅠ ...

그리고 사실 webpack 블로그 글은 저도 다 못읽었어요...

요새 읽을거랑 일이랑 산더미라서... ㅠㅠ

Webpack?? 잠깐만 보고 가실게요!

아래 그림이 정말 기깔나게 그림으로 잘 표현했더라구요 ㅎㅎ

과거의 Task Runner 들은 HTML 관련 작업이면 HTML 관련 작업만, CSS 관련 작업이면 CSS 만, JS 관련 작업이면 JS 만 컨트롤 했어요. 그니까... 예를 들자면 HTML minify task 를 돌리면 minify 된 HTML 파일이 떨궈지고, JS 파일 minify, bundle 작업을 하면 여러 JS 파일들 minify 및 bundle 해서 한파일로 떨궈주고 ㅎㅎ CSS 도 less 나 sass 같은 파일들 precompile 하고 minify 및 bundle 해서 css 파일로 떨구주고... 무슨 말인지 이해 되셨나요? ㅎㅎ 잘 이해가 안되면 아래 그림을 보면서 같이 이해해 볼게요! ㅎㅎ

이제는 HTML 이고 CSS 고 뭐건 간에 다 묶여서 한방에 나올수 있습니다. 왜냐하면 Module Bundler 니까요? 코드로 한번 보실까요? ㅎㅎ 

대표적으로 리액트가 참 이걸 잘 쓰고 있는데요. React 컴포넌트 코드 입니다.

보시면 App.css 가 import 되어 있죠?? 이렇게 embbeded 시켜놓고 아래서 styles 처럼 변수로 사용할 수가 있습니다.

 물론 style from 을 빼고 "import './App.css'" 라고 하면 해당 css 가 HTML 에 아예 쏙 하고 들어옵니다. 만약 App.css 에 아래와 같이 적으면

...
body { background-color:blue; }
...

 이러면 난리나겠죠?? 갑자기 HTML body 배경 색이 모두 파랑이 될테니... +_+ 근데 이것만 설명하려는건 아니구... ㅋㅋ 

style loader 가 참 좋은데요 ㅋㅋ

자! 우리가 보통 스타일이 들어간 어떤 npm 을 하나 설치해서 쓴다고 합시다 ㅎㅎ

전 icheck 좋아하니까 이거 해볼게요.

$ npm install icheck --save

근데 이게 문제가 style 도 가지고 있어요 ㅋㅋ 그래서 css 도 import 시킵니다.

...
import {Checkbox, Radio, RadioGroup} from 'react-icheck';
import '../../../../../../node_modules/icheck/skins/minimal/blue.css';
...
class SampleContainer extends Component {
    ...
    render() {
        ....
        return (
            

                        

                                
                                
                                
                        
                       
                
            
        );
    }
}

이렇게 하고 실행시키면 브라우저 콘솔창에 아래와 같은 메시지가 떠요 ㅠㅠ

이게 왜 그런지 살펴보면 

blue.css

.icheckbox_minimal-blue,
.iradio_minimal-blue {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(blue.png) no-repeat;
    border: none;
    cursor: pointer;
}

url(blue.png) 요부분 때문에 그래요 ㅎㅎ blue.png 를 못찾거든요~ 그래서 style 로더를 넣어줘야 합니다. css 를 import 하는 부분에 아래와 같이 합니다. 그리고 webpack config 파일도 수정해 주면 됩니다. ㅎㅎ less 나 sass 도 style loader 만 잘 붙이면 그냥 파일처럼 쓸 수 있어요 ㅎㅎ

...
import '!style!css!resolve-url!../../../../../node_modules/icheck/skins/minimal/blue.css';
...

webpack.js

...
module : {
  loaders: [
    ...
    { test: /\.css$/, loaders: ['style', 'css?sourceMap', 'resolve-url' ,'postcss']},
    ...
  ]
  ...
}
...

참고 : http://webpack.github.io/docs/stylesheets.html