Onionmixer: 이미지

2014-03-31T07:02:22Z

이미지

← Older revision		Revision as of 07:02, 31 March 2014
Line 74:		Line 74:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-a.jpg]]


Line 86:		Line 88:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-b.jpg]]


Line 98:		Line 102:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-c.jpg]]


Line 116:		Line 122:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-d.jpg]]


Line 129:		Line 137:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-e.jpg]]


Line 143:		Line 153:
	view open.		view open.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-f.jpg]]


Line 177:		Line 189:
	view nodes: (1 to: 20).		view nodes: (1 to: 20).
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-g.jpg]]


Line 188:		Line 202:
	view edgesFrom: [ :v \| v*2 ].		view edgesFrom: [ :v \| v*2 ].
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-h.jpg]]


Line 203:		Line 219:
	view circleLayout.		view circleLayout.
	</syntaxhighlight>		</syntaxhighlight>


			실행하면 다음같은 결과를 얻을 수 있다:

			[[image:DeepintoPharo_Image_12-i.jpg]]


Line 218:		Line 239:
	view treeLayout.		view treeLayout.
	</syntaxhighlight>		</syntaxhighlight>

			[[image:DeepintoPharo_Image_12-j.jpg\|640px\|컬렉션 프레임워크 시각화]]


Line 249:		Line 272:
	이 결과는 그림 12.1에 실려 있으며, 각 클래스는 상자로 표현된다. Collection 클래스, 즉 계층구조의 루트는 가장 위에 위치한 상자다. 클래스의 너비는 클래스가 가진 인스턴스 변수의 양을 알려준다. 해당 수치에 3을 곱하면 좀 더 대조적인 결과가 야기된다. 높이는 메서드의 개수를 알려준다. 다른 클래스에 비해 메서드가 많은 클래스들, Collection, SequentiableCollection, String, CompiledMethod를 즉시 알아챌 수 있을 것이다. 다른 클래스에 비해 변수의 개수가 많은 클래스로 RunArray, SparseLargeTable을 들 수 있다.		이 결과는 그림 12.1에 실려 있으며, 각 클래스는 상자로 표현된다. Collection 클래스, 즉 계층구조의 루트는 가장 위에 위치한 상자다. 클래스의 너비는 클래스가 가진 인스턴스 변수의 양을 알려준다. 해당 수치에 3을 곱하면 좀 더 대조적인 결과가 야기된다. 높이는 메서드의 개수를 알려준다. 다른 클래스에 비해 메서드가 많은 클래스들, Collection, SequentiableCollection, String, CompiledMethod를 즉시 알아챌 수 있을 것이다. 다른 클래스에 비해 변수의 개수가 많은 클래스로 RunArray, SparseLargeTable을 들 수 있다.

	[[image:DeepintoPharo_Image_12-1.~~png~~\|그림 12.1: Collection 클래스 계층구조의 시스템 복잡성]]		[[image:DeepintoPharo_Image_12-1.jpg\|640px\|그림 12.1: Collection 클래스 계층구조의 시스템 복잡성]]


Line 271:		Line 294:
	위의 스크립트에서 얻은 시각화를 그림 12.2에 제시하겠다.		위의 스크립트에서 얻은 시각화를 그림 12.2에 제시하겠다.

	[[image:DeepintoPharo_Image_12-2.~~png~~\|그림 12.2: 클래스 간 직접 참조.]]		[[image:DeepintoPharo_Image_12-2.jpg\|640px\|그림 12.2: 클래스 간 직접 참조.]]


Line 331:		Line 354:
	</syntaxhighlight>		</syntaxhighlight>

	[[image:DeepintoPharo_Image_12-3.~~png~~\|그림 12.3: 추상 클래스는 회색으로, 이름이 "Abstract"라는 단어로 된 클래스는 파란색으로 표시된다.]]		[[image:DeepintoPharo_Image_12-3.jpg\|640px\|그림 12.3: 추상 클래스는 회색으로, 이름이 "Abstract"라는 단어로 된 클래스는 파란색으로 표시된다.]]


Line 367:		Line 390:
	여기서 얻는 시각화<ref name="주석12-4">시각화는 '시스템 복잡성'으로 명명되는데 이에 관해 더 알고 싶다면 'Polymetric ViewsㅡA Lightweight Visual Approach to Reverse Engineering'(Transactions on Software Engineering, 2003)을 참고한다.</ref>는 메서드의 개수, 인스턴스 변수의 개수, 코드의 행 수에 대한 각 클래스의 관계를 넣는다. 클래스들 간 크기 차이는 관리 활동이 필요함을 제시할지도 모른다.		여기서 얻는 시각화<ref name="주석12-4">시각화는 '시스템 복잡성'으로 명명되는데 이에 관해 더 알고 싶다면 'Polymetric ViewsㅡA Lightweight Visual Approach to Reverse Engineering'(Transactions on Software Engineering, 2003)을 참고한다.</ref>는 메서드의 개수, 인스턴스 변수의 개수, 코드의 행 수에 대한 각 클래스의 관계를 넣는다. 클래스들 간 크기 차이는 관리 활동이 필요함을 제시할지도 모른다.

	[[image:DeepintoPharo_Image_12-4.~~png~~\|그림 12.4: 시스템 복잡성 시각화: 노드는 클래스이고, 높이는 메서드의 행 수, 너비는 변수의 개수, 색상은 코드 행의 개수를 말한다.]]		[[image:DeepintoPharo_Image_12-4.jpg\|480px\|그림 12.4: 시스템 복잡성 시각화: 노드는 클래스이고, 높이는 메서드의 행 수, 너비는 변수의 개수, 색상은 코드 행의 개수를 말한다.]]


Line 388:		Line 411:
	</syntaxhighlight>		</syntaxhighlight>

	[[image:DeepintoPharo_Image_12-5.~~png~~\|그림 12.5: 상자는 클래스, 링크는 상속 관계다. 추상 메서드의 양은 클래스 크기에 따라 표현된다. 빨간색 클래스는 추상 메서드를 정의하고, 분홍색 클래스는 추상 클래스에서만 상속된다.]]		[[image:DeepintoPharo_Image_12-5.jpg\|그림 12.5: 상자는 클래스, 링크는 상속 관계다. 추상 메서드의 양은 클래스 크기에 따라 표현된다. 빨간색 클래스는 추상 메서드를 정의하고, 분홍색 클래스는 추상 클래스에서만 상속된다.]]


Line 464:		Line 487:
	하위뷰는 고유의 레이아웃을 포함한다. 하위뷰에서 정의된 상호작용과 모양은 중첩(nesting) 노드에서 접근할 수 없다 (그림 12.6).		하위뷰는 고유의 레이아웃을 포함한다. 하위뷰에서 정의된 상호작용과 모양은 중첩(nesting) 노드에서 접근할 수 없다 (그림 12.6).

	[[image:DeepintoPharo_Image_12-6.~~png~~\|그림 12.6: 큰 상자는 클래스들이다. 그 내부의 상자들은 메서드에 해당한다. edges는 둘 사이에 가능한 호출을 표시한다.]]		[[image:DeepintoPharo_Image_12-6.jpg\|그림 12.6: 큰 상자는 클래스들이다. 그 내부의 상자들은 메서드에 해당한다. edges는 둘 사이에 가능한 호출을 표시한다.]]


Line 574:		Line 597:
	위 스크립트는 두 가지 부분을 포함한다. 첫 번째는 컬렉션 프레임워크에서 아주 흔하게 발견되는 시스템 복잡성이고, 두 번째는 CollectionsTests에 포함된 테스트를 제공한다. 클래스 너비는 클래스에 포함된 리터럴 개수를, 높이는 코드의 행 수를 나타낸다. 컬렉션 테스트는 코드의 재사용을 위한 특성을 많이 사용하기 때문에 이러한 측정(metrics)은 축소되어야 한다. 마우스를 test unit 위로 갖다 대면 해당 클래스 내에서 참조된 컬렉션 프레임워크의 모든 클래스들이 강조된다.		위 스크립트는 두 가지 부분을 포함한다. 첫 번째는 컬렉션 프레임워크에서 아주 흔하게 발견되는 시스템 복잡성이고, 두 번째는 CollectionsTests에 포함된 테스트를 제공한다. 클래스 너비는 클래스에 포함된 리터럴 개수를, 높이는 코드의 행 수를 나타낸다. 컬렉션 테스트는 코드의 재사용을 위한 특성을 많이 사용하기 때문에 이러한 측정(metrics)은 축소되어야 한다. 마우스를 test unit 위로 갖다 대면 해당 클래스 내에서 참조된 컬렉션 프레임워크의 모든 클래스들이 강조된다.

	[[image:DeepintoPharo_Image_12-7.~~png~~\|그림 12.7: 상호작용적 시스템 복잡성.]]		[[image:DeepintoPharo_Image_12-7.jpg\|640px\|그림 12.7: 상호작용적 시스템 복잡성.]]

Onionmixer: DIP 제 12 장 Mondrian을 이용해 시각화 스크립팅하기 페이지 추가

2014-02-28T02:58:11Z

DIP 제 12 장 Mondrian을 이용해 시각화 스크립팅하기 페이지 추가

Show changes

DeepintoPharo:Chapter 12 - Revision history

Onionmixer: 이미지

Onionmixer: DIP 제 12 장 Mondrian을 이용해 시각화 스크립팅하기 페이지 추가