SonarQube는 어떻게 Routing을 할까?

요즘 회사에서 SonarQube를 사용하며 소스 내부를 보고 있다. 예전에 React 스터디 경험이 있어서 어느 정도 파악이 쉬울 줄 알았는데, 공부를 허투루 했는지... 도통 이해가 가지 않았다. 물론 내가 처음부터 작성한 코드도 아닐뿐더러 소스양도 (내 기준에서)많기에 어려움이 있던 것으로 생각한다. 결국 빌드를 돌려보며 소스를 파악하고 감을 익혔다. 직접 뛰어 들어감으로 익힌 뒤에 관련 기술 내용을 공부하는 것이 나에게는 편하다는 것을 새삼 느끼고 있다.

계속해서 대시보드 페이지를 살펴보고 있는데(참고: https://blog.sapzape.com/941), 이번에는 어떻게 Routing 처리를 하고 있는지 살펴보려고 한다.

(페이지 바로가기)

기본적으로 'Host + Path + Query'의 조합으로 URL을 만들어 원하는 페이지로 접근할 수 있다.

HOST + /dashboard(경로) + ?id=blahblah(쿼리문)

대시보드에 페이지는 'dashboard'라는 경로를 통해 접근할 수 있고, 'id'라는 쿼리문을 통해 어떤 프로젝트에 대한 결과를 보고 싶은지 정의한다. 우선 접근하고자 하는 경로를 입력할 때 보여주는 코드는 어디에 어떻게 정의되어있는지 살펴보자.

SonarQube 프로젝트는 전체 컴포넌트에 대한 라우팅을 startReactApp.tsx 파일에 명시하고 있다. 내가 찾고자 하던 'dashboard'를 키워드로 검색을 해보자.

import { Router, Route, IndexRoute, Redirect, RouteProps, RouteConfig } from 'react-router';
... (생략) ...

// this is not an official api
const RouteWithChildRoutes = Route as React.ComponentClass<
  RouteProps & { childRoutes: RouteConfig }
>;
... (생략) ...

<Route
  path="/dashboard/index/:key"
  onEnter={(nextState, replace) => {
   replace({ pathname: '/dashboard', query: { id: nextState.params.key } });
 }}
/>
... (생략) ...

<Redirect from="/dashboard/index" to="/dashboard" />
... (생략) ...

<Route component={lazyLoad(() => import('../components/ComponentContainer'))}>
  <RouteWithChildRoutes path="code" childRoutes={codeRoutes} />
  <RouteWithChildRoutes
    path="component_measures"
    childRoutes={componentMeasuresRoutes}
  />
  <RouteWithChildRoutes path="dashboard" childRoutes={overviewRoutes} />
... (생략) ...

'Router'라는 컴포넌트로 둘러싸여 있는 형태로 경로가 정의되어 있는 것을 알 수 있다. Router가 선언된 상단을 보면 'react-router'를 사용하고 있는데, React에서는 'react-router'를 사용하여 라우팅을 하고 있나 보다. 'react-router'를 살펴보자. 소스 최신 master 기준(작성 일자 : 2019-02-22)으로 SonarQube는 '4.0.24' 버전을 사용하고 있다. 공식으로 제공되는 가이드 문서가 정말 잘 되어있으니, 관심 있으면 살펴보기를 추천한다.

<Route> 컴포넌트는 'react-router'에서 가장 중요한 컴포넌트라고 하는데, 'path'의 값과 일치하는 UI를 렌더링해준다.

<RouteWithChildRoutes path="dashboard" childRoutes={overviewRoutes} />

(소스보기)

(참고) SonarQube에서는 페이지 내 하위 컴포넌트에 대한 라우팅 처리를 고려하여 자체적으로 'RouteWithChildRoutes'라는 이름으로 Route 컴포넌트도 사용하고 있다. 하지만 결국은 'Route' 컴포넌트이니 참고하길 바란다. 'childRoutes'도 자체적으로 만든 속성값 같은데, 대충 'overviewRoutes'라는 값으로 라우팅 해주는 걸로 이해하고 넘어갔다.

overviewRoute를 들어가 보면 'indexRoute'라는 속성값으로 'App'라는 파일을 import하고 있다. 결국 dashboard라는 경로로 접근하게 될 때 './components/App'라는 파일이 로드될 것이라는 느낌이 온다.

const routes = [
  {
    indexRoute: { component: lazyLoad(() => import('./components/App')) }
  }
];

'./components/App' 파일에 들어가 보면 렌더링 처리 로직 안에 눈에 띄는 컴포넌트가 보인다. OverviewApp 컴포넌트이다. OverViewApp 컴포넌트는 처음 찾아보고자 했던 페이지에 대한 컴포넌트로, 이전 포스팅 내용을 보면 자세한 내용을 확인할 수 있다.

<OverviewApp
  branchLike={branchLike}
  component={component}
  onComponentChange={this.props.onComponentChange}
/>

(소스보기)

'host/dashboard?id=blahblah'의 접근이 어떻게 OverviewApp 컴포넌트까지 이어지는지 살펴보았다. 라우팅 처리는... 생각보다 간단하구나...