SqueakByExample:2.8: Difference between revisions

From 흡혈양파의 번역工房
Jump to navigation Jump to search
(페이지내용 재입력)
 
(검수 20180719)
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
==우리의 코드를 실행해 봅시다.==
==코드를 실행해봅시다==


여기까지입니다: Quinto game이 마무리 되었습니다.
되었습니다. Quinto 게임을 완성했습니다!


만약 여러분이 단지 2개의 클래스와 7개의 메소드로 구성되어 있는 모든 단계를 따라 하셨다면, 게임 플레이가 가능해야만 합니다.
모든 단계를 따라왔다면, 2개의 클래스와 7개의 메서드만으로도 게임을 즐길 수 있습니다.




{{CommentSqueak|워크스페이스에서 {{HighlightBold|SBEGame new openInWorld}}를 타이핑하고 {{HighlightGray|do it}}을 클릭합니다.}}
{{CommentSqueak|워크스페이스에서 {{HighlightBold|SBEGame new openInWorld}}를 입력하고 {{HighlightGray|do it}}을 실행하십시오.}}




게임이 열리게 될 것이며, 여러분은 셀 클릭이 가능해야만 하며, 어떻게 그것이 작동하는지 볼 있어야 합니다.
게임이 열리고 나면, 각각의 cell 을 클릭해서 어떻게 동작하는지 확인할 있습니다.


글쎄요, 너무 많은 이론이었습니다...여러분이 셀을 클릭하면, PreDebugWindow라 불렸던 알림 창(notifier window)이 나타납니다.


그림 2.12에서 묘사된 것처럼, 이 창은 MessageNotUnderstood: SBEGame»toggleState 를 말합니다.


여튼, 잡담이 길었군요... cell 을 클릭하면, PreDebugWindow 창이라고 하는 ''알림<sup>notifier</sup>'' 창에서 '''오류 메시지''' 가 나타납니다.


다음의 그림 2.12 에서 보여지는 바와 같이, MessageNotUnderstood: SBEGame>>toggleState 라고 하고 있습니다.


[[image:Error.png|none|456px|thumb|그림 2.12: 셀을 클릭했는더니 우리의 게임에 버그가 나왔네요!]]
[[image:Error.png|none|456px|thumb|그림 2.12: cell 을 클릭했더니 게임에 버그가 있네요!]]




어떤 일이 일어났을까요? 그것을 알아내기 위해, 좀 더 강력한 스몰토크의 도구인 '''디버거<sup>Debugger</sup>''' 를 사용해 봅시다.


어떤 일이 발생하였습니까? 그것을 알아내기 위해, 좀더 강력한 스몰토크의 도구 디버거(the debugger)를 사용해 봅시다.


{{CommentSqueak|알림 창에서  {{HighlightGray|debug}} 버튼을 클릭하십시오.}}


{{CommentSqueak|알림창(notifier window)에 있는  {{HighlightGray|debug}}를 클릭합니다.}}


디버거가 나타났습니다. 디버거 창의 상단에서 모든 활성 메서드를 보여주는 실행 스택<sup>execution stack</sup>을 볼 수 있으며, 목록중 하나를 선택하면 중간의 pane 에서 실행중인 Smalltalk 코드와 함께 오류를 발생시킨 부분이 강조표시 됩니다.
 
{{CommentSqueak| (상단 부근의) {{HighlightBold|SBEGame>>toggleNeighboursOfCellAt:at:}}이라는 라벨이 붙은 줄을 클릭하십시오.}}


디버거가  나타날 것입니다. 디버거 창의 윗 부분에서, 모든 활성화된 메소드를 보여주는 실행스택(the execution stack)을 볼 수 있을 것이며, 중앙 페널에서, 스몰토크 코드는, 강조된 에러를 트리거한 부분과 함께 선택한 메소드에서 실행되고 있는 중입니다.


 
디버거는 오류가 발생한 메서드 내부의 실행 상태를 보여줄 것입니다(그림 2.13).
{{CommentSqueak|{{HighlightBold|SBEGame»toggleNeighboursOfCellAt:at:}}이라고 라벨을 붙인 (상단 주변)라인을 클릭합니다.}}




디버거는 에러가 발생한 (그림 2.13) 위치의 이 메소드 내부에 실행 컨택스트(the execution context)를 보여드릴 것입니다.
디버거의 하단에는 두 개의 작은 Inspector 창이 있습니다. 왼쪽에서는 커서로 현재 선택된 메서드를 실행하기위해 요청한 메시지(메서드)의 수신자 객체를 확인하고 해당 시점의 인스턴스 값을 볼 수 있습니다. 오른쪽에서는 현재 실행 중인 메서드 자체를 나타내는 객체를 확인해서 해당되는 메서드의 매개 변수와 임시 변수 값을 볼 수 있습니다.<ref name="역자주1">왼쪽은 수신객체의 상태, 오른쪽은 송신객체의 상태라는 의미입니다.</ref>


디버거의 하단에는, 두 개의 작은 인스펙터 창이 있습니다. 여러분은 왼쪽에서, 실행할 선택된 메소드를 발생시킨 메시지의 리시버(receiver)인 오브젝트를 정밀검사(inspect)하여, 인스턴스 값의 값을 보실 수 있습니다. 여러분은 오른쪽에서, 현재 실행중인 메소드 자체를 나타내는 오브젝트를 정밀검사하여, 메소드의 파라티머와 임시 변수의 값을 여기서 볼 수 있을 것입니다.
[[image:Debugger.png|none|601px|thumb|그림 2.13: 선택된 메서드 toggleNeighboursOfCell:at: 와 함께 있는 모습의 디버거]]




[[image:Debugger.png|none|601px|thumb|그림 2.13: 선택된 메소드 toggleNeighboursOfCell:at: 와 함께 있는 모습의 디버거]]
디버거를 사용하면, 단계적으로 코드를 실행하고, 매개 변수와 로컬 변수에서 객체를 점검하며, Workspace 에서 할 수 있는 작업과 동일한 수준에서 코드를 시험할 수 있습니다. 그리고 가장 놀라운 것은, 다른 디버거들에서 사용된 코드들도 시험할 수 있고, 디버그 진행 중에 코드를 바꿀 수도 있다는 것입니다. 몇몇 Smalltalk 사용자들은 대부분의 경우 브라우저에서 보다, 디버거에서 프로그램을 작성합니다. 디버거에서 프로그램을 작성하는 방법의 장점은, 실제 실행 상황에서 실제 매개 변수와 함께, 현재 작성하고 있는, 앞으로 실행할 메서드를 살펴볼 수 있다는 것에 있습니다.


여러분은 디버거를 사용하여, 단계적으로 코드를 실행하고 파라미터와 로컬 변수에서 오브젝트를 정밀검사하고 워크스페이스에 여러분이 할 수 있는 작업과 똑 같이 코드를 평가할 수 있고, 그리고 가장 놀라운 것은, 다른 디버거들에 사용된 코드들도 평가할 수 있고, 디버그가 되고 있는 동안에 코드를 변경할 수도 있습니다. 몇몇 스몰토크 사용자들은 브라우저에서 보다는 거의 항상 디버거에서 프로그램을 작성합니다. 디버거에서 프로그램을 작성하는 장점은, 실제 실행 상황에서 실제 파라미터와 함께, 실행하게 될 여러분이 작성하고 있는 메소드를 볼 수 있다는 것입니다.


이번 경우에, 우리는 SBEGame의 인스턴스에 보낸 toggleState(토글상태) 메시지를 상단 패널의 첫 번째 라인에서 볼 수 있으며, 이 메시지는 명확히 SBECell의 인스턴스로 존재해왔어야만 합니다. 문제는 셀 매트릭스의 초기화와 관련이 있습니다. SBEGame»initialize의 코드를 검색하는 작업은 newCellAt:at:의 리턴 값으로 채워진 셀들을 보여주지만, 우리가 그 메소드를 살펴볼 때, 어떤 리턴 표현식도 그 메소드에 없다는 것을 보게 되며, 디폴트로, 메소드 그 자체를 리턴하고, newCellAt:at:의 경우에는 실제로 SBEGame의 인스턴스가 됩니다.
이 경우 상단 패널의 첫 번째 행에서 SBEGame 의 인스턴스<sup>Instance</sup>로 toggleState 메시지가 보내 졌음을 확인할 수 있으며, 지금의 상황은 분명히 SBECell 의 인스턴스 안쪽에서 벌어지는 상황이어야 합니다. 문제는 cell Matrix 의 초기화와 함께 상황이 일어날 가능성이 큽니다. SBEGame>>initialize 의 코드를 살펴보면 cell 은 newCellAt:at: 메서드의 반환 값으로 채워지지만, 정작 해당 메서드를 보면 반환 문이 없다는 것을 알 수 있습니다! 기본적으로 메서드는 self 를 반환하며, newCellAt:at: 의 경우 실제로 SBEGame 의 인스턴스가 됩니다.




{{CommentSqueak|디버거 창을 닫고, 표현식 "{{HighlightBold|↑c}}"를 메소드 {{HighlightBold|SBEGame»newCellAt:at:}}의 끝 부분에 추가하여, {{HighlightBold|c}}를 리턴하게 합니다. (메소드 2.10을 보십시오)}}
{{CommentSqueak|디버거 창을 닫으십시오. {{HighlightBold|SBEGame>>newCellAt:at:}} 메서드 마지막 부분에 "{{HighlightBold|↑ c}}" 구문을 추가하여, {{HighlightBold|c}} 를 반환하게 하십시오(메서드 2.10 을 참고).}}




메소드 2.10: 버그 수정하기
메서드 2.10: 버그 수정
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
SBEGame»newCellAt: i at: j                                       
SBEGame>>newCellAt: i at: j                                       
  "Create a cell for position (i,j) and add it to my on—screen               
  "Create a cell for position (i,j) and add it to my on—screen               
  representation at the appropriate screen position. Answer the new cell"       
  representation at the appropriate screen position. Answer the new cell"       
Line 57: Line 58:
  origin := self innerBounds origin.
  origin := self innerBounds origin.
  self addMorph: c.
  self addMorph: c.
  c position: ((i -- 1) * c width) @ ((j -- 1) * c height) + origin.
  c position: ((i - 1) * c width) @ ((j - 1) * c height) + origin.
  c mouseAction: [self toggleNeighboursOfCellAt: i at: j].
  c mouseAction: [self toggleNeighboursOfCellAt: i at: j].
  ↑c
  ↑ c
</syntaxhighlight>
</syntaxhighlight>




1장에서 보았듯이, 스몰토크에서 메소드로부터 값을 리턴하기 위해 사용하는 기호는 ^를 타이핑함으로써 얻는 ↑ 입니다.
1장에서 보았듯이, Smalltalk 의 메서드 내부에서 값을 반환하기 위해 사용하는 기호는 ^ 를 입력함으로써 얻는 ↑ 입니다.
 
자주 디버거 창에서 코드를 직접 수정해도 되며, 프로그램 실행을 계속 하려면 {{HighlightGray|Proceed}}를 클릭합니다. 이번 상황에서, 버그는 오류가 발생한 메서드가 아닌, 객체의 초기화 과정에서 생겼기 때문에, 가장 쉽게 코드를 수정하는 방법은 디버거 창을 닫고, 실행 중인 게임의 인스턴스를(할로와 함께) 폐기한 후, 새 인스턴스를 만드는 것입니다.


종종 여러분은 디버거 창에서 코드를 직접 수정할 수 있으며, 실행중인 응용프로그램을 지속시키기 위해 {{HighlightGray|Proceed}}를 클릭합니다. 우리의 사례의 경우, 버그가 오류가 생긴 메소드가 아닌, 오브젝트의 초기화 과정에서 생겼으므로, 가장 쉽게 코드를 수정하는 방법은 디버거 창을 닫고, 실행중인 게임의 인스턴스(halo와 함께)을 폐기한 후, 새로운 인스턴스를 만드는 것입니다.


{{CommentSqueak|Do: {{HighlightBold|SBEGame new openInWorld}} 를 다시 실행하십시오.}}


{{CommentSqueak|{{HighlightBold|SBEGame new openInWorld}} 를 다시 Do: 합니다.}}


이제 게임이 제대로 동작할 것입니다.


이제 게임이 정상적으로 작동해야만 합니다.





Latest revision as of 09:18, 19 July 2018

코드를 실행해봅시다

다 되었습니다. Quinto 게임을 완성했습니다!

모든 단계를 따라왔다면, 2개의 클래스와 7개의 메서드만으로도 게임을 즐길 수 있습니다.


Squeak comment.png워크스페이스에서 SBEGame new openInWorld를 입력하고 do it을 실행하십시오.


게임이 열리고 나면, 각각의 cell 을 클릭해서 어떻게 동작하는지 확인할 수 있습니다.


여튼, 잡담이 길었군요... cell 을 클릭하면, PreDebugWindow 창이라고 하는 알림notifier 창에서 오류 메시지 가 나타납니다.

다음의 그림 2.12 에서 보여지는 바와 같이, MessageNotUnderstood: SBEGame>>toggleState 라고 하고 있습니다.

그림 2.12: cell 을 클릭했더니 게임에 버그가 있네요!


어떤 일이 일어났을까요? 그것을 알아내기 위해, 좀 더 강력한 스몰토크의 도구인 디버거Debugger 를 사용해 봅시다.


Squeak comment.png알림 창에서 debug 버튼을 클릭하십시오.


디버거가 나타났습니다. 디버거 창의 상단에서 모든 활성 메서드를 보여주는 실행 스택execution stack을 볼 수 있으며, 목록중 하나를 선택하면 중간의 pane 에서 실행중인 Smalltalk 코드와 함께 오류를 발생시킨 부분이 강조표시 됩니다.


Squeak comment.png (상단 부근의) SBEGame>>toggleNeighboursOfCellAt:at:이라는 라벨이 붙은 줄을 클릭하십시오.


디버거는 오류가 발생한 메서드 내부의 실행 상태를 보여줄 것입니다(그림 2.13).


디버거의 하단에는 두 개의 작은 Inspector 창이 있습니다. 왼쪽에서는 커서로 현재 선택된 메서드를 실행하기위해 요청한 메시지(메서드)의 수신자 객체를 확인하고 해당 시점의 인스턴스 값을 볼 수 있습니다. 오른쪽에서는 현재 실행 중인 메서드 자체를 나타내는 객체를 확인해서 해당되는 메서드의 매개 변수와 임시 변수 값을 볼 수 있습니다.[1]

그림 2.13: 선택된 메서드 toggleNeighboursOfCell:at: 와 함께 있는 모습의 디버거


디버거를 사용하면, 단계적으로 코드를 실행하고, 매개 변수와 로컬 변수에서 객체를 점검하며, Workspace 에서 할 수 있는 작업과 동일한 수준에서 코드를 시험할 수 있습니다. 그리고 가장 놀라운 것은, 다른 디버거들에서 사용된 코드들도 시험할 수 있고, 디버그 진행 중에 코드를 바꿀 수도 있다는 것입니다. 몇몇 Smalltalk 사용자들은 대부분의 경우 브라우저에서 보다, 디버거에서 프로그램을 작성합니다. 디버거에서 프로그램을 작성하는 방법의 장점은, 실제 실행 상황에서 실제 매개 변수와 함께, 현재 작성하고 있는, 앞으로 실행할 메서드를 살펴볼 수 있다는 것에 있습니다.


이 경우 상단 패널의 첫 번째 행에서 SBEGame 의 인스턴스Instance로 toggleState 메시지가 보내 졌음을 확인할 수 있으며, 지금의 상황은 분명히 SBECell 의 인스턴스 안쪽에서 벌어지는 상황이어야 합니다. 문제는 cell Matrix 의 초기화와 함께 상황이 일어날 가능성이 큽니다. SBEGame>>initialize 의 코드를 살펴보면 cell 은 newCellAt:at: 메서드의 반환 값으로 채워지지만, 정작 해당 메서드를 보면 반환 문이 없다는 것을 알 수 있습니다! 기본적으로 메서드는 self 를 반환하며, newCellAt:at: 의 경우 실제로 SBEGame 의 인스턴스가 됩니다.


Squeak comment.png디버거 창을 닫으십시오. SBEGame>>newCellAt:at: 메서드 마지막 부분에 "↑ c" 구문을 추가하여, c 를 반환하게 하십시오(메서드 2.10 을 참고).


메서드 2.10: 버그 수정

SBEGame>>newCellAt: i at: j                                       
 "Create a cell for position (i,j) and add it to my on—screen               
 representation at the appropriate screen position. Answer the new cell"      
 | c origin |                                                       
 c := SBECell new.
 origin := self innerBounds origin.
 self addMorph: c.
 c position: ((i - 1) * c width) @ ((j - 1) * c height) + origin.
 c mouseAction: [self toggleNeighboursOfCellAt: i at: j].
  c


1장에서 보았듯이, Smalltalk 의 메서드 내부에서 값을 반환하기 위해 사용하는 기호는 ^ 를 입력함으로써 얻는 ↑ 입니다.

자주 디버거 창에서 코드를 직접 수정해도 되며, 프로그램 실행을 계속 하려면 Proceed를 클릭합니다. 이번 상황에서, 버그는 오류가 발생한 메서드가 아닌, 객체의 초기화 과정에서 생겼기 때문에, 가장 쉽게 코드를 수정하는 방법은 디버거 창을 닫고, 실행 중인 게임의 인스턴스를(할로와 함께) 폐기한 후, 새 인스턴스를 만드는 것입니다.


Squeak comment.pngDo: SBEGame new openInWorld 를 다시 실행하십시오.


이제 게임이 제대로 동작할 것입니다.


Notes

  1. 왼쪽은 수신객체의 상태, 오른쪽은 송신객체의 상태라는 의미입니다.