2024.03.18 TIL #Navigate_to #CSR_metadata #every

Navigate to만으로는 렌더링되지 않아요!

issue: Navigate 로 url은 바뀔 지 몰라도, 해당 경로에 대응하는 라우트가 설정되어 있지 않으면, 실제 라우팅이 되지 않아서, 렌더링이 되지 않는 오류가 있었다.

-> 해당 주소에 맞는 라우트를 찾지 못하면 Nothing 렌더링 (= 해당 주소에 맞는 라우트를 찾아야 해결된다)

Outlet : 해당 라우트에 매칭되는 애를 찾아서 하위 라우트들을 "렌더링"해주는 결정적인 역할!

Outlet의 역할은 두 가지로 나눌 수 있다.
1. 하위 라우트 렌더링 

- Outlet은 상위 라우트에 속한 하위 라우트들을 렌더링 한다. 일반적으로 사용되는 Outlet의 주된 역할

2. 경로에 따른 라우트 선택 

- Outlet은 현재 경로에 맞는 하위 라우트를 선택하여 렌더링한다.

 중첩된 라우트를 처리하고 하위 라우트 간의 관계를 설정할 때 사용된다.

 

 => 즉, Outlet은 
1) 상위 라우트에 속한 하위 라우트들을 렌더링하기도 하고

2) 현재 경로에 따라 적절한 하위 라우트를 선택하여 렌더링한다.

---

Next.js CSR 페이지에서 metadata 설정하는 법

 const metadata: Metadata = {
      title: "CRUD",
      description: "CRUD Todos",
    };

라는 metadata 객체가 있다고 한다면, 이거를 CSR 페이지에 넣는다면 다른 서버사이드렌더링 페이지와는 삽입 방법이 다르다.

CSR은 클라이언트 측의 렌더링이니까 SSR이 기본인 Next.js 에서는 useEffect 훅을 써줘야 클라이언트 측으로 실행권을 넘길 수 있기 때문이다. 이렇게 코드를 작성할 수 있다.

useEffect(() => {
    const metadata: Metadata = {
      title: "CRUD",
      description: "CRUD Todos",
    };

    document.title = metadata.title as string;
    const descriptionTag = document.querySelector('meta[name="description"]');
    if (descriptionTag) {
      descriptionTag.setAttribute("content", metadata.description as string);
    }
  }, []);

1. document.querySelector('meta[name="description"]');
: CSS로  name=description을 가지고 있는 meta 태그를 가지고 오는 로직이다.

 여기서 의문이었던 것은 기본적으로 HTML문서에 <meta name=description ~~~>이라는 태그가 보통 있는지 몰랐었는데, 보통은 있다고 한다. 그래도 혹시 없을 수 있으니

2.  if (descriptionTag) {
      descriptionTag.setAttribute("content", metadata.description as string);
    }

: 있다면, 그 태그를 마저 꾸며준다. content라는 속성에 우리의 metadata 객체의 description 문자열이 들어가도록.

---

evey 함수에서 array가 빈 배열일 경우, 항상 참을 반환한다.

const array1 = [];
const array2 = [1, 2, 3];

// 빈 배열에 대한 every 함수 호출
const result1 = array1.every(item => item > 0);
console.log(result1); // 출력: true

// 비어 있지 않은 배열에 대한 every 함수 호출
const result2 = array2.every(item => item > 0);
console.log(result2); // 출력: false