본문 바로가기

js

(25)
TypeScript - Class readonly 클래스의 속성에 readonly 키워드를 사용하면 아래와 같이 접근만 가능합니다. class Student { readonly name :string; constructor(name :string){ this.name = name; } } let zontae = new Student("zontae"); zontae.name = "jontae"; // readonly 이기 때문에 오류가 난다. 이처럼 readonly를 사용하면 constructor() 함수에 초기 값 설정 로직을 넣어줘야 하므로 다음과 같이 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있습니다. class Student2 { readonly name :string; constructor(readonly name..
TypeScript - 이넘(Enums) 이넘(Enums) 이넘은 특정 값들의 집합을 의미하는 자료형입니다. 예를 들면 아래와 같은 목록이 이넘이 될 수 있습니다. 숫자형 이넘 타입스크립트에서 숫자형 이넘은 아래와 같이 선언합니다. enum Book { 해리포터 = 1, 반지의제왕, 삼국지 } 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. 해리포터 - 1 반지의제왕 -2 삼국지 -3 만약 아래와 같이 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. enum Book { 해리포터 , //0 반지의제왕,//1 삼국지//2 } 숫자형 이넘 사용하기 이렇게 선언한 이넘은 아래와 같이 사용할 수 있습니다. enum Book { 해리포터 , //0 반지의제왕,//1 삼국지//2 } function book..
TypeScript - 인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 맛보기 인터페이스에 대해 알아볼 수 있는 간단한 예제를 봅시다. let person ={name : 'zontae' ,age : 10}; function logAge(obj : {age:number}){ console.log(obj.age); //10 } logAge(person) 위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체입니다. 이렇게 인자를 받을 때 단순한 타입 뿐만 아니라 객체의 속성..
TypeScript - 함수 타입스크립트에서의 함수 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의할 수 있습니다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조 타입 함수의 기본적인 타입 선언 타입스크립트의 함수 선언 방법을 이해하기 위해 먼저 간단한 자바스크립트 함수를 보겠습니다. function sum (a,b,c){ return a + b + c; } 위 자바스크립트 함수에 타입을 부여하면 아래와 같습니다. function sum (a:number,b:number ,c:number){ return a + b + c; } 기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였습니다. 참고사항 -> 함수의 반환 값에 타입을 정하지 않을 때..
TypeScript - Union Type Union Type 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다. 아래 코드를 보겠습니다. function logMessage(value: string | number) { console.log(value); } 위 함수에 value 에는 문자열 타입이나 숫자 타입 모두 가능합니다. | 연산자는 타입을 여러 개 연결하는 방식 이며 이러한 방식을 유니온 타입 정의 방식이라고 말한다. Union Type의 장점 유니온 타입의 장점은 아래 2개의 코드를 비교하면 바로 알 수 있습니다. // any를 사용하는 경우 function getAge(age: any) { age.toFixe(); // 에러 발생, age의 타입이 any로 추론되기..
TypeScript - 기본 타입 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. // 문자열 const str: string = 'hello'; Number 타입이 숫자이면 아래와 같이 선언합니다. // 숫자 const num: number = 10; Boolean 타입이 진위 값인 경우에는 아래와 같이 선언합니다. // 진위값 let isLogin: boolean = false;​ Object 타입이 객체면 아래와 같이 ..
TypeScript - TypeScript란? 1.Type System TypeScript 는 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JavaScript 상위 집합 언어입니다. TypeScript 의 가장 큰 특징은 JavaScript에 Type System을 적용한 것으로 정적 데이터 타입입니다. TypeScript 로 작성된 코드는 TypeScript 컴파일러를 통해 JavaScript 로 변환되고 이후 실행됩니다. Type System 이외에도 TypeScript는 Decorators와 같은 다양한 기능을 제공합니다. TypeScript = JavaScript + Type System TypeScript의 가장 큰 특징은 JavaScript의 타입 체계에 정적 타입을 적용할 수 있도록 한것입니다. JavaScript는 동적 타입 체계의 ..
JS-promise 1.동기적 처리와 비동기적 처리 Syncronous(동기) : 요청을 보낸 후 , 해달 요청의 응답을 받아야 다음 동작을 실행 (순차적으로 실행한다.) Asynchronous(비동기): 요청을 보낸 후, 응답과 관계없이 다음 동작을 실행(코드를 실행후 완료와 관계 없이 다음 줄이 실행된다) javascript는 다른 언어와 마찬가지로 동기적 처리가 기본이지만, 일부 기능은 비동기적으로 처리가 가능하도록 관련 기능을 추가로 제공한다. 주요 비동기적 처리 오래 걸리는 기능은 비동기적으로 처리된다. -Rest API 요청 -파일/데이터베이스 처리 -타이머, 암호화/복호화 등 비동기 처리 예(setTimeout 함수) setTimeout(function,millisecond) milliseconds :ms 만큼..