TIL - 20.01.09

noyo0123·2020년 1월 9일
0

require

정확히 알고 있었는지..
https://nodejs.org/en/knowledge/getting-started/what-is-require/

Bulma

프로젝트를 셋할때 프론트엔드를 Vue.js 지만 Non SPA로 구성,
CSS 라이브러리를 Bulma, Buefy 라는 UI Component 라이브러리를 사용하게 되었습니다.

그러면 먼저 Bulma를 커스터마이징 할 수 있어야 합니다.
node-sass
sass cli
webpack
이렇게 세 가지 방법으로 나눠져있습니다.

  • node-sass, sass cli

node-sass, bulma를 설치하고
bulma.sass를 import할 sass 파일을 하나 만듭니다.

mystyles.scss라고 bulma의 sass를 import 해서
bulma를 wrapping한 mystyles.sass를 만들어서 사용합니다.

node-sass로 sass를 css로 트랜스파일합니다.

그리고 html에 css link해서 사용합니다.

node-sass :
브라우저는 sass의 문법을 모르기 때문에 .sass파일을 .css파일로 트랜스파일링해야합니다.
따라서 sass 환경 설치가 필요합니다.

레퍼런스 : Sass의 소개, 설치와 간단한 명령어 사용법 - PoiemaWeb

  • webpack

웹팩도 bulma sass를 wrapping 하는건 마찬가지에요.
다만 webpack도 sass,css를 이해하지 못하기 때문에 sass-loader, css-loader가 필요하니까요.
webpack loader에 작업을 해줍니다. 이 작업은 아래 링크에서 자세히 나와있습니다.

https://bulma.io/documentation/customize/with-webpack/

웹팩 소스맵

소스맵.. 많이 보긴 했는데 이게 뭔지는 모르고 사용해왔음.

배포용으로 빌드한 파일과 원본 파일을 서로 연결해주는 기능입니다.
서버에 배포할때는 성능 최적화를 위해 html,css,js등 웹 리소스들을 압축합니다.
압축하여 배포한 파일에서 에러가 발생하면 어떻게 디버깅하죠..

캡틴판교..
웹팩도 정리해둠 ㅠㅠ
웹팩 레퍼런스
https://joshua1988.github.io/webpack-guide/guide.html

https://jusungpark.tistory.com/52

소스맵에 더 자세한 설명
https://subicura.com/2018/02/14/javascript-debugging.html

profile
자바스크립트를 주언어로 개발을 배우고 있습니다. 서로 아는 것들을 공유해요~

0개의 댓글