맨동이

Parcel 2017년 여름에 등장한 Parcel.js는 새로운 웹 애플리케이션 번들러 입니다. 기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다. 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합합니다. Parcel-bundler 설치 NPM 설치 더보기 더보기 npm install -g parcel-bundler Yarn 설치 더보기 더보기 yarn global add parcel-bundler SCSS/ SASS 사용 SCSS 컴파일은 sass (dart-sass의 JS 버전) 모듈을 필요로 합니다. NPM 설치 더보기 더보기 npm install -D sass Yarn 설치 더보기 더보기 yarn add -D sass 설치가 완료되면 Java..

SCSS 문자 보간 #{ } 를 이용하여 문자 보간을 사용할 수 있습니다. @mixin box($position, $width, $color) { border-#{$position}: $width solid $color; } div{ @include box(left, 2px, blue); } 가져오기 @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 또한, 쉼표를 사용하여 여러 파일을 가져올 수도 있습니다. @import "header", "footer"; 반복문 @for 을 사용하여 스타일은 반복적으로 사용할 수 있습니다. through 를 사용하거나 to 를 사용하는 형식이 있는데, 이 둘은 종료 조건이 해석되는 방식이 다릅니다. // through // 종료..

SCSS 란? CSS 전(예비)처리기 CSS Preprocessor 라고 부릅니다. 주석 더보기 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 중첩 //SCSS .section { width: 80%; .list { margin: 10px; li { text-align: left; } } } 이것을 컴파일 하면 //CSS .section { width: 80%; } .section .list { margin: 10px; } .section .list li { text-align: left; } 상위 선택자 참조 중첩안에서 & 를 이용하면 상위 선택자를 참조하여 치환해줍니다. //SCSS .main { &.active { opacity: 1; } } //CSS .main.active { opacit..

Generic 이란? Generic 은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다 any VS generic 제네릭과 함께 any도 유연한 타입에 속합니다. 하지만 any로 타입을 정의하면 어떤 값이든 올 수 있어 안정성이 떨어집니다. (들어오는 값에 따라 타입 추론을 하기 때문입니다.) any처럼 유연하게 여러 타입을 받으면서 안정성을 지키고 싶을 때 제네릭을 사용합니다. 사용법 // 1. 어떤 타입을 받을 건지 먼저 정의 (check) // 2. params 타입으로 정의 (text: T) function logText(text: T): T { console.log(text); return text; } // 3. 함수를 호출할..

readonly properties readonly가 선언된 클래스 프로퍼티는 선언 시 또는 생성자 내부에서만 값을 할당할 수 있습니다. 그 외의 경우에는 값을 할당할 수 없고 오직 읽기만 가능한 상태가 됩니다. //TS class Person { public readonly name: string = 'Dongit'; private readonly country: string = 'Korea'; hello() { this.country = 'China'; // Cannot assign to 'country' because it is a constant or a read-only property. } } const p2 = new Person(); p2.name = "H.D" // Cannot assig..