본문 바로가기

JAVASCRIPT/TypeScript

(7)
< 중간 퀴즈 > Class에 대한 중간퀴즈 / class 의 constructor란? 1. class 의 constructor란? 2. 정적메소드란? 3. 상속의 개념? 4. 추상 클래스란 무엇인가? 5. 싱글톤 클래스의 개념? 정답 1. class 의 constructor란? class의 constructor는 예약어이다. 해당 클래스와 연결되며 객체가 생성되면서 실행되는 클래스에 기반해 만드는 모든 객체에도 연결되는 함수이다. 이를 활요해 구축하는 객체에 대한 초기화 작업을 수행할 수 있다. 2. 정적 메소드란? 클래스를 기반으로 생성된 객체가 아니라 클래스에서 직접 호출하는 메소드입니다. 3. 상속의 개념? 상속을 사용하면 일부 공통적인 기능을 공유하면서 특수화된 청사진을 생성할 수 있다. 4. 추상 클래스란 무엇인가? 인스턴스화 될 수 없고 확장되어야 하는 클래스이다. 5. 싱글톤..
<TypeScript, JavaScript> Class 란? -2. 클래스, 인스턴스화와 상속의 차이 / super() 이전 글에서 new 키워드로 클래스를 인스턴스화 해서 설계도에 비교하는 것 까지 정리를 했었다. 이번에는 상속에 대해서 정리해보자. 그리고 상속을하면서 super() 가 도대체 무엇인지 궁금했었는데 이번 기회에 정리를 하게 되었다. 단순히 ' 상속 = 부모 클래스를 복사해서 쓰는 것 ' 이상으로 상속이란? 다른 클래스에 있는 프로퍼티와 메소드를 extends 키워드를 이용해 상속한 다음 잠재적으로 새로은 프로퍼티와 메소드를 추가한다. 상속을 하면 상속의 대상을 부모클래스 상속을 받은 대상을 자식 클래스라고 한다. +) 자식클래스를 서브 클래스라고도 한다. 그리고 상속과 인스턴스화의 가장 큰 차이점은 정적 메소드에 접근할 수 있느냐 없느냐이다. 일단 간단한 클래스를 만들고 그 클래스를 상속받은 클래스를 써..
<TypeScript, JavaScript> Class 란? -1. 클래스의 개념 / 정적 메소드 / 동적 메소드 / 프로퍼티 / 일단 TS에 대해 공부하려면 class에 대한 개념이 무조건 잡혀있어야 한다. 단순히 변수의 데이터 타입을 지정해주는 걸 넘어서 함수의 리턴 값의 데이터 형태나 클래스에 포함되어야 하는 데이터 및 함수 등등을(이 용도로 가장 많이 쓰인다!!!) 폭 넓게 지정해줄 수 있기 때문이다 그리고 - 내 개인적인 경험으로는 클래스에 대해서 개념을 익히기 전과 후로 공부 및 코드를 이해하는데 정말정말 크게 달라진만큼 꼭 한번은 class에 대해 짚고 넘어갔으면 하는 바램이다. 클래스를 붕어빵과 붕어빵 틀에 비유하는 예시를 가장 많이 봤을 것이다. (나도 항상 봤던 비유이다ㅋㅋ) 그런데 일차적으로 용어가 헷갈리는 상태에서 헷갈리는 용어들을 갖고 개념을 이해하려니 더 뒤죽박죽 섞여서 전혀 이해할 수 가 없었다ㅋㅋㅋ 그래..
<TypeScript> 기본 타입 -2 / ENUM 타입/ Any / UNION / Alias / Literal 1. ENUM 타입 타입을 ENUM 으로 선언하면 순서대로 0, 1, 2, 를 할당해준다 enum Role {ADMIN, READ_ONLY, AUTHOR}; // 컴파일 후 js 파일을 보면 var Role; (function (Role) { Role[Role["ADMIN"] = 0] = "ADMIN"; Role[Role["READ_ONLY"] = 1] = "READ_ONLY"; Role[Role["AUTHOR"] = 2] = "AUTHOR"; })(Role || (Role = {})); ; 컴파일 하면 위와 같이 알아서 js 코드를 작성해준다 +) 만약 시작값이 0이 아니길 원한다면 enum Role {ADMIN = 5, READ_ONLY, AUTHOR}; 이렇게 시작값을 지정해주면된다. 이후의 값들은..
<TypeScript> 기본 타입 - 1 / 원시타입 / 객체 / 배열 / 튜플 +) 튜플 주의할 점, 의도치 않은 에러 주의 TS에서 데이터 타입을 지정해 주는 방법은 다음과 같다 const name: string 1. 원시타입 - 타입 스크립트에서도 String 및 Number 형과 같은 타입을 다룬다. 통상 데이터 타입을 대문자로 쓰지만 타입스크립트의 주요 원시 타입은 모두 소문자이다. 2. 객체타입 typescript에게 객체 타입임을 알려주기 object 또는 {} 라고 타입 선언을 해주면 된다. const obj1: object const obj2: {} 3 . 배열 - 안에 담길 데이터 형[] , 이렇게 선언해주면 된다 const arr1: string[] // string형 데이터 타입이 담긴 배열 선언 const arr2: any[] // any, 말그대로 어떤 데이터 타입이든 담길 수 있는 배열 선언 4. 튜플..
<TypeScript> 타입스크립트 설치/ 컴파일 툴 설치 / 코드 내용 변화 감지 설정/ 관찰모드 ( tsc-watch ) 타입스크립트의 기본 타입에 대해 정리하기 이전에 설치 하기와 관찰모드를 적용하는 방법을 알아보자 1. 타입스크립트 설치 타입스크립트 글로벌 설치 ================================================== npm i typescript -g ================================================== tsconfig 생성 ================================================== npx tsc --init ================================================== 타입스크립트로 관리해야할 프로젝트임을 알려주는 방법 =====================================..
<TypeScript> 타입스크립트 사용이유 말그대로 타입스크립트는 자바스트립트에 타입(type)을 부여하는 것이다. JS를 공부해본 사람은 알겠지만 데이터 타입을 정해주지 않아도 넣어주는 대로 받아서 알아서 데이터 타입을 정해준다 알아두면 좋을 것 같아서 적어두는 지식으로 타입스크립트 첫 글을 연다 짜잔 예시 나갑니다~~ const name; const age; consol.log(name); consol.log(age); 의 콘솔에 찍히는 결과값은 무엇일까? 바로바로 ..... .... .. . undefinded이다! undefinded는 모든 변수의 기본값이다. 선언과 동시에 대입을 하지 않으면 메모리 할당은 받았으나 해당 주소에 어떤 값이 들어있지는 않기 때문에 undefinded 인 것이다. 그렇다면 다음과 같이 값을 넣어주..

728x90