GraphViz를 통해 함수 호출 그래프 그리기

 개발을 하다보면 종종 복잡한 비즈니스 로직을 구현해야 할때가 있다. 이런 복잡한 로직은 시간이 지나 다시보면 한눈에 쉽게 들어오지 않는다는 문제가 있었다.(나만 그런가) 그래서 내가 개발한 프로그램에 대해서 함수의 호출관계를 한눈에 보여주면 꽤 유용할것 같아 심플한 프로그램을 하나 만들어 봤다.

 

 현재 회사에서 화면을 구현할때 Inswave에서 만든 WebSqaure라는엔진을 사용하는데(Javascript를 베이스로 한다.) 해당 소스파일을 분석해야할 일이 있어 WebSquare 문법을 분석해서 호출 그래프를 그려주는 프로그램을 만들었다.

 

 WebsSquare의 문법은 Javascript와 유사하며 Map에 함수를 할당하는 방식을 사용한다. 샘플에선 scwin이라는 변수명을 가진 맵을 사용했다. Javascript는 인터프리터 언어이기 때문에 컴파일 과정이 없다. 이는 Run-time시에 Javascript를 컴파일해서 메소드 목록을 불러올수 없다는것을 뜻한다. 그래서 문자열을 분석해서 구현했다. (혹시 더 세련된 방법 아시는분은 댓글 부탁드립니다. 헿 )

scwin.a = function(a1, a2){
	...
	// a에대한 내용
	...
}


/* scwin.b()에 대한 주석 */
scwin.b = async function(b1, b2){
	// scwin.b에 대한 내용...
}

// scwin.c()에 대한 주석
scwin.c = function(){
	
	var c = scwin.a();/*scwin.a()에대한 주석*/
}

scwin.d = 
function(){
	var d = scwin.b(t,d);
	scwin.c();//scwin.c()에 대한 주석
}

scwin.e = 
function(){
	/*scwin.e()에 대한 주석*/
}

scwin.f = function(){
	scwin.a();
	scwin.b();
}

scwin.g = function(){
	scwin.f();
	scwin.i();
}

scwin.h = function(){
	scwin.b();
}

scwin.i = function(){
	scwin.h();
}

 

프로그램

 

 위 샘플 코드를 입력으로 해서 프로그램을 구동하면 아래와 같이 호출 그래프를 그려준다. 그래프 그리기는 GraphViz 라이브러리를 사용했다. GraphViz는 정해진 문법으로 작성된 .dot 확장자 파일을 실행시켜 그래프를 그려주는 프로그램인데 각종 언어에서도 이 기능을 사용할 수 있도록 능력자들이 개발해서 github에 올려뒀다.

 

샘플 결과

이렇게 프로그램을 만들어 두니 불필요한 함수를 도출하거나, Depth가 깊은 함수를 추적할때 꽤 유용하다 :^)

 

 

구현 소스코드는 아래 저장소를 참고.

GitHub - 92SooJong/DrawFunctionCallGraph