FRONT-END

favicon같은 정적요소들 지속적을 dist에서 관리하여 나타내기

parcel-plugin-static-files-copy

favicon같은 파일들이 npm으로 만들어지는 dist폴더안에 자동으로 계속 저장될수 있도록 설정을 위해 사용한다.

관리할 폴더를 생성하여 안에 든 파일들은 자동으로 dist안에 저장될수 있도록 설정한다. package.json으로 관리할 폴더 경로를 지정해준다.

POSTCSS 와 AUTOPREFIXER

npm i -D postcss autoprefixer

웹에서 쓸 수 있는 요소에 따라 적용되거나 적용해지 될지 결정해주는것으로

설치후

ESM 즉 자바스크립트 모듈에서는 Import/export를 사용하며

노드js에서는 commonJS를 사용하여 require() / module.exports를 사용한다.

bootstrap npm으로 import설정하기 (이후 import시 via java로 초기화,성능최적화 해야함)

scss :

@import "/node_modules/bootstrap/scss/bootstrap.scss"

js:

import bootstrap from './node_modules/bootstrap/dist/js/bootstrap.bundle'

bootstrap 정해진 요소들 커스텀마이징 하기

bootstrap등 성능최적화 옵티마이징하기

bootstrap처럼 모든 요소가 들어가있는것을 import하면 무거워지므로 dropdown같은 사용할요소만 지정하여 import한다. 하지만 bootstrap은 popper을 외부에서 가져와 사용하므로 bootstrap을 통째로 import하면 문제가 없지만 사용할 요소만 import하면 popper가 설치되지 않아 오류가 발생하니 popperjs를 일반의존성@으로 설치한다.

bootstrap의 각 요소들은 js/dist안에있다.

npm i @popperjs/core

scss 재활용

선언 @mixin 값{

@content // 추가적인값 

} 

사용 @include 값

scss for문 활용

scss 색상내장함수

rgba(색상,투명도)

mix(색상1,색상2) //색상1,색상2 섞기

lighten(색상,밝기)

darken(색상,어둡기)

saturate(색상,채도)

desaturate(색상,채도감소도)

grayscale(색상) //회색화

invert(색상) //반전