[TIL] Day 67 foreign key 설정 이유, Next.js의 최적화 방법

2024.01.09 화

 

- 데이터들마다 관계를 형성하는 foreign key를 꼭 사용해야 할까요?

SQL의 경우 관계가 있을 때 foreign key를 설정합니다. 관계된 데이터가 삭제되어 에러가 발생할 위험을 줄이기 때문입니다.

 

 

- foreign key 설정해야 하는 이유

1. 데이터의 무결성 보장 ⇒ 중복 없앰
2. 관계를 명확히 정의 ⇒ 어떤 데이터가 연결되어 있는지 바로 파악 가능
3. 잘못된 데이터 입력을 방지 ⇒ 오타 방지
다만 성능 및 특별한 이유를 위해 데이터 중복을 허용하는 경우는 foreign key를 설정하지 않는 경우도 있습니다.

 

 

- 구글은 소셜로그인 데이터 들어올때 새로고침 안되나요? 계속 새로고침 되는데.. preventdefault해도 안되네요

데이터는 들어오는데 새로고침이 애매하게 돼서
다 끝나고 데이터 받아오는 형식으로 FIX

 

 

- 주소에 따라 선택된 대상 CSS 적용

<Link
	className={`${pathname.startsWith("/reservation") ? "font-bold" : ""}`}
	href="/reservation"
>
	RESERVATION
</Link>

 

 

 

- 첫 페이지 예외처리

bev는 문제가 없지만 build 시 에러

// 기존코드
"use client";

import { useRouter } from "next/navigation";

export default function Home() {
  const router = useRouter();
  router.replace("about");
  return null;
}

 

// 변경된 코드
export default function Home() {
  return null;
}

// next.config.js 에서 설정
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirents() {
    return [
      {
        source: "/",
        destination: "/about",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

 

 

 

- Next.js의 최적화 방법

Image LCD
서버에서 렌더링 처리
CSR과 SSR(더 정확히는 sever component)의 차이
 - fetch 기능이 더 강화되어 fetch 사용 권장
 - 렌더링을 클라이언트 사이드에서 하냐, 서버 사이드에서 하냐에 따른 차이
 - 서버 사이드에서 먼저 만들어서 불러오면 매우 빠르게 로딩되어 UX가 좋다
        
SSG로 확장. 변하지 않는 값을 활용한 디테일 페이지 등은 미리 만들어 build 하자!

import { FilmType } from "@/types";
import Image from "next/image";
import React from "react";

const TestFilmsPage = async () => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/films`);
  const films: FilmType[] = await response.json();

  return (
    <div className="w-full mx-[60px]">
      {Number(films?.length) <= 0 ? (
        <div>정보가 존재하지 않습니다..!</div>
      ) : (
        <section className="flex justify-center flex-wrap">
          {films?.map((film) => {
            return (
              <div className="w-1/2 h-[230px] p-[5px]" key={film.id}>
                <div className="bg-red-100 w-full h-full relative">
                  <Image src={film.imageUrl} alt={film.name} fill />
                </div>
              </div>
            );
          })}
        </section>
      )}
    </div>
  );
};

export default TestFilmsPage;

 

 

 

- 클라이언트와 서버 사이드 충돌

useRouter보다 Link를 사용하길 권장
서버 사이드에서는 useRouter 사용 불가하다
디테일 페이지에서 generateStaticParams() 사용

import { FilmType } from "@/types";
import React from "react";

function SlugPage() {
  console.log("testttt");
  return <div>SlugPage</div>;
}

export default SlugPage;

export async function generateStaticParams() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/films`);
  const films: FilmType[] = await response.json();

  return films.map((film) => ({
    slug: String(film.id),
  }));
}

 

터미널에 해당 내용 확인

└ ● /testFilms/[slug]

├ /testFilms/1

├ /testFilms/2

├ /testFilms/3

└ /testFilms/4

 

 

 

dev는 SSR, SSG 생략된다