번들러(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. 지역 변수..

SCSS를 사용한 프로젝트 CSS 전 처리 도구 , css를 좀더 쉽게 사용하기 위한 도구이다. 문법을 두가지 지원을 한다. SCSS , SASS ( ※ SASS는 기존 CSS문법과 호환이 잘 되지 않는 문제점이 있다.) 실제로 웹에서 동작하기 위해서는 작성한 문법을 CSS로 변환( 컴파일 )해야한다. 1. 사용이유 중첩기능 / 변수 ( CSS에서도 변수 현제 사용 가능 ) / 등 유용한 기능 사용 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 2. 프로젝트 생성 2-1.프..

정규표현식 (RegExp) 정규식, Regular Expression 역할 문자 검색 문자 대체 문자 추출 테스트 사이트 https://regexr.com/ 정규식 생성 //생성자 new RegExp('표현'.'옵션'); new RegExp('[a-z]'.'gi'); //리터럴 /표현/옵션 /[a-z]/gi 예제 문자 const str = ` 010-1234-1234 aaathe@naver.com The quick brown fox jumps over the lazy dog. aaabbcccddddaaathe. `; 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치여부 (Boolean) 반환 match 문자열.match(정규식) 일치..