it공부 (개념)/javascript 27

union type(유니온 타입)과 type guard(타입가드)란? 개념 및 Typescript예제

Union? 사전적 의미: 조합, 결합, 연합 in Mathematics(수학에서): 합집합 타입스크립트에서: 잠재적인 타입들을 열거해 놓은 타입이다. 아직 어떤타입의 값이 대입될지 정해져 있지 않았을 때 사용한다. 열거에는 | 기호를 사용한다. ex) number | string 자바스크립트에는 존재하지 않는 타입스크립트 고유의 문법요소이다. Union Type 예제 //TypeScript 코드 //string과 number중 하나를 가질 수 있는 타입 type stringOrNumber = string | number; //string let burgerName: stringOrNumber; burgerName = 'HamBurger'; // number let price: stringOrNumber..

Intersection type(인터섹션 타입) 개념 및 Typescript 예제

Intersection? 사전적 의미: 교차로, 교집합, 어떤 것들이 가로지르는 지점 Intersection type (in Typescript): 여러 타입을 융합하여 만든 하나의 타입. "&" 연산자를 활용하여 정의한다. 융합된 타입들의 요소를 전부 가지고있다. type예제 type CheeseBurger = { numBread: number; numCheese: number; } type BeefBurger = { numBread: number; numBeef: number; } //numBread라는 공통의 요소를 가지고있는 두 타입을 정의했다. type BeefCheeseBurger = CheeseBurger & BeefBurger; //& 연산자가 바로 intersection 연산자이다. //..

interface(인터페이스) 개념 및 Typescript 예제

타입스크립트 소개 및 개발 준비 게시물의 링크는 이 글의 맨 밑에 있습니다. Art and design icons created by Freepik - Flaticon 목차. A. interface의 개념 사전적 정의, 프로그래밍 언어에서의 정의 사용이유 B. Typescript예제 1. object와 class의 청사진이 되는 interface 2. function의 청사진이 되는 interface 3. +@: readonly제어자와 option(옵션) 항목 A. Interface 개념 interface(인터페이스)란? 타입스크립트의 interface : class(클래스), object(오브젝트), function(함수) 등을 정의하기 위한 blueprint(청사진)을 제공하는 구성요소. 사전적 의미..

Singleton pattern?(싱글톤패턴) 개념 및 Typescript에서 구현하기

Miscellaneous icons created by Pixel perfect - Flaticon Singleton(싱글턴)? 일반적인 용어: "Single"에 하나를 의미하는 접미사 "ton"을 붙여서 "단독"의 의미를 강화한 단어. ex) singleton (카드): 카드 한 장 singleton (사람): 자식이 없는 사람, 혹은 가족이 없는 개인. 프로그래밍 용어 Singleton pattern: 하나의 class(클래스)가 하나의 instance(인스턴스)만 갖는 것을 보장하는 디자인. Singleton Pattern의 장점 하나의 class가 하나의 instance만 생성하도록 함으로써, 메모리 사용을 줄이고 시스템성능을 향상시킬 수 있다. instance가 하나뿐이니, 기억할 이름도 하나뿐..

VSCODE에서 TypeScript 개발 준비하기

썸네일 이미지 Microsoft icons created by Freepik - Flaticon 저번에 소개했던 TypeScript의 개발준비를 위한 설정을 해보자. https://batcave.tistory.com/33 TypeScript(타입스크립트)? 간단하게 알아보기 Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입 batcave.tistory.com 0. Node.js, VScode설치하기 TypeScript(이하 TS)를 활용하는 데에 npm이 유용하게 ..

TypeScript(타입스크립트)? 간단하게 알아보기

Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입체크) 기능을 통해, JS를 마치 자바처럼 static(정적)으로 프로그래밍할 수 있게 해 준다. 컴파일러: ". ts" 확장자 파일을 ". js"파일로 컴파일러 사실 TS는 그 자체로 실행가능한 언어가 아니다. TS로 작성한 모든 코드 들은 JS로 컴파일되어 실행된다. TS의 장점 js코드의 오류를 run-time 이 아닌 compile-time에 발견할 수 있다. js코드가 프로그래머의 의도와 다른 논리로 작동하는..

python3(파이썬) 유저를 위한 javascript ES6(자바스크립트) 기본 문법

메서드 사용법 alert("Hello world"); 메서드명("텍스트"); "(큰따옴표) 대신 '(작은따옴표) 를 사용 할 수 도 있다. 파이썬과의 차이점 파이썬은 띄어쓰기로 문장을 구분하기때문에 ;(세미콜론)을 사용하지 않는다. 한줄에 여러 문장을 진술할경우에만 세미콜론(;)을 사용한다. print("hello world"); print("hello world") string multiline string : (여러줄 문자열) 작성법 파이썬: """ """ 따옴표 세개를 사용한다 자바스크립트: singleline string(한줄 문자열) 과 차이가 없다. " " 따옴표 한개를 사용한다 다른 변수값을 불러오는 string의 모습 파이썬: f-string, 혹은 %연결 연산자를 사용 ex) f"hell..