갈푸라떼는 개발중

[Typescript] Class 객체 지향 코드

갈푸라떼 — Fri, 7 Oct 2022 20:08:52 +0900

타입스크립트에서는 파라미터에 써주기만해도 Typescript가 알아서 Constructor함수를 만들어준다.

* 아래는 이해를 돕기위한 예시 사진

타입스크립트와 객체지향 프로그램이 가지고 있는 추상클래스(Abstract Class)

여기서 추상클래스란? 다른 클래스가 상속 받을 수 있는 클래스이다.

하지만 이 추상클래스는 직접 새로운 인스턴스를 만들 수는 없다.

ex) new User()를 이용해 새로운 인스턴스를 만들려고 하면 error가 발생할 것이다.

이번엔 추상 메소드(Abstract Method)를 만들어 보자

(추상 메소드란? 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메소드를 의미한다.)

(메소드란? 클래스안에 존재하는 함수)

(참고: property를 private로 만들면 그 클래스를 상속하였을지라도 그 property에 접근할 수 없다. // 인스턴스 밖에서 접근할 수 없고, 다른 자식 클래스에서도 접근 할 수 없다)

(필드가 외부로부터 보호받고 다른 자식클래스에서 사용이 되게 하고 싶다면 protected를 사용해야한다.)

추상 메소드를 만들려면, 메소드를 클래스 안에서 구현하지 않으면 된다.

대신에 메소드의 call signature만 적어두면 된다.

[Typescript] Generic

갈푸라떼 — Thu, 6 Oct 2022 17:17:39 +0900

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.

라이브러리를 만들거나, 다른 개발자가 사용할 기능을 개발하는 경우엔 제너릭이 유용할것이다.

그 외 대부분의 경우에는 제너릭을 직접 작성할 일은 없을것이다.

대부분의 경우 작성해놓은 제너릭을 사용만 하게 될것이다.

Generic의 일반적인 형태

type SuperPrint = {
  <T>(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 = superPrint(["a", "b", "c"]) // string
const d = superPrint([1, 2, true, false, "hello"]) // number | boolean | string

제너릭을 사용 하는 또 다른 경우

타입을 생성할 수 도 있다
타입을 확장할 수 있다.
어떤경우는 코드를 저장하기도한다.

type Player<E> = {
  name: string
  extraInfo: E
}

type PlayerExtra = {
  favFood: string
}

type GamePlayer = {
  Player<PlayerExtra>
}

const latte:GamePlayer = {
  name: "latte",
  extraInfo: {
    favFood: "milk"
  }
}

const hyeon:Player<null> = {
  name: "Hyeon",
  extraInfo: null
}

[Typescript] over loading

갈푸라떼 — Thu, 6 Oct 2022 16:02:42 +0900

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(config)
} else {
  console.log(config.path)
  }
}

[Typescript] call signature

갈푸라떼 — Thu, 6 Oct 2022 15:33:44 +0900

// type 지정
type Add = (a:number, b:number) => number

// 함수
const add:Add = (a, b) => a + b

타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분

예시의 함수는 a, b인자를 받아서 a + b값을 return하는 함수이며 number, nuber type을 받고 number를 반환하는 함수이다.

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

갈푸라떼 — Sun, 18 Sep 2022 22:12:58 +0900

함수 명 앞에 _ 언더 바가 있는 코드를 발견했다. 왜일까?

var printArray = function() {
  function _print(targetArr) {  //왜 print가 아니라 _print로 썼을까?
   //코드생략
    }
  }
  _print(arguments[0]);
};

코딩 컨벤션(스타일 가이드)

함수명 앞에 _ 언더바를 붙여주는 것은 일종의 코딩 컨벤션이다.

코딩 컨벤션이란 프로그래밍 언어별로 권장하는 코딩 규칙(스타일)이다. 예를 들면 구글에서 권장하는 방식은 링크를 통해 확인할 수 있다. 반드시 따라야 하는 룰이라기 보다는 이해하기 쉬운 코드를 작성하기 위한 가이드 정도로 참고해서 활용할 수 있다.

보통은 지역변수나 sub function일 경우 이름앞에 언더바를 써 주는데 이는 자바스크립트의 경우 접근 제한자(public, private)가 없기 때문에 변수명으로 사용범위를 나타내는 것. 그렇다면 일반적인 함수 이름에 관한 가이드는 대체로 어떤 게 있을까?

함수 이름

동사를 사용하여 작성한다. (ex. getElement(), setOption()...)
Private 메소드 인 경우 메서드 이름 앞에 언더스코어(_)를 사용한다.
카멜 표기법을 준수한다. 복합어 이름은 첫 번째 단어를 소문자로 작성하고, 두 번째 이상의 단어 첫 글자를 대문자로 작성하여 단어를 구분한다.
함수 이름의 첫 글자로 연속된 두 개의 언더스코어(__) 기호와 달러 기호($)는 사용하지 않는다.
Getter, Setter 메서드는 반드시 'get + 멤버 변수 이름', 'set + 멤버 변수 이름' 형식으로 작성한다. getElement(); isChecked(); setOption();
이벤트 핸들러 메서드는 _on + 이벤트명으로 시작하도록 정의한다.

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

갈푸라떼 — Mon, 25 Jul 2022 17:06:29 +0900

* 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 pages.

apexcharts.com

* apexcharts 간단 예시코드

import Chart from "react-apexcharts";

<Chart 
  type="line"
  series={[
    {
      name: "Price",
      data: [10, 20, 20, 30, 10],
    },
  ]}
  options={{
    chart: { height: 500, width: 500, toolbar: { show: false } },
    theme: { mode: "dark" },
    stroke: {
      curve: "smooth",
      width: 4,
    },
  }}
/>

[React_study] useMatch()

갈푸라떼 — Sun, 24 Jul 2022 20:46:18 +0900

* useMatch()

현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환합니다.
useMatch()의 인자로 url을 넘기어 해당 url과 일치할 경우 url의 정보를 반환하고 일치하기 않을 경우 null을 반환한다.

* useMatch() 활용 예시코드

import { useMatch } from 'react-router-dom';

const priceMatch = useMatch("/:coinId/price");
const chartMatch = useMatch("/:coinId/chart");

const Tab = styled.span<{ isActive: boolean }>`
  color: ${(props) => props.isActive ? "white" : "black"};
`;

 <Tabs>
    <Tab isActive={chartMatch !== null}>
      <Link to={`/${coinId}/chart`}>Chart</Link>
    </Tab>
    <Tab isActive={priceMatch !== null}>
      <Link to={`/${coinId}/price`}>Price</Link>
    </Tab>
</Tabs>

useMatch를 이용해 2개의 url을 인자로 받는다.
url이 일치할 경우 isActive는 true가 되므로 styled-components의 props에 의해서 white가 된다.
해당 기능을 이용해 현재 클릭중인 url의 색상을 변경해 강조해 줄 수 있다.

[TypeScript_study] type지정을 쉽게 하는 팁

갈푸라떼 — Sun, 24 Jul 2022 15:55:02 +0900

* TypeScript type지정을 쉽게 하는 팁

Object.keys() 그리고 Object.values()를 활용한다.
console에서의 temp를 이용한다.
연습을 위한 api (https://api.coinpaprika.com/v1/coins/btc-bitcoin)

1. api데이터를 console.log를 이용하여서 console창에 출력한다.

2. 마우스 우클릭을 하여서 Store object as global variable를 클릭해주어 임시 변수 안에 해당 값들을 담아준다.

temp1이라는 임시변수안에 값이 할당된다.

3. Object.keys()를 이용하면 key들이 전부 배열안에 담기게 된다.

4. Object.keys()를 이용해 key를 가져온뒤 join함수를 이용해 문자열로 변환해준다.

5. Object.vaules()를 이용해서 value를 가져온뒤 map과 typeof를 이용하여서 type을 가져온뒤 join함수를 이용해 문자열로 변환해준다.

6. (가져온 key와 type을 매칭해주기) 해당 값들을 가져온뒤 command + d를 이용해 쉼표(,)를 제거 해주고 option + shift + i를 통해서 전체 값에 입력을 해줄수 있게 한다.

type이 object인 값이 있을경우 한번 더 확인을 해주어야 한다.(배열이거나 객체일 수 있다.)

7. 가져온 값중에서 object가 있는 경우 아래의 예시 사진처럼 확인해주어서 type을 지정해준다.

[TypeScript] TypeScript & React SyntheticEvent(합성이벤트)

갈푸라떼 — Fri, 22 Jul 2022 18:31:10 +0900

* [참고] https://ko.reactjs.org/docs/events.html

import React, { useState } from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("");

  const handleValue = (e: React.FormEvent<HTMLInputElement>) => {
    setValue(e.currentTarget.value);
  };

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {};
  
  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {};
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="username"
          value={value}
          onChange={handleValue}
        />
      </form>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

React.event이름.이벤트를 발생시키고 있는 Element 이름
form안에서 있는 input에서 event가 발생하고 있으므로 FormEvent<HTMLInputElement>로 type을 지정해준다.
form에서 event가 발생하고 있으므로 FormEvent<HTMLFormElement>로 type을 지정해준다.
button은 form안에서 동작하고 있지 않기 때문에 MouseEvent<HTMLButtonElement>로 type를 지정해준다.

[React_study] styled-components를 이용한 dark/light모드

갈푸라떼 — Wed, 20 Jul 2022 00:09:57 +0900

* Theme를 이용한 dark/light모드 만들기

index.js파일에 기본 셋팅을 해준다.
darkTheme와 lightTheme를 만들어준다.
- property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다.
ThemeProvider를 통해서 App을 감싸준다.
그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다.
theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다.

// index.js

import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "#whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

* props를 이용하여서 property들을 가져와준다.

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Body = styled.div`
  background-color: ${(props) => props.theme.backgroundColor};
`