71 router-link, redirect 리서치

source: categories/study/vue-experiance/vue-experiance_9-71.md

  • ㅍㅌㄱㄹㅈ 탭메뉴 이동시 활성화 탭 유지 리서치
  • router-link API 리서치
  • redirect 리서치
  • 현재 router 구조 한계 파악
  • 해당 이슈 해결하려면 beforeEnter 훅 사용 필요
  • 하지만 beforeEnter, redirect 변수 전달 방법 알아내지 못함
  • redirect 여러번 호출 현상 - 리서치해보니 정상이라는 듯
  • 다른 해결책 리서치 필요

71.1 keep-alive, component 태그를 사용한 구조로 변경해야겠음

  • 기존 구조를 유지하려고 했는데 방법이 없음

  • 좀 뜯어 고치더라도 keep-alive, component로 구조를 다시 만드는 것이 좋을 듯

  • watch, $route, dynamic redirect, beforeEnter 등등 활용해보려 했지만..
  • 경로가 겹침으로 인해 재호출이 발생함 : 무한 재호출은 아니더라도 계속 이러한 문제가 발생..

71.2 리서치 결과 정리

71.2.1 GNB 메뉴 ( a / b / c ) 이동 시 선택된 모듈이 변경되지 않도록 개선 요청

  • 결론
    • 정확한 리소스는 파악 안되지만 오래 걸릴 것으로 예상
    • 해당 리소스만 1달 내내 처리해도 할 수 있을지 의문
  • 현재 상황
    • UI상으론 Tab 메뉴이지만 Router로 처리
      • Redirect, children 활용
    • 아래와 같은 구조
    • 때문에 제일 하위 컴포넌트 (텝 이동, 하지만 실제론 라우터 이동) 이동임에도 불구하고 url 이동이라 상위에서 하위로 주소가 찾아들어감 > 이 과정에서 하위에 속한 redirect 함수들 계속 호출
    • 이 지라 이슈를 해결하기 위해선 이러한 상황 속에서 redirect를 dynamic하게 만들어야함
  • 문제
    • 현재 상황에서 redirect를 dynamic하게 만들 수 있는 방법이 없음
    • 훅(beforeEnter), 해당 컴포넌트에서 watch($route)활용 등 사용해봤지만 불가능
  • 근본적인 의문
    • 텝메뉴 구조에서 router로 이동하는 방식이 맞는가?
      • 텝메뉴 구조는 router 사용 X.
      • Component, keep-alive 태그 활용하는 것이 확장성, 커스텀면에서 훨씬 좋을 것이라고 생각
    • 현재 Redirect 사용방식이 맞는가?
      • 현재는 처음 어떤 페이지가 보일지 default component를 정해주는 느낌으로 사용중
      • redirect는 계정 로그인 연동시 (ex> 인프런 깃헙계정 로그인 등), 또는 잘못 들어왔을시 메인 페이지로.. 이런 경우에만 쓰는 것이 맞다고 생각
  • 결론
    • 구조 자체를 수정해야됨
    • 하지만 이때 또 문제가 있음
      • 각 컴포넌트별 $route 데이터를 활용해 처리한 로직에 대해 확인 및 수정
      • 현재 티팩 페이지 설계를 보면 라우터에 해당 페이지의 높이를 auto로 잡는지 아니면 100%로 하는지 설정
        • 이 부분도 component 태그에 어떤 컴포넌트가 불러와지느냐에 따라 달라지도록 수정해야됨
    • 전체적인 구조를 수정하면서 각 컴포넌트들의 로직도 수정해야됨 (시간 오래걸림)
  • main (/service/:serviceId)
  • Redirect > home
    • home ( home )
    • Part ( part/:id )
    • Redirect > StatusView
      • StatusView ( status )
      • Redirect > WorkStatus
        • WorkStatus ( work )
        • AlarmStatus ( alarm )
        • DeviceStatus ( info )
        • DocumentStatus ( doc )
        • DeliveryStatus ( delivery )
        • TransitStatus ( transport )
        • Redirect > TransitControl
          • TransitControl ( control )
          • TransitCurrentStatus ( status )
      • ListView ( list )
      • Redirect > WorkList
        • WorkList ( work )
        • AlarmList ( alarm )
        • Statistics ( info )
        • DocumentList ( doc )
        • DeliveryList ( delivery )
        • TransitList ( transport )
        • Redirect > TransitListComplete
          • TransitListComplete ( complete )
          • TransitListCancel ( cancel )
      • Member ( member )
      • SettingView ( setting )
      • Redirect > AlarmSetting
        • AlarmSetting ( alarm )
        • DeviceSetting ( info )
        • DocumentSetting ( doc )
        • DeliverySetting ( delivery )
        • PartTransport ( transport )
        • Redirect > PartTransportSearchList
          • PartTransportSearchList ( management )
          • PartTransportSearchOne ( management/:vehicleSeq )
          • PartTransportCreateEach ( createEach )
          • PartTransportCreateBundle ( createBundle )
          • PartTransportModify ( modify/:vehicleSeq )