[크래프톤 정글 3기] 1/7(일) TIL

10:27 입실
정글피디아AI 기본 구조 완성시키고
오늘의 일기 AI 빠르게 만들어서 배포해보기

refresh token 재발급

현재는 서버에 GET요청으로 구현 후 헤더 authorization에 리프레시 토큰을 싫어서 보낸다.

하지만 rest 원칙에 따라 토큰 재발급은 post요청이 더 적절하다고 함.

useEffect async

useEffect에는 async를 직접 입력 못하고 하위에 별도의 함수를 둬야 함.

  useEffect(() => {
    const fetchTokenAndDecode = async () => {
      const accessToken = await getAccessTokenAndValidate();
      if (accessToken) {
        const tokenData = decodeToken(accessToken);
        setDecodedToken(tokenData);
      }
    };

    fetchTokenAndDecode();
  }, []);

로그인 리다이렉트

로그인 여부에 따른 리다이렉트에서 context 값이 렌더링 속도보다 느려서 자꾸 로그인 했는데도 로그인 창으로 이동함.
전역적으로 전체 로딩 상태를 관리하는 inLoading state를 만들어서 해결함.

아바타 컴포넌트

복잡했는데 컴포넌트도 빼니까 훨씬 유지보수가 좋다.

import Image from "next/image";

export default function Avatar({ src, alt, size = 600, obj }) {
  return (
    <div className="mt-4 mx-8 flex items-center">
      <div className="avatar">
        <div className="w-12 rounded-full">
          <Image src={src} alt={alt} width={size} height={size} />
        </div>
      </div>
      <div className={`${obj.author.type ? "" : "badge badge-primary"} mx-2`}>
        {obj.author.type ? "" : "AI"}
      </div>
      <p className="font-semibold">
        {obj.author.nickname ? obj.author.nickname : "익명"}
      </p>
      <p className="mx-2 text-xs text-gray-400">
        {obj.createdAt ? obj.createdAt.slice(0, 10) : ""}
      </p>
    </div>
  );
}

동적 url 가져오기

useRouter() 써도 렌더링 위치에 따라서 계속 오류 발생했는데
next 공식팀 유튜브 영상 보고 힌트 얻어서 해봤더니 됨.🥳
appRouter는 최신 기술이라서 GPT가 전혀 모름.

export default function EditPostPage({ params }: { params: { uuid: string } })

상대 경로 vs 절대 경로

<Link href={`/posts/${id}/edit`} className={`btn btn-xs btn-warning mr-2`}>
	수정
</Link>

상대 경로 사용 ():

이 방식은 현재 URL에 상대적인 경로를 사용합니다. 예를 들어, 현재 URL이 /posts라면, 이 링크는 /posts/{id}/edit으로 이동합니다.
상대 경로는 현재 위치에 따라 최종 URL이 달라집니다. 따라서 컴포넌트가 다양한 위치에서 재사용될 때 유용할 수 있습니다.
하지만 현재 URL이 예상과 다른 경로일 경우, 이 방식은 의도하지 않은 URL로 이동시킬 수 있습니다.
절대 경로 사용 ():

이 방식은 웹사이트의 루트로부터 시작하는 절대 경로를 사용합니다. 따라서 어느 위치에서 링크를 사용하든 항상 같은 목적지로 이동합니다.
절대 경로는 URL 구조가 더 명확하고 예측 가능하며, 애플리케이션 내 다른 부분과의 일관성을 유지하기 쉽습니다.
다만, 루트 경로나 기본 URL 구조가 변경될 경우, 이러한 링크들을 일일이 수정해야 할 수도 있습니다.
결론적으로, 절대 경로 방식이 일반적으로 더 선호되며, URL 구조의 일관성과 예측 가능성을 제공합니다. 특히 애플리케이션 내에서 특정 리소스에 대한 링크가 여러 곳에 걸쳐 사용될 경우, 절대 경로를 사용하는 것이 오류를 줄이고 유지 관리를 용이하게 할 수 있습니다.

따라서, 두 번째 방식인 를 사용하는 것이 더 바람직한 접근 방법으로 보입니다.

this 참조 주의

해당 클래스 내를 참조하는지 외부 의존성을 참조하는지 확인하기

    const user = await this.usersRepository.findOne({ where: { id: userId } });
    if (!user) {
      throw new NotFoundException(`User with ID ${userId} not found`);
    }

    const post = await this.findOne(id);
    if (!post) {
      throw new NotFoundException('Post not found');
    }