2020-07-12

CSS #

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

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

  • 선언
  css

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

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

  • 사용
  css

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

  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'],
			},
		],
	},
};

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 #