전체 글
-
SCSS 문법 알아보기 1CSS/SCSS 2021. 6. 26. 12:42
주석 1. /* 내용 */ - 여러 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타남 2. // - 한 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타나지 않음 중첩 /* SCSS */ .container { ul { li { font-size: 40px; .name { color: royalblue; } .age { color: orange; } } } } /* CSS */ .container ul li { font-size: 40px; } .container ul li .name { color: royalblue; } .container ul li .age { color: orange; } 상위(부모) 선택자 참조 /* SCSS */ // & - 상위 선택자 참..
-
SCSSCSS/SCSS 2021. 6. 26. 11:46
SCSS (Sass) CSS 전처리기 (Pre-Processor) 중 하나이며, 웹에서 동작 가능한 표준의 CSS로 컴파일해서 동작 CSS와 비교했을때 - CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능하다 - 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다 - 표준 CSS보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다 SCSS 설치 NPM을 통해서 설치 1. 터미널에서 npm init -y 2. npm i -D parcel-bundler (parcel-bundler 설치) 3. npm i install --save-dev node-sass
-
TS GenericsJavaScript/TypeScript 2021. 6. 23. 19:36
제네릭 (Generics) - 클래스 또는 함수 내부에서 사용할 타입을 외부에서 결정하는 기법 예제 - Generic와 Any 차이점 // function helloString(message: string): string { // return message; // } // function helloNumber(message: number): number { // return message; // } function hello(message: any): any { return message; } // 3 console.log(hello("Lee").length); // undefined console.log(hello(45).length); // function 함수명 (parameter: T): T fu..
-
TS 클래스JavaScript/TypeScript 2021. 6. 23. 05:26
클래스 - 객체 (object)를 만드는 설계도 - 클래스 이전에 object를 만드는 기본적인 방법은 Function - JS에도 class 사용 가능 (es6 부터) - OOP (Object-Oriented Programming)을 위한 초석 - TS에서는 클래스도 사용자가 만드는 타입의 하나 기본 형태의 클래스 // class 클래스명 {} class Person { name: string; // constructor (생성자 키워드) // object를 생성하면서 값을 전달 constructor(name: string) { // this를 이용해서 만들어진 object를 가리킨다 this.name = name; } } // new 키워드를 이용하여 class를 통해 object를 만들 수 있다 c..
-
TS 인터페이스JavaScript/TypeScript 2021. 6. 19. 02:52
인터페이스 (Interface) - 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용한다 - 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다 - 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점이 클래스와 유사하나 - 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다 (abstract 키워드는 사용하지 않는다) interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`이름: ${person.name} 나이: ${person.age}`); } const p1: Person1 = { name: 'Yoo', age: 27, ..
-
TS 컴파일러JavaScript/TypeScript 2021. 6. 18. 02:02
Compilation Context - 컴파일할 파일, 컴포넌트 등의 모음 - 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함 - TS를 컴파일할 때 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일로 제어 tsconfig schema 최상위 속성(Property) compileOnSave extends compileOptions files include exclude references compileOnSave - true / false (기본값 false) "compileOnSave": true 파일을 저장 (Save)하면 컴파일 하겠다 extends - 파일 (상대) 경로명: string "extends": "./파..
-
TS 타입 시스템JavaScript/TypeScript 2021. 6. 17. 00:25
타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 - 컴파일러가 자동으로 타입을 추론하는 시스템 TS의 타입 시스템 - 타입을 명시적으로 지정할 수 있다 - 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 noImplicitAny 옵션 - 해당 옵션을 사용하면 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any' 라고 판단하게 되면, 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다 strictNullChecks 옵션 - 해당 옵션을 사용하면 모든 타입에 자동으로 포함되어 있는 'null' 과 'undefined' 를 제거 nolmplicitReturns 옵션 - 해당 옵션을 사용하면 함수 내에서 모든 코드가 값을 리턴하지 않으..
-
TS 타입JavaScript/TypeScript 2021. 6. 12. 19:23
TS와 JS 타입 차이점 - TS는 Static Types, 개발 중간에 타입을 체크 - JS는 Dynamic Types, 런타임에 진입해야만 타입을 체크 (실제로 실행을 해봐야 오류를 잡을 수가 있다) // JavaScript function add(a, b) { if (typeof a !== 'number') || typeof b !== 'number') { throw new Error('Incorrect input!'); } return a + b; } const result = add(50, 25); // TypeScript function add(a: number, b: number) { return a + b; } const result = add(50,25); Primitive Type - ..