맨동이

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..

Class 란? object를 만드는 설계도 클래스 이전에 object를 만드는 기본적인 방법은 function javascript 에도 class는 es6 부터 사용 가능 Typescript 에서는 클래스도 사용자가 만드는 타입의 하나 ES5 //TS class Person { } const p1 = new Person(); console.log(p1); //ES5 "use strict"; var Person = /** @class */ (function () { function Person() { } return Person; }()); var p1 = new Person(); console.log(p1); ES6 //ES6 "use strict"; class Person { } const p1 = ..

TypeScript interface 기존에 자바스크립트에는 인터페이스라는 개념이 없었습니다. 하지만 타입스크립트를 이용해 인터페이스를 사용할 수 있게 됐습니다. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다. 컴파일 타임에만 사용되고 js 파일에는 나타나지 않는다! //TS function hello1(person: {name:string; age:number}):void { console.log(`hi im ${person.name}, ${person.age}years`); } const p1 : {name:string; age:number}={ name:"Dongit", age:25 }; hello1(p1); 기존 타입스크립트의 코드가 위와 ..

tsconfig 최상위 프로퍼티 compileOnSave: true/false (default false) 파일 변경 후 저장하면 자동 컴파일을 해주는 옵션입니다. 에디터마다 안될 수도 있습니다. VS2015 with TypeScript 1.8.4 이상 // tsconfig.json { "compileOnSave": true } extends : "경로" 특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성입니다. TypeScipt 2.1 이상 // config/base.json { "compilerOptions": { "noImplicitAny": true } } // tsconfig.json { "extends": "./config/base" } files, i..

타입 시스템 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 컴파일러가 자동으로 타입을 추론하는 시스템 TypeScript는 structural type system(구조적 타이핑)을 기반으로 타입 시스템을 갖추고 있습니다. structural type system:구조가 같으면, 같은 타입이다. function func(a) { return a * 38; } console.log(func(10)); //380 console.log(func('HEY')+5); // NaN a 의 타입을 명시적으로 지정하지 않아 a가 any 로 추론되고 함수의 리턴 타입은 number로 추론되는 경우입니다. 이럴경우 nolmplicitAny 옵션을 켜주어야 합니다. nolmplicitAny 옵션 타입을 명시적으로 ..

object 타입 "primitive type이 아닌 것"을 나타내고 싶을 때 사용하는 타입 array let list: number[] = [1,2,3]; let list2: (number | string)[] = [1,2,3,"4"]; // let list: Array = [1,2,3]; tuple length 를 벗어나거나 순서가 맞지 않아도 오류가 납니다. let x: [string,number]; x = ["hello", 39]; //x = [10, "Hi"]; //순서가 맞지 않음 const person : [string, number] = ["Dongit", 25]; //const [first, second, third] = person; //length를 벗어남 any 어떤타입이어도 상관없..