반갑습니다! 오픈소스
내가 사용하는 프로그램(SonarQube)은 어떻게 동작되는 걸까?
최근 들어 SonarQube라는 솔루션을 사용할 일이 많아졌다 (지금도 사용하고 있다). 리서치도 해보고 직접 사용해 보며 잘 만들어진 솔루션이라는 생각이 들었다. 대학생 시절 오픈 소스 하나를 선정하여 분석해보며 많은 공부가 되었던 적이 있어서 SonarQube도 분석해보면 어떨까 하는 생각이 들었다.
좋은 구조를 파악해보고 이해한다면 언젠가 내 것으로 받아들일 수 있지 않을까?
그리하여 SonarQube라는 오픈소스의 내부를 까보는 시간을 가져봤다. ('파헤쳐보다', '분석하다' 등 좋은 단어들이 있지만, '까보다'가 더 끌린다.)
SonarQube?
SonarQube에는 간략하게 '소스 정적 분석 도구'라고 설명할 수 있다. 소스 품질을 높이기 위한 여러 기준(Code Smell / Bug / Vulnerability 등)에 위배되는 코드들을 검출해주는 솔루션이다. 자세한 설명은 소스 정적 분석 도구 SonarQube 리서칭 를 참고하면 좋을 것 같다.
SonarQube 까 보기
위에서 언급했던 것과 같이 SonarQube는 오픈소스이다. 소스를 살펴보기 위해 저장소에서 코드를 받자. 저장소에 있는 Directory를 살펴보다가 Java 확장자가 보여 Server단부터 까 보기로 했다. Java Application의 시작점부터 까 볼 수 있으면 좋으련만 도통 어디서 뭘 봐야 할지 감이 잡히지 않았다. 그래서 제일 만만해 보이는 View 단 중 눈 앞에 먼저 띈 대시보드를 타깃으로 분석을 시작해보려고 한다.
대시보드는 어떻게 구현되어있을까?
어떻게 들어가 볼까? 결국 View는 전달받은 데이터를 뿌려줄 테니 어디서 데이터를 요청하는지를 살펴보자.
SonarQube 대시보드 (https://sonarcloud.io/dashboard?id=sonarlint-visualstudio)흥미롭게도 프런트 단은 TypeScript와 React 조합으로 구현되어있다. React는 최근 관심을 두고 조금씩 살펴보고 있어서, 큰 프로젝트에서 어떻게 사용되고 있는지 알 수 있을 것 같아 만족스러웠다. 우선 모든 Front 단에서 진입점은 Index가 아닐까 싶어서 Index로 시작하는 파일을 검색해봤다.
있다!index.ts 파일을 훑어보며 startReactApp이라는 이름이 눈에 띈다. (소스보기)
startReactApp는 뭐지?startReactApp는 뭘까? 안으로 들어가 보니 <Route path="/dashboard/index/:key ...> 코드가 보이는데, 아까 찾고자 했던 대시보드 페이지의 URL 링크랑 비슷하다. 어떻게 라우팅 처리를 하여 View 처리를 하고 있을까? (소스보기)
내가 접근하는 URL 이 보이는데?내가 접근하는 URL 이 보이는데? 우선은 계속 startReactApp 파일을 살펴보자. 대시보드를 타깃으로 잡았으니 Dashboard 키워드로 파일 내 검색을 해보면 뭔가 얻을 수 있지 않을까? (얻었다.) Overview? 어디서 많이 봤다. 그렇다. 대시보드 하위 칼럼 중 하나가 Overview였다.
SonarQube Overview (https://sonarcloud.io/dashboard?id=sonarlint-visualstudio)Dashboard로 접근하면 Overview 항목이 제일 처음 나온다. 아래 코드를 보면 childRoutes로 overviewRoutes가 명시되어있는데, 일리가 있어 보이니 들어가 보자. (소스보기)
뭔가 그럴듯해 보인다뭔가 그럴듯해 보인다.
계속 들어가 보자계속 들어가 보자 App 파일을 import 하고 있다. 코드를 쭉 살펴보다가 OverviewApp이라는 컴포넌트가 보인다. 들어가 보자. (소스보기)
뭔가 찾은 것 같다!OverviewApp은 타깃으로 잡은 대시보드의 프런트 단 담당 파일이었다. 혹시 몰라 div 클래스 명과 비교해보니 정확하다.
일치한다! (https://sonarcloud.io/dashboard?id=sonarlint-visualstudio)그렇다면, 아래의 영역들을 뿌려주는 데이터들은 어디서 나오는 것일까?
SonarQube 검출 항목 (https://sonarcloud.io/dashboard?id=sonarlint-visualstudio)아래의 코드와 같이 데이터를 넣어주고 있다. (소스보기)
위에서 본 대시보드에 이름과 같다!위에서 본 대시보드에 이름과 같다. 우리가 개발을 해보면 주로 변수 세팅은 상단에 해주고 있지 않은가? 위로 올라가서 단서가 될 만한 메서드를 찾아보자. loadHistory라는 키워드가 뭔가 내 마음에 와 닿는다. 들어가 보자. (소스보기)
마음에 와 닿는 메서드명이다사용되는 메서드들이 많은데 그중에 getAllTimeMachineData 메서드를 들어가 보자. (소스보기)
계속 들어가 보자getAllTimeMachineData 메서드는 결국 getTimeMachineData 메서드를 호출하게 되는데, 눈에 띄는 호출이 하나 보인다. (소스보기)
API를 호출하고 있다!API를 호출하고 있다. 그렇다. JSON 데이터를 받아오고 있다. 저 '/api/measures/search_history'는 분명 컨트롤러 영역으로부터 데이터를 요청할 것이다. '/api/measures/search_history'로 검색해보자. 아래와 같은 파일들이 검색된다. Java 파일 위주로 살펴보자.
모를 때는 검색이 최고Server 단에서도 분명 라우팅을 통해 해당 메서드로 전달을 해주면, 해당 메서드에서 데이터를 쿼리 하여 반환해줄 것이다. (소스보기)
찾았다! API 호출 시 실행되는 메서드!주석에 있는 링크를 한번 들어가 보자.
API 매뉴얼 (https://next.sonarqube.com/sonarqube/web_api/api/measures/search_history)내부적으로 호출만 가능한 것이 아니라, 외부에서도 API를 호출하면 해당 메서드를 통해서 값을 전달받을 수 있다.
오늘은 여끼까지 까 보자
React를 배워보겠다며 단순 예제만 쳤었는데, (내 기준에서) 규모가 있는 프로젝트에서 활용되고 있는 것을 보니 복잡하고 어려웠다. 그래도 배울 것이 많아 보이니 차근차근 살펴보면 좋을 것 같다. 지금은 기능이 어떻게 구현되어있는지 살펴보는 정도이지만, 어느 정도 익숙해진다면 좋은 개발 패턴들이나 특징들을 찾아보고 정리해보면 어떨까?
