전체 글

[Typescript] Class 객체 지향 코드

타입스크립트에서는 파라미터에 써주기만해도 Typescript가 알아서 Constructor함수를 만들어준다. * 아래는 이해를 돕기위한 예시 사진 타입스크립트와 객체지향 프로그램이 가지고 있는 추상클래스(Abstract Class) 여기서 추상클래스란? 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 이 추상클래스는 직접 새로운 인스턴스를 만들 수는 없다. ex) new User()를 이용해 새로운 인스턴스를 만들려고 하면 error가 발생할 것이다. 이번엔 추상 메소드(Abstract Method)를 만들어 보자 (추상 메소드란? 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메소드를 의미한다.) (메소드란? 클래스안에 존재하는 함수) (참고: property를 private로 만들면 그 클..

[Typescript] Generic

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 라이브러리를 만들거나, 다른 개발자가 사용할 기능을 개발하는 경우엔 제너릭이 유용할것이다. 그 외 대부분의 경우에는 제너릭을 직접 작성할 일은 없을것이다. 대부분의 경우 작성해놓은 제너릭을 사용만 하게 될것이다. Generic의 일반적인 형태 type SuperPrint = { (arr: T[]): T } const superPrint: SuperPrint = (arr) => arr[0] const a = superPrint([1, 2, 3, 4]) // number const b = superPrint([true, false, true]) // boolean const c = ..

[Typescript] over loading

Overloading은 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로, 하나의 함수가 복수의 Call Signature를 가질 때 발생한다 예를 들어, Next.js의 라우터 push가 대충 두 가지 방법으로 페이지를 이동한다고 할 때, router.push("/home"); router.push({ path: "/home", state: 1 }); * Type지정 type Config = { path: string, state: number } type Push = { (path: string): void, (config: Config): void } const push: Push = (config) => { if (typeof config === "string") { console.log(c..

[Typescript] call signature

// type 지정 type Add = (a:number, b:number) => number // 함수 const add:Add = (a, b) => a + b 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분 예시의 함수는 a, b인자를 받아서 a + b값을 return하는 함수이며 number, nuber type을 받고 number를 반환하는 함수이다.

[코딩 컨벤션] 함수이름 앞에 언더바(_)를 쓰는 이유

함수 명 앞에 _ 언더 바가 있는 코드를 발견했다. 왜일까? var printArray = function() { function _print(targetArr) { //왜 print가 아니라 _print로 썼을까? //코드생략 } } _print(arguments[0]); }; 코딩 컨벤션(스타일 가이드) 함수명 앞에 _ 언더바를 붙여주는 것은 일종의 코딩 컨벤션이다. 코딩 컨벤션이란 프로그래밍 언어별로 권장하는 코딩 규칙(스타일)이다. 예를 들면 구글에서 권장하는 방식은 링크를 통해 확인할 수 있다. 반드시 따라야 하는 룰이라기 보다는 이해하기 쉬운 코드를 작성하기 위한 가이드 정도로 참고해서 활용할 수 있다. 보통은 지역변수나 sub function일 경우 이름앞에 언더바를 써 주는데 이는 자바스크..

[Chart_library] apexcharts (그래프 작성 라이브러리)

* apexcharts https://apexcharts.com/ 그래프를 쉽게 작성할 수 있게 도와주는 라이브러리 angular, react, vue전부 호환이 된다. 글쓴이는 주로 React를 많이 사용한다. 사용법이 정말 간단하며 디자인 또한 이쁘다. npm install --save react-apexcharts apexcharts ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web ..