Next.js 뽀개기 #3

📆221102

Next.js와 tailwindCSS 연습겸 복습겸 강의 듣기

🪐강의는 "개발하는 정대리"님의 Next.js 나만의 포트폴리오 만들기

• 챕터: 총 16개
• 강의시간 : 2:37:05

📌오늘의 목표
10. 로티 애니메이션 적용
11. Link 작업
12. 다크모드 지원 작업
13. 노션 API 설명

10. 로티 애니메이션 적용

lottiefiles에서 원하는 애니메이션을 json파일로 다운받는다.

난 이걸로 골랐다😙

public 폴더에 다운받은 json 파일을 넣어주고

react-rottie-player 설치방법 및 사용법을 확인한다.

설치 방법

npm install --save react-lottie-player

사용법

import React from 'react'

import Lottie from 'react-lottie-player'
// Alternatively:
// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'

import lottieJson from './my-lottie.json'

export default function Example() {
  return (
    <Lottie
      loop
      animationData={lottieJson}
      play
      style={{ width: 150, height: 150 }}
    />
  )
}

components/home 안에 animation.js 파일을 만들고 위 코드를 넣어준다.

components/home에 home 페이지 컨텐츠 내용을 담을 hero.js 컴포넌트를 만들어주고
index.js에서 컨텐츠 코드만 가져와서 animation 컴포넌트와 함께 넣어준다.

그럼 다음과 같이 로티 애니메이션을 추가할 수 있다. (gif 찍긴 귀찮아서 그냥 캡처했지만 애니메이션이 예쁘게 잘 돌아간다. 🙄)

11. Link 작업

이제 헤더에 있는 메뉴들을 눌렀을 때 해당 페이지로 이동할 수 있는 Link 작업을 한다.

import Link from "next/link";

우선 nextjs에서 link를 사용하기 위해 위처럼 import를 해준다.
그리고 메뉴에 link를 추가했는데 다음과 같은 에러가 떴다.

해결 방법을 찾아보니 버전업을 하거나 "legacyBehavior"를 추가하라고 한다.

Link 다음에 "legacyBehavior"를 추가하고 실행하자 link가 잘 적용된다.
이외에도 페이지 이동이 필요한 곳에 Link를 추가해준다.

++ (11/04) 생각해보니 a태그를 빼면 된다. a태그가 굳이 필요가 없네?

12. 다크모드 지원 작업

다크모드 기능 지원을 위해 next-themes를 설치한다.
(자세한 설명과 사용법은 위 주소를 참고하면 된다.)

npm install next-themes

pages/_app.js에 ThemeProvider를 import하고 코드를 다음과 같이 수정한다.

components폴더에 dark-mode-toggle-button.js를 만든다.
next-themes의 useTheme를 사용하기위해 import를 한다.

import { useTheme } from "next-themes";

const { theme, setTheme } = useTheme();

theme는 현재 값을 가져오는 역할(getter)을, setTheme는 현재 값을 바꾸는 역할(setter)을 한다.

button에 onClick이벤트를 추가하여 theme가 "dark"일땐 "light"로, "light"일땐 "dark"로 setTheme할 수 있도록 설정한다. 다크모드일때와 라이트모드일때 각각 다른 svg를 설정하고 각기 다른 tailwindCSS를 적용시킨다.

svg아이콘은 여기서 가져왔다.

이렇게 일일이 다크모드일때와 라이트모드일때를 설정하기가 번거로우니 globals.css에서 전역으로 설정해준다.

.bg-primary {
  @apply bg-white dark:bg-slate-800;
}

globals.css에 bg-primary라는 클래스를 만들고 필요한 곳에 적용한다.

bg-primary를 주고 싶은 div에 추가하면 된다.

다크모드 적용한 결과를 보면, 먼저 라이트 모드일때 화면은 다음과 같다.

다음으로 다크모드를 선택했을때이다.

13. 노션 API 설명

postman을 사용하여 API 개발 및 테스트를 진행하였다. 노션 API 사용은 노션 개발문서에서 확인할 수 있다. database의 post와 GET API를 생성하는 방법 역시 확인할 수 있다.

🍦 코멘트

Notion의 API를 사용하여 굳이 백엔드와 WYSIWYG를 직접 개발하거나, 에디터로 Markdown 문서를 작성하지 않아도 되는 게 무척 편리하고 신기했다. 노션 API를 활용해서 만들 수 있는 페이지도 많을 것 같다. 다음엔 이것저것 기획하면서 노션 API를 다양하게 사용해봐야지 😙
사실 강의를 들으면서 프로젝트를 진행하는 건 영상이 만들어진 시점과 내가 그 영상을 보는 시점 사이의 일어나는 수많은 버전업들,, 그로 인해 생기는 오류,, 등등 때문에 걱정부터 하게 되는데
그래도 아직까진 크게 문제되는 점이 없었고 있어도 댓글 혹은 구글링을 통해 해결할 수 있는 범위안이라서 다행이었다 ㅠ 이대로 잘끝났으면! 강의가 집중도 잘되고 구성도 재밌어서 즐겁게 듣는중이다 굿