손에 익는 Next.js
Part 1 - 공식 문서 훑어보기
Part 1 - 공식 문서 훑어보기
  • 왜 Next.js를 배우는가?
    • 1️Next.js가 세상에 있기까지
    • 2️Next.js를 배우는 이유
  • Next.js 기본 배우기
    • 1️Next.js는 무엇인가?
    • 2️Next.js 13
    • 3️서버 컴포넌트
    • 4️라우팅
    • 5️페이지 간 이동
    • 6️스타일링
    • 7️데이터 페칭
    • 8️메타데이터
  • Next.js 손에 익히기
    • 1️프로젝트 소개
    • 2️프로젝트 환경 설정
    • 3️페이지 구성하기
    • 4️페이지 간 이동하기
    • 5️페이지 스타일 입히기
    • 6️날씨 API 사용하기
    • 7️날씨 데이터 조회하기
    • 8️메타데이터 다루기
    • 9️서비스 배포하기
  • 마치며
    • *️후속 강의에 대하여
Powered by GitBook
On this page
  • 서비스 가입하기
  • API 호출해보기
  • API 데이터 타입 정의하기
  1. Next.js 손에 익히기

날씨 API 사용하기

Previous페이지 스타일 입히기Next날씨 데이터 조회하기

Last updated 1 year ago

데이터 페칭을 연습하기 위해 Open API로 제공되는 API를 사용합니다. 여러 서비스가 존재하지만 이번 강의에서는 Weather API를 사용합니다.

서비스 가입하기

우선 Weather API 사이트()로 가서 회원가입을 합니다. 이메일 주소와 비밀번호를 입력하면 입력한 이메일로 인증 메일이 옵니다. 인증을 마친 뒤 로그인을 하면 API Key를 확인할 수 있는 대시보드로 이동합니다.

API Key 옆에 있는 Copy 버튼을 클릭해 Key를 복사합니다.

API 호출해보기

좌측에 있는 메뉴 중 API Explorer 메뉴를 클릭합니다. 이 페이지에서 API를 호출해볼 수 있습니다.

조금 전에 복사한 API Key를 가장 상단에 채워넣습니다. 나머지는 그대로 둔채로 Show Response 버튼을 클릭합니다. 별다른 설정을 바꾸지 않았다면 현재 런던의 날씨 데이터가 조회됩니다. (/v1/current.json)

Parameter인 q 값을 변경해 서울(Seoul) 날씨도 조회해봅시다.

현재 날씨가 아닌 예보를 확인하기 위해선 Forecast 탭을 클릭해 마찬가지로 Show Response 버튼을 클릭해보면 됩니다. (/v1/forecast.json)

다음 단계를 위해 결과로 나온 JSON 데이터를 복사해둡니다.

API 데이터 타입 정의하기

API 응답 값으로 만들어진 값은 JSON 형식으로 나옵니다. 이 데이터를 타입으로 직접 지정하는 건 번거로운 일이죠. JSON을 TypeScript로 치환해주는 서비스를 이용해봅시다.

위의 링크를 클릭해 사이트에 접속하면 좌측에는 JSON 우측에는 TypeScript가 정의되어 있는 것을 확인하실 수 있습니다. 앞서 조회한 날씨 데이터를 좌측에 옮겨 넣습니다. 우측에 날씨 데이터 타입이 정의되었습니다. 이걸 코드로 옮겨와 이름을 정해주겠습니다.

현재 날씨 데이터(/v1/current.json)를 CurrentWeatherResponse라고 타입을 정의합니다. 예보 데이터(/v1/forecast.json)를 ForecastResponse라고 정의합니다.

다음 장에서 실제 데이터를 조회해보겠습니다.

6️
https://www.weatherapi.com/
https://transform.tools/json-to-typescript