목차

  1. TMI 투척
  2. routing 할 때 매번 새로고침 시키는 방법
  3. 구현
  4. 마치며

TMI 투척

전 서버개발자 인데요. 주로 spring을 다룹니다. 그러나 서버개발자라도 프론트를 다룰일이 생깁니다.
바로 운영툴 때문이죠.
원래 운영툴은 대충대충 만듭니다. 그래서 spring에서 자주쓰는 템플릿 엔진을 주로 사용하곤 했습니다.
(freemarker, velocity 등등)

그러나 운영자의 요구사항이 많아지고, 기능이 점점 추가되다보면
서버 로직과 강하게 결합된 템플릿 엔진의 코드를 보면 한숨이 절로 나오게 됩니다.
그래서 프론트를 제대로 다루기 위한 솔루션 도입을 검토하는데요.
저흰 angular를 도입했습니다.

개인적으로 angular는 다른 js 솔루션들 보다
spring mvc에 익숙한 서버개발자들이 오히려 구조를 파악하기에 쉬운 것 같습니다.
(물론 풀스펙의 프레임워크다보니 진입 장벽은 있습니다.)

routing 할 때 매번 새로고침 시키는 방법

angular에서 상단, 왼쪽 메뉴에 route 구성을 해줘야하는데요.
이때 현재 라우팅 된 메뉴를 한번 더 클릭하면 어떤일이 발생할까요?
정답은.. 아무일도 일어나지 않습니다.

그러려니 하는 찰나에 기획자분께서 요청을 주십니다.

“현재 페이지를 여는 메뉴를 한번 더 눌렀을때 이 페이지를 다시 로드하게 해주세요.”

당연히 angular route 옵션에 이런게 있을줄 알았는데 아무리 찾아도 없습니다.
그래서 front 개발자분께 자문을 구해봅니다.

“이러이러한 angular 옵션이 있나요?”
.
.
.
“Nope”

구현

다만 이분들도 같은 요구사항을 처리한 적이 있으셔서 자체적으로 방법을 찾으셨는데요.

1
2
3
4
5
6
7
8
9
load(href: string) {
   this.router.navigateByUrl('/blank-for-reload', {
     skipLocationChange: true,
   }).then(
     () => {
       this.router.navigateByUrl(href);
     }
   );
 }

그분들의 얘기를 듣고 구현한 결과입니다.
위는 Menu를 구성하는 component 안에 있는 한 메소드입니다.
메뉴를 클릭하면 직접 router의 navigateByUrl을 부르지 않고 위처럼 한번 감싼 load 메소드를 호출합니다.

감이 오시나요? /blank-for-reload 패스에 아무것도 없는 빈화면 컴포넌트 만들어둡니다.
그 후 메뉴에서 특정 버튼을 누르면 빈화면으로 한 번 갔다가 의도한 패스로 다시 보내버립니다.
참 쉽죠?
주의할 점은 반드시 skipLocationChange: true 로 지정해줘야 한다는 점입니다.

https://angular.io/api/router/NavigationExtras#skipLocationChange 여기를 보면 알수 있듯이
이것을 true 로 지정해야 뒤로가기 스택에 쌓이지 않습니다.

마치며

정답이 있어야만 구현 할 수 있는게 아닙니다. 걍 돌아가면 그게 정답인것이죠.
(이 일을 몇년 해보면서 느낍니다.)