손에 익는 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
  1. Next.js 손에 익히기

프로젝트 소개

이번 강의를 통해 배운 내용을 활용해볼 수 있는 예제를 준비해봤습니다. Open API로 제공되는 날씨 데이터를 이용해 날씨 앱을 만들겁니다.

페이지 구성

이번에 만들 날씨 앱은 2개의 페이지만을 제공합니다. 홈과 상세 페이지입니다.

홈에서는 날씨 조회가 가능한 지역 목록을 보여줍니다. 각 지역의 현재 날씨도 함께 보여주죠. 상세에서는 선택한 지역의 3일 예보를 보여줍니다. 홈과 상세는 서로 이동할 수 있어야 합니다. 데이터 페칭 동작을 살펴보기 위해 캐시를 비우는 버튼도 추가할 예정입니다.

정리하자면 아래와 같습니다.

홈 페이지

  • 지역별 현재 날씨 조회

  • 상세로 이동

  • 캐시 비우기

상세 페이지

  • 선택한 지역의 3일 예상 날씨 조회

  • 홈으로 이동

  • 캐시 비우기

이번에 배운 기능을 복습하기에 적합한 수준의 예제입니다. 그럼 이제, 프로젝트 환경 설정부터 서비스 배포까지 만들어볼까요?

PreviousNext.js 손에 익히기Next프로젝트 환경 설정

Last updated 1 year ago

1️