23.02.03) Next js 기초를 복습 및 후발대 강의를 배운 67일차

#노마드코더 NextJS

 

Recap

라이브러리와 프레임워크의 차이점

프레임워크는 내 코드를 호출한다.  라이브러리는 내가 호출하는 것.

 

React와 Next의 차이

create-react-app에서는 모든 게 클라이언트 사이드 렌더링(CSR)
nextjs에선 유저가 거기 가기도 전에 페이지가 미리 만들어짐(pre render). 그래서 유저가 NextJS에 의해 만들어진 페이지에 갈 때, 컨포넌트의 초기 상태는 자동적으로 HTML로 렌더링된 상태가 됨.

 

Rehydration 단계

NextJS가 백엔드상에서 ReactJS를 돌리고 있고, NextJS가 페이지를 pre-generate(사전생성) 할 거고 그건 HTML 페이지가 되고 유저가 웹사에트에 들어가면 HTML을 보게 됨. 하지만 유저가 모든 자바스크립트를 다운로드 한 후에, ReactJS가 다시 주도권을 가져와서 모든 게 일반적인 ReactJS처럼 동작하는 것.

그래서 useState같은 ReactJS의 모든 걸 사용할 수 있다.유저에게 그 HTML을 보여줄 거고,그 후에 ReactJS는 프론트엔드에 나타날 거고 ReactJS가 주도권을 갖게되는것.

 

module css
- test.module.css ( .hello {} )

import styles from './test.module.css'

custom

커스터마이즈하길 원한다면, NextJS가 페이지를 렌더링하기 위한 템플릿을 설정하길 원한다면 스스로 _app.js 파일을 정의하면 됨.

복붙할 필요가 없다는 건 좋은 생각이지만, 페이지가 다 NavBar를 갖지 않아서 좋은 방법이 아닐 수도 있음.

import '../styles/globals.css';
import NavBar from '../components/NavBar';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

Layouts

custom app component를 사용할 때 쓰는 것.사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴
components 안에 js 파일을 만들고 ->Layout.js 파일 안에 children이라는 prop를 전달해준다.->_app.js 파일 안에 Layout으로 안에 있는 것들을 감싸준다.

 

 

 

//Layout.js
import NavBar from "./NavBar";

export default function Layout({ children }) {
  return (
    <>
      <NavBar />
      <div>{children}</div>
    </>
  );
}
//app.js
import Layout from "../components/Layout";
import "../styles/globals.css";

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

 

NextJS의 특징은 패키지를 이용할 수 있다. create react app 으로 작업했다면 ex) react helmet 같은 것을 다운로드해야하지만 Next.js 안에 들어있는 요소(Head)를 이용할 수 있다는 것.

public에 있는 파일 찾아오기 :" /"하고 파일 이름만 써주면 된다. 상대 경로로 들어갈 필요가 없음.

   <img src="/vercel.svg" alt="" />

 

Fetching Date

 

The Movie DB API 키 확인
https://www.themoviedb.org/settings/api

Get Popular (Movies)
`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
https://developers.themoviedb.org/3/movies/get-popular-movies

import { useEffect, useState } from "react";
import Seo from "../components/Seo";

const API_KEY = "10923b261ba94d897ac6b81148314a3f";

export default function Home() {
  const [movies, setMovies] = useState();
  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  return (
    <div>
      <Seo title="Home" />
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

 

Redirect and Rewrite 

 

API KEY를 숨겨야 할 때

 .env file을 생성하고 자신의 themoviedb.org API를 입력한다.
1. .env file 을 만든다.
2. 안에다 'API_KEY = [자신의 API]' 를 입력한다.
ex) API_KEY = 1234567gogo
그러면 Source Code 에 있는
const API_KEY = process.env.API_KEY;
부분이 .env file 에 있는 API_KEY를 가져다 사용하면서 데이터를 끌어오게 됨.

//.gitgnore
# vercel
.vercel
.env

//config.js
const API_KEY = process.env.API_KEY;

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        // redirection이 permanent(영구적)인지 아닌지에 따라서, 브라우저나 검색엔진이 이 정보를 기억하는지 여부가 결정됨.
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};
//index.js
export  default function Home() {
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`/api/movies`)).json();
      setMovies(results);
    })();
  }, [])