200712

CSS

• @import : 다른 스타일 시트에서 스타일 규칙을 가져옴

• 사용자 지정 CSS 속성(CSS 변수, 종속 변수)

  • 선언

  element {    --main-bg-color: brown;}

  • 사용

  element {    background-color: var(--main-bg-color);}

하위 호환성 및 프론트엔드 빌드

Can I use... Support tables for HTML5, CSS3, etc

ECMAScript 6 compatibility table

• transpilling을 통해서 하위 브라우저에서도 동작하게 문법을 바꾼다.

• polyfill을 통해서 지원하지 않는 native API를 다른 코드로 동작하게 한다.

• npm init -y : npm init -—yes 로 npm init 시에 나오는 설정에 모두 yes로생략하여 진행함

• --save-dev is used to save the package for development purpose. Example: unit tests, minification..

• --save is used to save the package required for the application to run.

babel

하위 브라우저가 지원가능하도록 transpiling

Webpack

모듈 번들러

JavaScript modules

var path = require('path');
module.exports = {    mode: 'none',    entry: './index.js',    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'dist'),    },    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader'],            },        ],    },};

• mode : development, production, none 모드 중 설정

• entry : 시작점

• output : 결과물

• module : 로더

DOM