issue3 ) menu파트만 csr 방식으로 병렬 로딩시키기

YoonJieut commented 7 months ago

생각보다 쉽게 해결되지 않는다.

메뉴 기능 구현 중 useRouter를 사용할 수 없는 문제가 발생

시도1 - window.location.href를 활용해서 하기 위해선 client -side가 필요한 모양 시도2 - 병렬 로딩 작성법 실수 : 자식 디렉토리 중 "@디렉토리이름"으로 작동하지 않는 문제가 발생했었다. 파라미터와 호출 방식을 default.tsx를 사용하지 않는 방식을 사용(호출시 컴포넌트로 불러옴) -> default가 필요한 것은 어떤 것이었는지 아직 감이 안잡힌다.

나중에 할 일

[x] 현재 주소를 기반으로 metaData를 참고하여 이름이 동적으로 변하는 기능
[x] 현재 주소를 기반으로 현재 index를 유추하여 버튼 기능을 추가하기

YoonJieut commented 7 months ago

모두 갈아 엎어버렸다. 처음부터 다시 해보자.

YoonJieut commented 7 months ago

[ ] 하나의 컴포넌트에 모든 기능 때려 넣기
[ ] 컴포넌트 분리 과정

YoonJieut commented 7 months ago

// todo1 : 현재의 url을 참고하여 현재 메뉴를 표시한다. // 1. 현재 url에서 "/"을 기준으로 맨 뒤의 문자열을 가져온다. // 2. 가져온 문자열을 컴포넌트에 업데이트 한다. // todo2 : 이전, 다음 버튼을 클릭하면 이전, 다음 메뉴로 이동한다. // 1. 가져온 문자열을 기준으로 현재 메뉴의 index를 반환해본다. // 2. portfolioMetaData에 맞춰서 이전, 다음 메뉴로 리디렉션한다. // 3. 맨 뒤로 가면 처음으로 돌아오는 로직을 추가한다. (0에서 뒤로 가면 마지막으로 간다 그리고 마지막에서 앞으로 가면 처음으로 간다.)

todo, 슈도 코드 셋업

YoonJieut commented 7 months ago

Feat : 삼항 조건문을 통한 루프 기능 구현

그러나 버튼을 누르면 리렌더링 될 필요는 없지 않을까? 너무 과한 기능인 것 같다. 나는 랜더링 될 때만 상태가 바뀌면 될 것 같다.

const MenuComp = () => {
  const [url, setUrl] = useState("");
  const [currentMenu, setCurrentMenu] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);

  // 현재 url을 가져온다.
  useEffect(() => {
    console.log("MenuComp useEffect");
    setUrl(window.location.href);
  }, []);

  useEffect(() => {
    console.log("MenuComp useEffect2");
    const param = urlParamMaker(url);
    setCurrentMenu(param as string); // 타입에러 : 타입을 string으로 강제로 변환했다.

    // 현재 param을 기준으로 현재 메뉴의 index를 반환한다.
    const nowIndex = portfolioMetaData.findIndex(
      (data) => data.name.toLowerCase() === param
    );
    // 찾은 url이 없을 때, 오류 처리
    if (nowIndex === -1) {
      setCurrentIndex(0);
      return;
    }
    console.log(nowIndex);
    setCurrentIndex(nowIndex);
  }, [url]);

  const handlePrevClick = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? portfolioMetaData.length - 1 : prevIndex - 1
    );
  };

  const handleNextClick = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === portfolioMetaData.length - 1 ? 0 : prevIndex + 1
    );
    // window.location.href = portfolioMetaData[currentIndex].path;
  };

  return (
    <>
      <div className="w-full flex justify-between mt-20">
        <button onClick={handlePrevClick}>이전 페이지</button>
        <button onClick={handleNextClick}>다음 페이지</button>
      </div>
      <H1 text={currentMenu} />
      <div>현재 인덱스는? {currentIndex}</div>
      <div>length-1? {portfolioMetaData.length - 1}</div>
      <div>{portfolioMetaData[currentIndex].path}</div>
    </>
  );
};
export default MenuComp;

YoonJieut commented 7 months ago

완료된 작업

import { usePathname } from "next/navigation";
useEffect 및 React 관련 작성법
커스텀훅을 이용한 리펙토링

아 이렇게 하는 것이었다. 내가 만든 코드를 공식 홈페이지를 통한 것으로 다시 바꿔보고, 원리 파악해보고, custom훅으로 다시 정리까지 깔끔하게 가독성을 높인다.

const MenuComp = () => {
  const { currentMenu, prevIndex, nextIndex } = useMenuNavigation();

  return (
    <>
      <div className="w-full flex justify-between mt-20">
        <Link href={portfolioMetaData[prevIndex].path}>이전 페이지</Link>
        <Link href={portfolioMetaData[nextIndex].path}>다음 페이지</Link>
      </div>
      <H1 text={currentMenu} />
    </>
  );
};

export default MenuComp;

YoonJieut commented 7 months ago

pf 상세 페이지 메뉴 구현 완료

YoonJieut / yoonjieutblog

issue3 ) menu파트만 csr 방식으로 병렬 로딩시키기 #4

나중에 할 일