[React] TypeScript로 날씨 앱 만들기

흩날리는추억·2024년 3월 29일

✔️ 들어가기 전

최근 프론트엔드에 대해 이론적인 것만 공부하고 직접적으로 코딩 하지 않았습니다. 개발자로서 실력을 빠르게 늘릴 수 있는 방법은 직접 개발하는 것인데 이를 놓치고 있었습니다. 그래서 간단하게 날씨 앱을 제작하였고 그 과정 속에서 배운 것과 느낀점을 기록하기 위해 이 글을 쓰게 되었습니다.

사용 기술

vite (프로젝트 구성)
React
TypeScript
Tailwind Css

api

OpenWeather의 'Current weather data' api를 사용하였습니다.
=> OpenWeather docs

🔎 날씨 앱 살펴보기

폴더 구조

/src
  ├ /api
  │   └ apiUtils.ts
  ├ /components
  │   └ Container.tsx
  │   └ Detail.tsx
  │   └ DetailItem.tsx
  │   └ ErrorPage.tsx
  │   └ Main.tsx
  │   └ SearchInput.ts
  ├ /types
  │   └ WeaherType.ts
  └ App.tsx
  └ main.tsx

기본 화면

초기 화면에서는 단순하게 검색창만 표출

검색 화면

검색(도시명) 후 그 도시의 날씨 정보 표출

에러 화면

초기 화면에서 잘못된 검색어로 검색 시

검색 후 잘못된 검색어로 검색 시

🔎 코드 살펴보기

WeaherType.ts

TypeScript를 사용하면서 사용하는 데이터들의 type 지정이 중요하다 생각했습니다. 특히 날씨 앱의 경우 응답 객체를 사용하는 것이 시작이자 끝이기 때문입니다.

apiUtils.ts

OpenWeatherMap API를 사용하여 지정된 위치의 날씨 데이터를 가져오는 비동기 함수입니다. 응답으로 오는 객체가 크고 프로퍼티가 많아 지금 날씨 앱에 필요한 객체만을 가져오기 위해 노력했습니다.

Detail.tsx

지역 날씨에 따라 'rain', 'snow'에 관한 응답 객체가 없을 수 있기 때문에 아래와 같이 코딩했습니다.

🔑 배운점

Partial

날씨 앱을 만들면서 타입 지정에 문제가 있었습니다.

OpenWeatherMap API를 사용해 응답 받은 객체가 크고 복잡
응답 받은 객체의 일부분만 필요한 component가 존재

문제를 해결하기 위한 찾은 방법은 TypeScript에서 제공하는 유틸리티 타입 중 하나인 Partial입니다. Partial은 제네릭 타입 T에 대한 모든 프로퍼티를 옵셔널로 만들어주는 타입입니다. 이 뜻은 위에서 말했던 'rain'이나 'snow' 같이 상황에 따라 없을 수 있는 프로퍼티의 경우 누락이 되어도 타입 검사가 통과될 수 있다는 뜻입니다.

또한 Partial을 사용하면 객체의 일부 프로퍼티만 필요한 경우에도 해당 객체의 타입을 정의하고 여러 곳에서 사용할 수 있습니다.

TypeScript 환경에서 axios 사용하기

TypeScript 환경에서 axios를 사용하는 것이 처음이라 이에 대해 많은 것을 배울 수 있었습니다. 예를 들면 error 객체의 경우 그냥 사용할 수 없고 axios에서는 isAxiosError라는 메서드를 사용하여 주어진 인자가 axios에서 발생한 error인지 판별할 수 있었습니다.

✏️ 마무리

날씨 앱을 제작하면서 대부분 혼자서 구현할 수 있었지만 TypeScript를 사용하면서 생긴 문제들의 경우 경험한 적이 없어 공부하며 해결했습니다. 또한 Tailwind Css의 경우도 모르는 부분이 많아 생각보다 시간이 오래 걸렸습니다. 이번 기회를 통해 제가 부족한 부분이 무엇인지 알게되었고 앞으로의 공부 방향에 대해 좋은 생각을 할 수 있는 시간이 되었습니다.