Webpack 프로젝트 생성 웹팩은 오픈소스 자바스크립트 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 자바스크림트 코드로 압축하고 최적화하는 라이브러리 이다. 모듈단위로 개발이 가능하여 가독성과 유지보수가 쉽다. 1. Webpack 번들러 설치 npm i -D webpack webpack-cli webpack-dev-server@next 3개의 패키지 설치가 필요하다. webpack webpack-cli : 터미널에서 입력할 수 있는 기능 webpack-dev-server@next : 개발 할 때 수정사항 새로고침 기능 1-1 . scripts 부분 설정 "dev": "webpack-dev-server --mode development", "build" : "webpack --mode produ..

번들러(bundler) 개발시 SASS , vue , react ,svg ,... 등의 기능들을 이용해 작업을 하는데, 실제로 웹에서 동작하지는 않기 때문에 번들러를 통해 변환하는 과정으로 웹 (HTML / CSS/ JS)에서 사용된다. ex ) sass = > package ( 번들러 sass 설치 ) = > css로 변환 parcel : 구성 없는 단순한 자동 번들링 (소/중형 프로젝트에 적합) webpack : 매우 꼼꼼한 구성 (중/대형 프로젝트에 적합) 1. parcel bundler 설치 터미널에서 번들러 설치 npm i -D parcel-bundler 2. Parcel - 정적 파일 관리 추가하기 파비콘등 이미지의 정적 파일들을 dist 폴더로 자동으로 넣어주는 기능 추가하기 2-1. npm..

필요기능만 가져와 사용할 수 있고 커스텀 할 수 잇다. 1. 프로젝트 생성 하여 Bootstrap 추가 1) NPM 프로젝트 생성 2) Bootstrap 사이트 에서 npm 명령어 복사 Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 3) 터미널에서 설치 실행 해당 package.json파일에서 내용이 확인 가능하다. npm install bootstrap@5..

SCSS 문법 1. 주석 /**/ 또는 // 기존 사용하는 css 주석 이외에 javascript 주석도 함께 이용가능하다. /**/ : css 변환 후에도 주석이 남아있다. // : css 변환 후 주석이 남아있지 않는다. .container{ h1 { color: $color; /*background:#000*/ // font-size:20px } } 2. 변수 설정 $명칭 = 값 유효범위를 설정 할 수 있다. 2-1. 전역변수 📑 SCSS $color : royalblue; .container{ color: $color; } 📑 CSS /* CSS 전역 변수 선언 */ :root { --color: royalblue; } .container{color: var(--color);} 2-2. 지역 변수..