본문 바로가기

Front-End17

Interfaces 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 인터페이스(Interface)를 알아보기 전에 접근 제한자 readonly에 대해서 먼저 알아보고 시작하자! type Words = { [key:string] : string } class Dict { private words: Words constructor(){ this.words = {} } add(word:Word){ if(this.words[word.term] === undefined){ this.words[word.term] = word.def; } } def(term:string){ return this.words[term] } } class Word { constructor( public term:string, public.. 2022. 12. 20.
Classes 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 타입스크립트는 우리의 객체지향 코드들을 더 안전하고 좋게 만들 수 있도록 도와준다. 기존 JS에서 우리가 Class를 만들 때 우리는 아래와 같은 코드를 작성해야 했다. //Javascript 코드 "use strict"; class Player { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } 생성자에 this.뭐시기 ~ this.거시기 ~~ 하지만 TS를 활용하면 전혀 그럴 필요가 없다. //Typescript 코드 class Player { constructor( private firstName:string, pr.. 2022. 12. 19.
Generics Recap 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. //call signature type SuperPrint = (a: T[]) => T const superPrint: SuperPrint = (a) => a[0] const a = superPrint([1, 2, 3, 4]); const b = superPrint([true, false, false]); const c = superPrint(["1", "2", "3"]); const d = superPrint([1, 2, true, false, "무야호"]); console.log(a, b, c, d); // 1 true 1 1 제네릭(Generics)은 기본적으로 placeholder를 사용해 코드의 타입을 우리가 작성한 코드의 타입.. 2022. 12. 16.
Polymorphism 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 자자 이번에는 다형성(Polymorphism)과 타입스크립트가 어떻게 다형성을 제공하는지(Generic) 알아보자~ 다형성(Polymorphism)이 뭔데? 그리스어로 poly는 many, much, several, multi이다. polygon(다각형)과 같은 단어를 생각하면 된다. 그리고 morphos는 form(형태), structure(구조)란 뜻을 가지고 있다. 이것들을 조합하면 many(poly), structure(morphos)가 된다. 즉 여러 가지 다른 구조들이라는 의미다. 기본적으로 함수는 여러가지 다른 모양 또는 형태를 가지고 있다. 이번에는 타입과 관계없이 배열을 받고, 그 배열의 요소를 하나씩 출력해주는 함수를 .. 2022. 12. 16.
Overloading 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 개발을 하면서 실제로 많은 오버로딩된 함수를 직접 작성하진 않을 것이다. 그 대신 다른 사람들이 만든 외부 라이브러리를 사용할 텐데 이런 패키지와 라이브러리들은 오버로딩을 엄청 많이 사용한다. 그래서 우리는 오버로딩이 어떻게 생겨먹은 놈인지 알고 있어야 한다. type Add = (a: number, b: number) => number; 위 코드를 우리는 Call signature라고 부르기로 했다. 우리가 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분이다.(파라미터의 타입은 무엇인지, 함수의 리턴 타입은 무언인지!) 위와 같은 방식은 Call signature를 만드는 가장 간단하고 빠른 방법이다. 우리는 아래와 같은 .. 2022. 12. 16.
Call Signatures 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. function add(a, b) { return a + b; } 타입스크립트에서 위와 같이 함수를 선언하면 Arguments가 이상하다고 불평을 한다. 그 이유는 a와 b의 타입을 추론할 수 없기 때문이다.(위 경우 a, b는 any타입을 갖고 있고 타입스크립트는 any 타입을 좋아하지 않는다.) function add(a: number, b: number) { return a + b; } // 아래와 같이 함수에 number를 표시하는 것은 필수는 아니다. // function add(a: number, b: number): number { // return a + b; // } const add = (a: number, b: num.. 2022. 12. 16.
Javascript Object VS JSON 들어가며 프로젝트 진행 중 외부 API를 활용해 정보를 수집해야 할 일이 생기곤 합니다. API 호출을 통해 받은 정보들 중에서 원하는 정보만을 추출하기 위해 파싱 하는 중 Javascript의 Object와 JSON에 대한 개념이 부족함을 느껴 글을 남깁니다. Javascript Object VS JSON Javascript Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text파일이다. JSON은 "파일"이므로 확장자명이. JSON인 파일이 존재합니다. HTTP 통신에서 정보를 주고받을 때 Javascript Object가 아닌 JSON으로 서버와 클라이언트가 데이터를 주고받습니다. 예를 들어 서버로부터 받은 JSON 데이터를 프런트엔드에서.. 2022. 11. 30.

티스토리툴바