react lnb이슈기록

미마모코딩·2022년 11월 20일
0

팀 프로젝트 경험

목록 보기
4/6
post-thumbnail

이전에 포스팅한 lnb기록에서 지금까지 끙끙앓던 이슈를 해결했다.

문제는 간단하게

export const data: MenuList = [
  {
    title: "회사소개",
    depth1: "info",
    href: "/info",
    list: [
      { title: "대표인사말", href: "/info" },
      { title: "회사연혁", href: "/info/history" },
      { title: "사회적기업", href: "/info/se" },
      { title: "오시는길", href: "/info/map" }
    ]
  },
  {
    title: "돌봄서비스신청",
    depth1: "service",
    href: "/service",
    list: [
      { title: "돌봄서비스안내", href: "/service/info" },
      { title: "돌봄서비스신청", href: "/service/service" },
      { title: "이용요금안내", href: "/service/price" },
      { title: "자주하는질문", href: "/service/questions" },
      { title: "돌봄이용후기", href: "/service/review_babysitter" }
    ]
  },
  {
    title: "교육안내",
    depth1: "education",
    href: "/education/babysitter",
    list: [
      { title: "아동양육지도사", href: "/education/babysitter" },
      { title: "놀이학습지도사", href: "/education/play" },
      { title: "보육사 지원안내", href: "/education/job" },
      { title: "보수교육", href: "/education/additional_education" },
      { title: "교육안내", href: "/education/educational_guidance" }
    ]
  },
  {
    title: "사회서비스",
    depth1: "social_service",
    href: "/social_service/current",
    list: [
      { title: "사회서비스 현황", href: "/social_service/current" },
      { title: "보육서비스와 사회적기업", href: "/education/play" }
    ]
  },
  {
    title: "커뮤니티",
    depth1: "community",
    href: "/community/notice",
    list: [
      { title: "공지사항", href: "/community/notice" },
      { title: "육아정보", href: "/community/parenting_information" },
      { title: "포토갤러리", href: "/community/gallery" },
      { title: "질문과답변", href: "/community/qna" }
    ]
  }
]

위와같은 dummy데이터에서 href 부분을 유심하게 보길 바란다.

 const router = useRouter()
 const asPath = router.asPath
 
  const menuTitle = menuList.filter((menuItem) =>
    menuItem.href === asPath ? menuItem.title : null
  )[0].title

중간과정은 생략하고 문제점에 대해서 먼저 간단하게 정리하겠다.

menuTitle은 더미데이터의 href와 aspath를 비교해 일치하면 메뉴아이템 메뉴리스트의 0번째 인덱스의 title을 제공하는 기능을 맡고있다.

하지만 lnb를 설계하면서 만든 href에는 간단한 lnb url밖에없었고

내가 만든 커뮤니티 게시판으로 가게되면 뎁스가 깊어지기에 "/community/qna/create" <<

이런식으로 깊어지기에 dummy의 href와 asPath가 일치하지 않아 title을 리턴 할 수 없게되었다.

이러한 이슈를 생각하지 못했기에 일차원적으로 dummy의 url을 분석하고 전부 수정했었다.

이렇게 되면 페이지 뎁스가 길어지는 순간에 항상 수정해야해서 매우 번거로운 작업이 될 것이라 생각했다.

그래서 생각한게 먼저 url의 첫번째 즉 base url을 컷팅하고 내가 정해둔 dummy의 href부분까지만 읽게 만든것이다.

코드로 해설하자면

const asPathArray = asPath.split("/") asPath를 배열로 만든다.
["",community,qna]<<이런식으로나옴
create페이지라면?
["",community,qna,create]<로 나올것이다.

const currentMenuAndDetailMenuArray = asPathArray.slice(1, 3)
위의 배열에서 1번전 index를 삭제하고 3번째전까지 즉
["",community,qna,create]이라면?
[community,qna]를 남기겠단 소리이다.

const currentMenuAndDetailMenu = "".concat("/" + currentMenuAndDetailMenuArray.join("/"))

그리고 위오같이 빈문자열인 ""에 concat을 사용하여 문자열을 더할것인데 url이니 /를 붙여주고 위 배열을 join("/")으로 붙여주어 /commuity/qna와 같은 값을 항상 도출 할 수 있게 되었다.

그래서 asPath를 비교하는게 아닌 저렇게 항상 가공된 데이터 자체랑 href를 비교하기때문에 title은 아무리 path가 길어져도 찾을 수 있게되었다.

이렇게 분기처리를 알고리즘처럼 해본적이 많지는 않아 적잖이 시간이 걸렸다.

하지만 어떻게 문제를 해결해나가야하지?에대한 고민을 집중해서 하다보면 해결 못할 문제는 없다고 생각한다.

0개의 댓글