[REACT] Data Types

학습일 : 2023. 04. 06

---

 

 

현재 상태에선 타입스크립트가  info와 priceInfo를 빈 object라고 파악하고 있을 것이다.

 

const infoData = await
(await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)).json();
console.log(infoData); // 콘솔에 찍어보기


const priceData = await (
await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
).json();
console.log(priceData); // 콘솔에 찍어보기

 

앞서 데이터를 먼저 console.log 해서 출력해보자

 

 

콘솔에 찍혀나온 두개의 오브젝트 위에서 마우스 오른쪽을 누르고 

store object as global varible을 누르면

이 object 데이터가 temp1에 저장된다

 

그럼 infoData가 필요할 때 temp1에 접근하면 될 것이다.

 

밑에있는 priceData 오브젝트도 마찬가지로 똑같이 해주면

temp2가 생성된다. (가격정보가 temp2에 들어감)

 

이 안에 있는 데이터를 사용하기 위해선 이 과정을 거쳐야 한다.

이 방식으로 하면 훨씬 빠르다.

 

다음으론, interface 두개를 생성한다.

interface InfoData {

}

interface PriceData {

}

개발자도구에 입력해보면

모든 key에 대한 array를 받게 되는데

 

Object.keys(temp1)

 

 

너무 많기 때문에 temp1이라는 Object.keys에 join을 해주도록 한다.

그럼 string을 받게 된다.

 

이것을 복사해서 infoData에 붙여넣는다.

맨앞 쉼표 하나를 드래그 후 ctrl+D 계속 누르면 오른쪽으로 쉼표가 하나씩 선택된다.

끝까지 선택해준다음
전체를 드래그 후 alt+shift+i 누르면 문자 맨 끝에 커서가 이동해 깜빡일 때에 :  ;를 전체적으로 써준다.

interface InfoData {
id:  ;
name:  ;
symbol:  ;
rank:  ;
is_new:  ;
is_active:  ;
type:  ;
logo:  ;
tags:  ;
team:  ;
description:  ;
message:  ;
open_source:  ;
started_at:  ;
development_status:  ;
hardware_wallet:  ;
proof_type:  ;
org_structure:  ;
hash_algorithm:  ;
links:  ;
links_extended:  ;
whitepaper:  ;
first_data_at:  ;
last_data_at:  ;
}

 

 

이렇게 만들어 준 다음 다시 개발자도구 콘솔로 가서

전체 타입을 출력해본다.

그다음 똑같은 방식으로

Object.values(temp1) 을 입력하여

values 만 받아와서

여기서 우리는 값(values) 의 타입을 가져와야 하기 때문에

 

Object.values(temp1).map(v => typeof v).join()

로 가져와준다.

그런 다음 join 해주면 아래와 같이

전체가 하나의 string으로 찍혀나오게 된다.

 

아까처럼 이것을 복사해주고

아무데나 붙여넣은 다음 쉼표제거

전체 키(keys) 드래그 후 alt+shift+i 해서 커서 옮겨준 다음

붙여넣기 하면 값(values) 들이 전체적으로 붙여넣기가 된다.

 

이렇게 :>

비교적 쉽게 인터페이스를 작성해주었다.

여기서 문제가 하나 있는데 타입이 object로 표시되는 것들이 보인다.

 

 

 

우선 맨 위 object로 표시되는 tags를 예로 들자면

이런식으로 배열형태로 고쳐주고

위로 가서 해당이름에 해당하는 인터페이스를 따로 만들어주어야 한다.

tags: []; // type이 object로 뜸. 이 경우 ITag라는 인터페이스를 만듦
// []; 라고 작성 후 위에서 인터페이스를 만들어 주어야 함.

 

인터페이스를 만들기 위해서 일단 개발자 도구로 다시 가서

tags 에 해당하는 곳으로 가서

탭을 열어보면

키 값이 또 뜨는데 그걸 

 

전체적으로 복사해서

새로 만들 ITag 인터페이스에  붙여넣어주고

 

// ITag 인터페이스
interface ITag {
  coin_counter: 10;
  ico_counter: 0;
  id: "segwit";
  name: "Segwit";
}

 

 

수작업으로 위에서부터 values에 number, number, string, string 이렇게 고쳐주면 된다.

object로 뜨는 경우 이런 작업을 거쳐야 하는 것이 유일한 결점이라 할 수 있다.

 

temp2에 담긴 것들도 똑같이 해주면 된다

 

 

완 :>

여기서 값이 object 인 친구 중에

quotes 안에는 우리가 필요한 데이터가 있기 때문에

아래와 같이 적어주도록 한다.

 quotes: {
    USD: {
      ath_date: string;
      ath_price: number;
      market_cap: number;
      market_cap_change_24h: number;
      percent_change_1h: number;
      percent_change_1y: number;
      percent_change_6h: number;
      percent_change_7d: number;
      percent_change_12h: number;
      percent_change_15m: number;
      percent_change_24h: number;
      percent_change_30d: number;
      percent_change_30m: number;
      percent_from_price_ath: number;
      price: number;
      volume_24h: number;
      volume_24h_change_24h: number;
    };
  };