프로젝트 배운 점 모음

hodu-gwaja·2023년 3월 29일

next/Link

링크를 커스텀하다가 오류가 났다.

https://nextjs.org/docs/api-reference/next/link

Link 아래에 a를 넣었어야했던 12와 달리 13에서는 생략해도 되는데,
Link에 스타일링을 하기 위해서

legacyBehavior prop을 사용하였다.
이 방법은 이전 버전과의 호환성을 유지하면서<a>요소를 계속 사용할 수 있습니다.

이 오류의 문제를 해결하기 위해 상당히 시간을 오래썼다는 점이 아쉽고 작은 문제지만 기록하겠다.

  
<Link href="/aboutme" className="mr-5 hover:text-gray-900">
연락하기
</Link>
<Link href="/aboutme" >
<a className="mr-5 hover:text-gray-900">연락하기</a>
</Link>
<Link href="/aboutme" legacyBehavior>
<a className="mr-5 hover:text-gray-900">연락하기</a>
</Link>

첫번째 2번째 둘다 실패하였고, 마지막 3 번째에 성공하였다.

HERO ICON

react icon, google icon 등등에 이어서
hero icon을 사용해보았다.

https://heroicons.com/
상당히 편리하다.

다크모드 설정

"next-themes"를 npm에 검색하여 설치하고


    <ThemeProvider attribute="class">
     <Component {...pageProps} />
   </ThemeProvider>

      const { theme, setTheme } = useTheme();
      
         onClick={() => setTheme(theme === "dark" ? "light" : "dark")}

를 사용하면 되는데,

로 하면된다.
거기다가 tailwind로 연계해서 사용하고 싶으면

tailwind.config.js 에 darkMode: "class", 작성하면 된다.

이후 글로벌 css를 이용하여

  footer {
  @apply text-gray-600 dark:text-white
    bg-gray-100 dark:bg-slate-600/20;
}

이런 방식으로 설정 가능하다

getStaticProps 타입

getStaticProps(context: GetStaticPropsContext)

TypeScript를 호환하는 곳은 대부분이 특정 타입을 같이 가지고 있다.

데이터 다루는 방법

포스트맨과 jsonformatter를 사용해서 api를 관리한다.

https://jsonformatter.curiousconcept.com/#

먼저 포스트맨으로 데이터를 받아오고

데이터를 입력받은 뒤 Process로 보내준다.

그럼 json 한 값을 받아올 수 있다.

평소에는
console.log로 찍었는데 효율적이었다.

props 주의할 점

자식에게 props으로 내려줄 때 값을 객체로 받기때문에 객체 표시에 유의하자.

객체를 선언한 뒤 data값을 받아와야했는데
data로 선언해서 초보적인 실수를 해버렸다.

image를 가져올 때 도메인을 설정해줘야한다.

image를 불러오고 src로 넣어주면 해당 오류가 뜨는데 해당 도메인을 설정을 해줘야한다.
아마존이면 아마존 상황에 맞추어서 확인해서 넣어줘야한다.

or문 활용하기

 const imgSrc = data.cover.file?.url || data.cover.external.url;

1번이 안되면 2번이 들어가도록 설정한다.

매번 공부하지만 헷갈려서 다시 정리한다.

next/image ->next/legacy/image

이전버전과 호환되는 image를 사용하려면 후자를 사용하여야한다.
후자와 똑같이 사용할 수 있다.
legacy는 참고로 유산이란 뜻이다.

https://nextjs.org/docs/api-reference/next/legacy/image

효율적인 grid 활용


<div className="gird grid-cols-1 md:grid-cols-2">

날짜 계산 알고리즘

start와 end가 "2022-04-22" 이 양식으로 들어온다.

  const calculatedPeriod = (start: string, end: string): number => {
  const startDateStringArray: string[] = start.split("-");
  const endDateStringArray: string[] = end.split("-");

  const startDate: Date = new Date(
    Number(startDateStringArray[0]),
    Number(startDateStringArray[1]) - 1,
    Number(startDateStringArray[2])
  );

  const endDate: Date = new Date(
    Number(endDateStringArray[0]),
    Number(endDateStringArray[1]) - 1,
    Number(endDateStringArray[2])
  );

  const diffInMs: number = Math.abs(endDate.getTime() - startDate.getTime());
  const result: number = diffInMs / (1000 * 60 * 60 * 24);

  console.log(`기간 : ${result} ${diffInMs}`);
  return result;
};