What to do?
설계한 코로나 요약 정보를 불러오는 API 함수부터 차근히 타입을 점진적으로 적용하는 과정입니다.
- outDir 활용
정적 웹사이트에서 TypeScript가 작동하게 하기 위해서는 컴파일 과정이 필요합니다.
프로젝트 초반에 tsconfig.json 에서 선언한 outDir 에 기록된 경로를 통해서 실제 웹환경을 구동하고 test할 수 있습니다.
outDir 경로에 선언된 built 폴더 아래 app.js가 구축되어 있기 때문에 동적으로 웹을 확인하면서 개발 환경 setting을 구성했습니다.
- Axios Api 함수 타입 정의
- 페이지 로드 시 초기화면
페이지를 처음 클릭하면 다음과 같이 크게 4가지 섹션으로 볼 수 있습니다.
1. Total Confirmed
2. Total Deaths
3. Total Recovered
4. Confirmed Cases by Country
이 정보들을 불러오기 위해서는 백엔드 URI를 통해 프론트에서 GET 방식으로 request시, response를 받아옵니다. 백엔드 REST API는 오픈소스를 활용
이때 페이지 로딩 시, payload 구조를 살펴봅시다.
API명은 summary로, 다음과 같은 구조의 payload가 날아옵니다. 해당 API의 결과값을 받아오는 메소드는 fetchCovidSummary() 로 선언했습니다 .
이때 return 값이 에러로 처리되는데 이 이유는 바로 (코드에는 이미 해결책이 적혀있지만) 기존에는 axios 함수에 대한 return 반환 타입을 지정해주지 않았기 때문입니다.
따라서 axios 함수에 대한 반환 타입을 어떻게 지정하는지, 해당 메소드에 마우스를 호버 시 다음과 같이 어떻게 지정을 해야하는지 VS 내에서 제공을 합니다.
- fetchCovidSummary() Response 구조
우선 날아오는 response 구조를 보고 각 key값에 대한 value가 어떤 데이터 타입인지 크게 봅니다.
- Countries : 객체를 담은 배열
- Date : 문자열
- Global : 객체
- ID : 문자열
- Message : 문자열
이제 타입을 관리하는 파일을 따로 만들어 타입 모듈화를 진행합니다.
interface CovidSummaryResponse {
Countries: Country[];
Date: string;
Global: Global;
Message: string;
}이때 Countries는 객체를 담은 배열이기 때문에 타입 정의를 depth를 한단계 더 들어가서 정의 해줘야 합니다.
"Countries": [
{
"ID": "29998943-b94b-4583-95d6-23d97943ea41",
"Country": "Afghanistan",
"CountryCode": "AF",
"Slug": "afghanistan",
"NewConfirmed": 27,
"TotalConfirmed": 207654,
"NewDeaths": 1,
"TotalDeaths": 7850,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2023-01-04T06:13:58.367Z",
"Premium": {}
},
]실제 response를 보며 해당 데이터 타입에 맞춰 타입을 정의할 수 있습니다.
interface Country {
ID: string;
Country: string;
CountryCode: string;
Slug: string;
NewConfirmed: number;
TotalConfirmed: number;
NewDeaths: number;
TotalDeaths: number;
NewRecovered: number;
TotalRecovered: number;
Premium: any;
}마찬가지로 Global도 객체로 response로 날아왔고, response 데이터 구조는 다음과 같습니다.
"Global": {
"NewConfirmed": 585788,
"TotalConfirmed": 659449743,
"NewDeaths": 2783,
"TotalDeaths": 6689185,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2023-01-04T06:13:58.367Z"
}이에 맞춰 타입을 정의를 하면 아래와 같이 정의합니다.
interface Global {
NewConfirmed: number;
TotalConfirmed: number;
NewDeaths: number;
TotalDeaths: number;
NewRecovered: number;
TotalRecovered: number;
}
이렇게 선언한 타입들을 정의한 모듈 파일에서 export를 하고, 실제 개발을 진행하는 app.ts 파일에는 export한 타입들을 import해주면 타입 정의는 끝나게 됩니다.
다음 포스팅에선 request 인자를 넘겨 response를 받아오는 API 함수에 대한 타입정의로 이어집니다.
