Front-End Dev.
-
[Typescript] Class(클래스)카테고리 없음 2021. 2. 24. 04:25
😏 서론 Javascript 클래스를 복습하는 포스팅을 통해 공부했을 뿐만 아니라, 프로토타입 개념을 별도로 정리하면서 자바스크립트만의 클래스를 나름대로 이해하게 된 계기였다. Typescript 역시 ES6에서 도입된 Class 문법을 활용 가능하며, 좀 더 강력한 지원이 가능하다고 한다. 양이 많은 만큼 긴 포스팅이 될 것 같다!!!! 🤯🤯🤯🤯 💙 Class 란? Javascript 와 마찬가지로, 클래스 형식을 직관적으로 작성 가능한 Syntactic Sugar 이다. 기본적인 자바스크립트의 클래스 정의 및 사용법은 아래와 같다. /* 클래스 정의 */ class Book { /* 생성자(필드 초기화) */ constructor(title, author, pages) {// 프로퍼티(클래스 변수) ..
-
[Javascript] Class(클래스) 심화Front-End(Web)/Javascript 2021. 2. 24. 04:20
클래스를 포스팅하려고 했다가, 프로토타입을 먼저 공부하고 돌아온 참이다!! 🤒🤒 처음엔 클래스를 공부하는데 '프로토타입 기반' 이란 말이 자꾸 반복되길래 혼동이 오던 참이었는데! 이제는 무언가 감을 잡은 기분이다 ㅎㅎ!! 자바스크립트의 클래스는... 클래스지만 클래스가 아니다!! (읭???) 📒 Class 기본 1. Prototype 기반 언어(프로그래밍) 자바스크립트는 프로토타입 기반 언어이다. 이는, Java와 같은 클래스 기반 언어와 결을 달리 한다는 의미이다. 둘 모두 객체 지향 프로그래밍(OOP, Object Oriented Programming) 에 목적을 둔 문법이지만 그 방법에 있어 약간의 차이가 있다. 클래스 기반은 클래스라는 개체(일종의 틀)를 만든다. 그리고, 이 틀로 객체들을 만들어..
-
[Javascript] Prototype(프로토타입)Front-End(Web)/Javascript 2021. 2. 24. 02:45
🤔 서론 프로토타입 기반 언어란 무엇일까? JS의 프로토타입 언어의 특징은 뭐가 있을까? 이를 이해해야 ES5까지 있었던 클래스 문법, 그리고 ES6에 새로 등장하게 된 클래스 문법에 대해 이해할 수 있을 것 같다. 📒 Prototype 기반 언어 Javascript는 원형 객체로 새로운 객체를 생성하는 프로토타입(원형) 기반 언어이다. 이는, C나 Java같은 클래스 기반 언어와 구분된다. - 프로토타입 기반 언어 [위키피디아] 프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. 프로토타입 기반 언어는 원형 객체를 복제하여 새로운 객체를 생성하는 언어이다. 그런데 자바스크립트도 복..
-
[Typescript] 함수(Function)카테고리 없음 2021. 2. 23. 20:19
Typescript는 Javascript의 수퍼셋인 만큼, 클래스 / 모듈 / 네임스페이스 못지 않게 함수의 기능적 역할이 중요하다. Typescript는 표준 Javascript 함수가 수월하게 작업하도록 다양한 기능을 지원한다고 한다. 가이드북과 유튜브 강의를 통해, Typescript 함수 활용에 대한 내용들을 공부하고 정리해보았다. 💙함수 타입 (Function Type) 아래 예제처럼, 타입스크립트에서는 함수에 대한 타입선언을 진행한다. 매개변수, 반환값 2가지에 대해서 시행한다. 첫 번째 방법은, 각 요소에 대한 타이핑이며, 두 번째 방법은, 함수 타입을 작성하여 함수변수(myAdd)에 지정하는 것이다. function add(x, y) { return x + y; } // 1) 함수의 타이핑..
-
[Typescript] 제네릭(Generic)Front-End(Web)/Typescript 2021. 2. 23. 19:26
우선, Generic 이라는 말부터 생소했다. '일반적인' 이라는 뜻으로, 정적타입 언어에서 이를 많이 지원한다고 한다. 클래스나 함수에서 사용할 타입을 결정하면서, 소위 '일을 어떻게 할 것인지?' 를 결정하는 문법이라고 한다. 자세히 공부해보았다! 💙 Generic 이란? '일반적인' 이라는 언어 뜻 그대로, 재활용성이 높은 컴포넌트를 구축하기 위한 문법이다. 정적언어인 C#과 Java에서는 재사용 가능한 컴포넌트를 만드는 주요 도구로 제네릭이 통용된다. - Generic 적용 // 단일 타입 function identity(arg: number): number { return arg; } // any 타입 function identity(arg: any): any { return arg; } 아래와..
-
[Typescript] 유니언과 교차 타입Front-End(Web)/Typescript 2021. 2. 23. 19:18
앞서, Enum(열거)과 리터럴 타입을 공부하면서 유니언 타입을 자주 활용하였다. 다양한 타입들을 복합하기 위한 유니언, 그리고 이와 비교되는 교차 타입에 대해서 포스팅하겠다. 💙 Union Type (유니언 타입) 앞서 얘기했듯, 유니언 타입은 새로운 형태의 타입은 아니다. 이미 존재하는 타입들을 재료로 구성하는 방법의 일종이다. 만약, 어떤 변수에 2가지 타입이 기대가 된다.(string, number) 이 땐, any보다 유니언 타입을 쓰는 것이 효과적이다. let unionPrice: number | string = 5; 이처럼, 우리가 활용하고자 하는 타입들을 파이프(|)로 연결시키기만 하면 된다. 해당 타입들 외 값을 설정하면, 에러가 발생한다. - Union Type 재활용: Type Ali..
-
[CodeKata] 프로그래머스: 2.23(화), 메뉴 리뉴얼Algorithm 2021. 2. 23. 15:09
🥋 Ooooth!! (Level 2) orders 각 배열의 조합들 중, course 갯수들에 맞는 조합만을 모아서 반환한다는 생각으로 만들었다. 🧮 풀이 // 조합 함수 function combination(arr, num) { let result = []; if(num == 1) return arr.map(e => [e]); arr.forEach((e,i,array) => { let rest = array.slice(i+1); let combinations = combination(rest,num-1); let combiArr = combinations.map(x => [e, ...x]) result.push(...combiArr); }) return result; } // 문제풀이 함수 functi..
-
[Typescript] 열거형(Enum) & Literal TypeFront-End(Web)/Typescript 2021. 2. 23. 04:06
앞서 타입을 공부하면서, 값들을 나열한 열거형(Enum)에 대해서 공부했다. 이것이 적용될 방법 중 하나가 바로 이 Literal Type인 것이다. 얼핏 보았을때, 자료형이 아닌 특정값을 직접적으로 타입으로서 설정하는 방법인 것 같다. 💙 열거형(Enums) 열거(Enum)는 비원시 타입이자, 멤버라 불리는 값의 집합을 이루는 자료형이다. enum 키워드로 선언하며, {} 안에 자료형을 나열한다. enum Fruits { Apple, Banana, Kiwi, } 열거형을 사용하는 대표적인 목적은, 특정 프로퍼티를 자료형보다는 값(혹은 값의 집합)으로 제한하고자 하는데 있다. - Enum 적용 다음 예제에서, enum(Subject)로 설정한 subject 프로퍼티를 string('Typescript')..