1
00:00:08,060 --> 00:00:10,829
...

2
00:00:10,829 --> 00:00:14,099
이 강의는 스탠포드에서 전문인 양성을 위하여

3
00:00:14,099 --> 00:00:21,099
제공됩니다.

4
00:00:22,039 --> 00:00:26,880
지난 시간의 주제를 이어서 공부해 봅시다

5
00:00:26,879 --> 00:00:30,798
우리의 친구, 상호작용자를 배우고 있었죠

6
00:00:30,798 --> 00:00:34,299
상호작용자와 액션 리스너에 대해서요

7
00:00:34,299 --> 00:00:38,739
구체적으로는 버튼을 만드는 방법과 그 버튼들에 의해 발생하는 액션 이벤트에 대해 배웠습니다

8
00:00:38,740 --> 00:00:42,000
기억하나요? 그걸 간단히 정리하고 좀 더 깊이 있는 내용을 배워봅시다

9
00:00:42,000 --> 00:00:46,509
지난 시간에 이야기 했던 것 중 하나가 바로 프로그램에 init 메소드를 만드는 것이었습니다

10
00:00:46,509 --> 00:00:50,329
public void고요

11
00:00:50,329 --> 00:00:54,500
이 메소드 안에서 프로그램의 일부를

12
00:00:54,500 --> 00:00:57,469
다양한 사용자들을 클릭하거나 해서

13
00:00:57,469 --> 00:01:00,469
어떠한 이벤트가 발생했을 때의 상황을 처리해 줄 수 있었죠

14
00:01:00,469 --> 00:01:02,609
액션 리스너를 add해 줌으로써요

15
00:01:02,609 --> 00:01:07,510
그래서 버튼을 클릭하면

16
00:01:07,510 --> 00:01:10,469
특정한 메소드를 호출하도록 처리해 주는 것입니다

17
00:01:10,468 --> 00:01:14,388
액션리스너는 예를 들어 프로그램의 버튼이 있을 때 버튼에 무슨 일이 일어나는 지 감시해주었습니다

18
00:01:14,388 --> 00:01:17,848
그래서 버튼을 클릭하면 특정한 메소드를 호출하도록 처리해 주는 것입니다

19
00:01:17,849 --> 00:01:21,200
예를 들어 actionPerformed를 호출하면 그것에 바탕하여 어떤 버튼이 눌렸는 지를 확인하고

20
00:01:21,200 --> 00:01:23,710
실제로 무엇인가를 실행해줍니다 아셨죠?

21
00:01:23,709 --> 00:01:27,519
자 여기 우리의 친구 public void actionPerformed가 있습니다

22
00:01:27,519 --> 00:01:30,939
자 여기 우리의 친구 public void actionPerformed가 있습니다

23
00:01:30,939 --> 00:01:32,939
자 여기 우리의 친구 public void actionPerformed가 있습니다

24
00:01:32,939 --> 00:01:33,909
자 여기 우리의 친구 public void actionPerformed가 있습니다

25
00:01:33,909 --> 00:01:37,989
그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

26
00:01:37,989 --> 00:01:39,618
그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

27
00:01:39,618 --> 00:01:43,868
액션 이벤트를 우리는 여기서 e라고 지칭해주고요

28
00:01:43,868 --> 00:01:47,560
이것은 어떤 액션이 일어났는지 혹은 어떤 버튼이 클릭되었는지를 확인해 줍니다

29
00:01:47,560 --> 00:01:51,219
기억하고 있길 바래요 
지난 시간 수업을 잠시 돌아봤고요

30
00:01:51,219 --> 00:01:54,109
이제 액션 이벤트가 생겼을 때, 몇 가지 할 일이 있다고 했었죠

31
00:01:55,140 --> 00:01:58,250
가장 중요한 것은

32
00:01:58,250 --> 00:02:02,109
어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

33
00:02:02,109 --> 00:02:03,429
어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

34
00:02:03,430 --> 00:02:05,500
이렇게 하는 거죠

35
00:02:05,500 --> 00:02:09,360
일단 문자열 cmd를 만듭니다 command의 줄임말이고요

36
00:02:09,360 --> 00:02:12,420
이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

37
00:02:12,419 --> 00:02:15,598
이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

38
00:02:16,599 --> 00:02:19,009
자 여기서 e.cmd = e.getActionCommand를 써주세요

39
00:02:19,009 --> 00:02:22,479
자 여기서 e.cmd = e.getActionCommand를 써주세요

40
00:02:22,479 --> 00:02:26,158
. getActionCommand가 하는 일은 바로

41
00:02:26,158 --> 00:02:30,098
상호작용자의 이름을 문자열로 리턴시켜 주는 것입니다

42
00:02:30,098 --> 00:02:33,039
그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

43
00:02:33,039 --> 00:02:33,609
그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

44
00:02:33,610 --> 00:02:38,240
그리고 몇 개의 if를 이 cmd를 바탕으로 여기 써줍니다

45
00:02:38,240 --> 00:02:40,909
if(cmd.equal)으로 확인해서 어떤 버튼이 눌려졌는 지에 따라 액션을 취해 줄 수 있도록

46
00:02:40,909 --> 00:02:42,549
버튼의 이름을 확인 할 수 있습니다

47
00:02:42,549 --> 00:02:46,248
사실 이 액션 코맨드cmd보다는

48
00:02:46,248 --> 00:02:47,650
ActionEvent e를 활용해서 할 수 있는 것이 더 많습니다

49
00:02:47,650 --> 00:02:51,140
이걸 지난 수업 때 간단히 봤었는데요
우리가 했던 프로그램에서요

50
00:02:51,139 --> 00:02:54,269
이제 이걸 좀 더 배워봅시다 좀 더 시간을 들여서요

51
00:02:54,270 --> 00:02:56,729
이제 저희가 원하는 것은 e에서 액션 코맨드를 알아내는 것이 아닙니다

52
00:02:56,729 --> 00:03:00,719
액션의 소스를 직접 가져오는 것을 바라죠

53
00:03:00,718 --> 00:03:02,848
액션의 소스를 직접 가져오는 것을 바라죠

54
00:03:02,848 --> 00:03:06,988
자, 여기서 재밌는 것은 getSource가 리턴하는 내용입니다

55
00:03:06,989 --> 00:03:08,769
여기선 잠시 세미콜론을 뺄게요

56
00:03:08,769 --> 00:03:12,748
getSource는 오브젝트(객체)를 리턴해 줍니다

57
00:03:12,748 --> 00:03:17,579
이벤트를 발생시키는 오브젝트 자체를 리턴해주죠

58
00:03:17,580 --> 00:03:19,809
즉, 버튼을 클릭했다면

59
00:03:19,808 --> 00:03:23,408
e.getActionCommand는 버튼의 이름을 리턴해주고

60
00:03:23,408 --> 00:03:27,558
e.getSource는 버튼 오브젝트의 레퍼런스를 리턴해 줍니다

61
00:03:27,558 --> 00:03:31,149
즉 오브젝트를 참조할 수 있게 되는 겁니다

62
00:03:31,149 --> 00:03:31,679
즉 오브젝트를 참조할 수 있게 되는 겁니다

63
00:03:31,679 --> 00:03:34,818
이것은 어떤 의미를 가질까요

64
00:03:34,818 --> 00:03:38,149
여기서 이것은 여러분이 초기화를 설정 할 때

65
00:03:38,150 --> 00:03:40,669
여기서 이것은 여러분이 초기화를 설정 할 때

66
00:03:40,669 --> 00:03:43,110
new JButton을 해줍니다

67
00:03:43,110 --> 00:03:44,540
new JButton을 해줍니다

68
00:03:44,539 --> 00:03:46,179
new JButton을 해줍니다

69
00:03:46,179 --> 00:03:50,729
이걸 hi라고 할게요. 알겠죠

70
00:03:50,729 --> 00:03:55,489
그리고 hi = new JButton을 해주고요

71
00:03:55,489 --> 00:03:58,079
hi를 인스턴스 변수로 만든거죠

72
00:03:58,079 --> 00:04:02,400
그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

73
00:04:02,400 --> 00:04:03,140
그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

74
00:04:03,139 --> 00:04:10,139
hi라는 변수를 선언했고요, JButton입니다

75
00:04:10,479 --> 00:04:14,280
그리고 초기화 메소드에서

76
00:04:14,280 --> 00:04:17,718
이 버튼에 라벨 hi를 붙여 생성합니다

77
00:04:17,718 --> 00:04:20,930
그런 다음 이것을 컨트롤 바에 add해 줍니다

78
00:04:20,930 --> 00:04:25,090
예를 들어 이 hi를 SOUTH 컨트롤 바에 add시켜 주죠

79
00:04:25,089 --> 00:04:28,729
여기에 add하는 게 일반적이라서요

80
00:04:28,730 --> 00:04:30,450
버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

81
00:04:30,449 --> 00:04:31,870
버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

82
00:04:31,870 --> 00:04:35,269
이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

83
00:04:35,269 --> 00:04:36,008
이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

84
00:04:36,009 --> 00:04:38,199
그리고 이 버튼이 클릭 될 때를 위한 액션 리스너를 add해 줍니다

85
00:04:38,199 --> 00:04:40,180
이제 버튼이 클릭 되면

86
00:04:40,180 --> 00:04:41,310
이 버튼의 cmd로

87
00:04:41,310 --> 00:04:42,449
이 버튼의 이름을 가져오라고 요청할 수 있어요

88
00:04:42,449 --> 00:04:47,460
혹은 액션 이벤트에게 액션 코맨드의 이름을 가져오게 할 수 있죠

89
00:04:47,459 --> 00:04:52,089
그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

90
00:04:52,089 --> 00:04:55,739
그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

91
00:04:55,740 --> 00:04:58,250
이제 처리하고 싶은 대로 할 수 있습니다

92
00:04:58,250 --> 00:05:01,379
예를 들면 스크린에 뭔가를 출력해 주던가 하는 거죠

93
00:05:01,379 --> 00:05:04,639
이게 이걸 쓰는 한 가지 방법이고요

94
00:05:04,639 --> 00:05:07,519
고전적이 방법이기도 하죠

95
00:05:07,519 --> 00:05:09,108
지난 시간에 본 겁니다

96
00:05:09,108 --> 00:05:13,308
이걸 쓰는 또 다른 방법으로는 getSource를 이용하는 것입니다

97
00:05:13,309 --> 00:05:16,879
cmd의 이름을 가져와 hi와 같은지 확인하는 것과 달리

98
00:05:16,879 --> 00:05:20,960
e.getSource를 호출하는 방법입니다

99
00:05:20,959 --> 00:05:24,359
사실, 이 방법을 사용하면 이 cmd 라인은 더 이상 필요가 없게 됩니다

100
00:05:24,360 --> 00:05:27,908
지우지는 않고 코멘트 처리 하겠습니다

101
00:05:27,908 --> 00:05:29,538
e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

102
00:05:29,538 --> 00:05:33,509
e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

103
00:05:33,509 --> 00:05:37,099
그럼 저는 이 리턴되는 오브젝트가

104
00:05:37,100 --> 00:05:38,509
제 hi 버튼이 맞는 지 확인할 겁니다

105
00:05:38,509 --> 00:05:44,509
여기서, 직접적으로 hi와 equal 하는 지 확인하고

106
00:05:44,509 --> 00:05:47,850
맞으면 원하는 데로 처리해 줍니다 아까와 똑같이 처리하겠습니다

107
00:05:47,850 --> 00:05:49,580
내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

108
00:05:49,579 --> 00:05:52,329
내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

109
00:05:52,329 --> 00:05:56,280
이 두 가지 방식의 차이는

110
00:05:56,279 --> 00:05:57,538
하나는 이름을 문자열로 사용한다는 것이고

111
00:05:57,538 --> 00:06:01,269
다른 하나는 실제 오브젝트를 사용한다는 것입니다

112
00:06:01,269 --> 00:06:02,810
다른 하나는 실제 오브젝트를 사용한다는 것입니다

113
00:06:02,810 --> 00:06:06,459
이제 이게 무엇인지 깊이 생각해봅시다

114
00:06:06,459 --> 00:06:10,430
이름을 이용할 때 우리는 실제 오브젝트까지 손 댈 필요가 없었죠

115
00:06:10,430 --> 00:06:12,389
이것은 즉 실제 오브젝트를 사용한다면

116
00:06:12,389 --> 00:06:15,918
우리는 이것을 인스턴스 변수로 사용할 필요가 없을 거라는 겁니다

117
00:06:15,918 --> 00:06:20,109
이것을 인스턴스 변수로서 사용할 일은

118
00:06:20,110 --> 00:06:24,250
이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

119
00:06:24,250 --> 00:06:27,560
이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

120
00:06:27,560 --> 00:06:31,399
예제를 하나 보여드리겠습니다
코드로 좀 더 구체적으로 알아봅시다

121
00:06:31,399 --> 00:06:33,459
자, 코드를 보세요

122
00:06:33,459 --> 00:06:36,448
이게 기본적으로 버튼을 만드는 코드 입니다

123
00:06:36,449 --> 00:06:40,189
이게 기본적으로 버튼을 만드는 코드 입니다

124
00:06:40,189 --> 00:06:43,339
버튼 이름을 hi라고 했고요

125
00:06:43,339 --> 00:06:46,909
서쪽 영역에 넣었고요
그리고 버튼이 클릭되는 상황을 알아챌 수 있게

126
00:06:46,910 --> 00:06:48,019
액션 리스너를 add하였습니다

127
00:06:48,019 --> 00:06:50,280
버튼이 클릭되면

128
00:06:50,279 --> 00:06:54,019
클릭된 버튼이 내가 만든 버튼인지를 확인하고요

129
00:06:54,019 --> 00:06:57,288
저쪽의 hi대신에 여기 실제로 호출되는 hi버튼이 있고요

130
00:06:57,288 --> 00:06:57,978
이걸 칠판에서는 자리를 좀 덜 차지하게 줄여썼어요

131
00:06:57,978 --> 00:07:02,639
클릭된 게 hi버튼이라면

132
00:07:02,639 --> 00:07:04,680
화면에 hello가 출력될 겁니다

133
00:07:04,680 --> 00:07:07,399
계속해서 이 프로그램을 실행해보죠

134
00:07:07,399 --> 00:07:09,709
계속해서 이 프로그램을 실행해보죠

135
00:07:09,709 --> 00:07:13,288
hi를 클릭하면 전에 봤던 게 나옵니다

136
00:07:13,288 --> 00:07:14,318
hi를 클릭할 때마다 hello가 화면에 뜨죠

137
00:07:14,319 --> 00:07:17,289
이제, 이걸 조금 다른 방식으로 활용할 수 있습니다

138
00:07:17,288 --> 00:07:19,769
지난 시간에 봤었던 것처럼요

139
00:07:19,769 --> 00:07:21,990
자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

140
00:07:21,990 --> 00:07:25,840
자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

141
00:07:25,839 --> 00:07:30,239
한 줄의 코드로요. 왜냐면 버튼을 저장할 변수가 필요 없었기 때문이었습니다

142
00:07:30,240 --> 00:07:33,800
여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

143
00:07:33,800 --> 00:07:35,550
여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

144
00:07:35,550 --> 00:07:37,939
그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

145
00:07:37,939 --> 00:07:39,329
그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

146
00:07:39,329 --> 00:07:42,060
cmd는 버튼의 이름일 것이고요

147
00:07:42,060 --> 00:07:46,220
그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

148
00:07:46,220 --> 00:07:47,930
그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

149
00:07:47,930 --> 00:07:51,019
왜냐면 이게 내가 필요한 이름을 전달해 주기 때문에요

150
00:07:51,019 --> 00:07:53,918
결과적으로, 여기서 인스턴스 변수가 필요없다는 것에 주목해주세요

151
00:07:53,918 --> 00:07:56,589
이게 바로 거래입니다

152
00:07:56,589 --> 00:07:59,299
이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

153
00:07:59,300 --> 00:08:00,819
이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

154
00:08:00,819 --> 00:08:02,959
이런 케이스에는 인스턴스 변수가 필요하고

155
00:08:02,959 --> 00:08:05,508
이런 케이스에는 인스턴스 변수가 필요하고

156
00:08:05,509 --> 00:08:09,959
아 잘못된 줄이네요

157
00:08:11,369 --> 00:08:13,810
인스턴스 변수가 있어야 하는 경우는

158
00:08:13,810 --> 00:08:16,360
다른 메소드에서 이 변수를 참조해야 할 경우입니니다

159
00:08:16,360 --> 00:08:17,778
다른 메소드에서 이 변수를 참조해야 할 경우입니니다

160
00:08:17,778 --> 00:08:21,569
자 이렇게 버튼을 생성했고요

161
00:08:21,569 --> 00:08:23,650
이걸 어딘가에 저장(store)했고요

162
00:08:23,649 --> 00:08:26,558
이걸 다른 메소드에서 참조할 수 있어야 합니다

163
00:08:26,559 --> 00:08:27,629
그래서 인스턴스 변수가 필요해 지는 겁니다

164
00:08:27,629 --> 00:08:31,309
만약 다른 메소드에서 이것을 참조할 필요가 없다면

165
00:08:31,309 --> 00:08:34,040
만약 다른 메소드에서 이것을 참조할 필요가 없다면

166
00:08:34,039 --> 00:08:37,019
두 번 째 경우처럼 되는 것이죠

167
00:08:37,019 --> 00:08:41,149
자 이렇게 참조가 필요 없는 경우에는 이걸 저장할 필요도 없죠

168
00:08:41,149 --> 00:08:48,149
여기에 대해 질문?

169
00:08:53,679 --> 00:08:56,819
그게 학생의 로직 내의 버그(오류)입니다
컴퓨터는 두 버튼에 동시에 같은 이름을 주었을 경우

170
00:08:56,820 --> 00:09:00,220
사용자가 둘 중 어떤 버튼을 이용한 것인지 알아내려고 하지 않습니다

171
00:09:00,220 --> 00:09:01,879
난 모른다 이런 식이죠

172
00:09:01,879 --> 00:09:04,279
그게 문제를 발생시켜요 그러니까 이런 짓은 하지 마세요

173
00:09:04,279 --> 00:09:07,759
이렇게 해서 어떤 일이 일어나는 지 궁금하다면 한 번 시도해 보시고요

174
00:09:07,759 --> 00:09:10,970
이것은 컴퓨터 실행의 오류가 아니라 논리적 오류입니다

175
00:09:10,970 --> 00:09:17,970
또 다른 질문 있나요? 네?

176
00:09:19,129 --> 00:09:21,708
그런 식의 접근도 이 케이스와 비슷합니다
실제 버튼을 얻는 거죠

177
00:09:21,708 --> 00:09:25,989
여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

178
00:09:25,990 --> 00:09:29,330
여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

179
00:09:29,330 --> 00:09:32,570
여전히 우리가 만든 오브젝트의 레퍼런스를 리턴해 줄 겁니다

180
00:09:32,570 --> 00:09:35,990
이제 문제는 뭐냐면 이제 어떤 오브젝트와 equal한 것인 가를 확인할 방도가 없다는 겁니다

181
00:09:35,990 --> 00:09:38,730
이걸 인스턴스 변수로 만들기 않았다면요

182
00:09:38,730 --> 00:09:42,430
이게 hi버튼과 같은 것인지 확인할 수가 없어요

183
00:09:42,429 --> 00:09:45,559
그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

184
00:09:45,559 --> 00:09:46,649
그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

185
00:09:46,649 --> 00:09:48,129
이 녀석은 hi버튼에 대한 포인터를 리턴해 주고요

186
00:09:48,129 --> 00:09:51,269
그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

187
00:09:51,269 --> 00:09:52,310
그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

188
00:09:52,309 --> 00:09:55,229
이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

189
00:09:55,230 --> 00:09:56,070
이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

190
00:09:56,070 --> 00:09:59,110
이걸 실제 hi버튼과 비교할 방법이 없어요

191
00:09:59,110 --> 00:10:01,990
이게 바로 이걸 저장해야 하는 이유랍니다

192
00:10:01,990 --> 00:10:05,129
좋아요, 이 두 가지 다른 방식을 어째서 보여주는가?

193
00:10:05,129 --> 00:10:08,279
그 이유는 이제 여러분이 상호작용자들을 실제로 활용하게 되면서

194
00:10:08,279 --> 00:10:11,470
이러한 측면을 사용하게 될 것이기 때문입니다

195
00:10:11,470 --> 00:10:13,379
이러한 측면을 사용하게 될 것이기 때문입니다

196
00:10:13,379 --> 00:10:15,620
자 이제 다음으로 할 것은요

197
00:10:15,620 --> 00:10:18,649
항상 말하지만 프로그램을 만들 때 항상 유저들이 콘솔창에서 뜨는 게 아니고

198
00:10:18,649 --> 00:10:22,889
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

199
00:10:22,889 --> 00:10:24,419
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

200
00:10:24,419 --> 00:10:27,599
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

201
00:10:27,600 --> 00:10:30,269
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

202
00:10:30,269 --> 00:10:31,779
그러므로 이제 이 예제를 함께 봅시다

203
00:10:31,779 --> 00:10:35,759
그러므로 이제 이 예제를 함께 봅시다

204
00:10:35,759 --> 00:10:39,740
프로그램에서 textField라 불리는 게 있습니다

205
00:10:39,740 --> 00:10:43,019
내 이름이 Mehran이잖아요

206
00:10:43,019 --> 00:10:44,949
그럼 hello, Mehran 이렇게 나오고

207
00:10:44,950 --> 00:10:48,800
만약 Sally면 hello, Sally이렇게 출력되게 하고 싶어요

208
00:10:48,799 --> 00:10:50,419
이걸 텍스트 필드를 이용하여 할 수 있습니다

209
00:10:50,419 --> 00:10:54,269
이걸 텍스트 필드를 이용하여 할 수 있습니다

210
00:10:54,269 --> 00:10:55,870
이걸 텍스트 필드를 이용하여 할 수 있습니다

211
00:10:55,870 --> 00:10:59,019
상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

212
00:10:59,019 --> 00:11:01,100
상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

213
00:11:01,100 --> 00:11:04,350
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

214
00:11:04,350 --> 00:11:05,290
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

215
00:11:05,289 --> 00:11:07,370
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

216
00:11:09,940 --> 00:11:12,500
자 이걸 어떻게 만들까요?

217
00:11:12,500 --> 00:11:13,948
일단 text field라 불리는 상호작용자를 만들어야겠죠

218
00:11:13,948 --> 00:11:18,370
일단 text field라 불리는 상호작용자를 만들어야겠죠

219
00:11:18,370 --> 00:11:21,840
기본적으로, 텍스트 필드는 여러분이 봤던 겁니다

220
00:11:21,840 --> 00:11:25,950
텍스트를 입력할 수 있는 공간이 있는 상호작용자입니다

221
00:11:25,950 --> 00:11:28,580
이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

222
00:11:28,580 --> 00:11:30,889
이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

223
00:11:30,889 --> 00:11:35,079
여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

224
00:11:35,078 --> 00:11:37,199
여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

225
00:11:37,200 --> 00:11:41,670
만들면 실제로 상자모양이 생깁니다. 그게 다에요

226
00:11:41,669 --> 00:11:46,319
만약 거기에 라벨을 add하고 싶다면

227
00:11:46,320 --> 00:11:48,620
앞에서 이름을 add해 주었던 것처럼 해주어야 합니다

228
00:11:48,620 --> 00:11:51,210
이걸 어떻게 하는지는 잠시 뒤에 보여드리고요

229
00:11:51,210 --> 00:11:53,580
자 상자모양이 생기고 그 안에 뭔가를 쓰고 엔터키를 칩니다

230
00:11:53,580 --> 00:11:58,020
그럼 잠재적으로 이벤트가 발생합니다.

231
00:11:58,019 --> 00:11:59,590
그럼 잠재적으로 이벤트가 발생합니다.

232
00:11:59,590 --> 00:12:03,649
이걸 또 어떻게 설정할까요?

233
00:12:03,649 --> 00:12:08,429
자 우리가 만들려고 하는 것은 바로 JTextField입니다

234
00:12:08,429 --> 00:12:12,579
이전에 봤던 체크박스나 콤보박스 등과 같은 상호작용자고요

235
00:12:12,580 --> 00:12:13,370
이것을 JTextField라 합니다

236
00:12:13,370 --> 00:12:15,370
저는 이 약자를 따서 TF라고 이름 짓겠습니다

237
00:12:15,370 --> 00:12:17,009
저는 이 약자를 따서 TF라고 이름 짓겠습니다

238
00:12:17,009 --> 00:12:21,799
자 이걸 새로 하나 생성하는 방법은 new JTextField를 해주는 거고요

239
00:12:21,799 --> 00:12:26,039
인자를 줍니다. 여기서 재미있는 게 있죠

240
00:12:26,039 --> 00:12:27,469
여러분은 라벨을 주는 것이 아닙니다

241
00:12:27,470 --> 00:12:30,830
텍스트 필드는 라벨이 딸려 있지 않아요
라벨을 별개로 만들어 주어야 하죠

242
00:12:30,830 --> 00:12:35,389
여기에 주는 인자는 바로 텍스트 필드의 사이즈 입니다

243
00:12:35,389 --> 00:12:39,299
이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

244
00:12:39,299 --> 00:12:43,309
이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

245
00:12:43,309 --> 00:12:46,789
만약 폰트를 설정해 준다면 사이즈는 10M이 됩니다

246
00:12:46,789 --> 00:12:50,349
여기서 M은 그 폰트의 가장 넓은 문자입니다

247
00:12:50,350 --> 00:12:52,889
모를까 봐 알려드려요

248
00:12:52,889 --> 00:12:57,259
모를까 봐 알려드려요

249
00:12:57,259 --> 00:12:57,779
모를까 봐 알려드려요

250
00:12:57,779 --> 00:13:00,360
사용자가 엔터를 칠 때 말입니다

251
00:13:00,360 --> 00:13:03,990
다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

252
00:13:03,990 --> 00:13:04,620
다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

253
00:13:04,620 --> 00:13:08,289
actionPerformed를 호출하지 않을 겁니다

254
00:13:08,289 --> 00:13:11,639
그러므로 우리가 해 야 할 것은 텍스트 필드를 만든 후에

255
00:13:11,639 --> 00:13:13,490
이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

256
00:13:13,490 --> 00:13:17,430
이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

257
00:13:17,429 --> 00:13:20,748
이걸 하는 방법은 좀 펑키한데,

258
00:13:20,749 --> 00:13:22,778
일단 textfield.addActionLestener를 해주고요

259
00:13:22,778 --> 00:13:24,889
textfield.addActionLestener

260
00:13:24,889 --> 00:13:29,049
textfield.addActionLestener

261
00:13:29,049 --> 00:13:31,689
알겠죠?

262
00:13:31,690 --> 00:13:35,180
실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

263
00:13:35,179 --> 00:13:37,629
실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

264
00:13:37,629 --> 00:13:38,700
여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

265
00:13:38,700 --> 00:13:40,200
여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

266
00:13:40,200 --> 00:13:42,840
그리고 다른 사람들에게 액션을 생성해 주었을 때를 알려주는 겁니다

267
00:13:42,840 --> 00:13:46,649
그래서 이걸 넘긴 거에요

268
00:13:46,649 --> 00:13:48,899
그래서 이걸 넘긴 거에요

269
00:13:48,899 --> 00:13:52,459
하지만 매번 텍스트 필드를 생성할 때마다

270
00:13:52,460 --> 00:13:53,970
모든 텍스트 필드에 이걸 해 줄 필요는 없습니다

271
00:13:53,970 --> 00:13:57,360
이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

272
00:13:57,360 --> 00:13:57,959
이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

273
00:13:57,958 --> 00:14:01,709
한 번만 해주면 됩니다.

274
00:14:01,710 --> 00:14:03,479
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

275
00:14:03,479 --> 00:14:05,250
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

276
00:14:05,250 --> 00:14:08,929
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

277
00:14:08,929 --> 00:14:13,279
러므로 이걸 생성한 뒤 이 줄을 설정하고 이걸 프로그램의 어딘 가에 add해 주어야 하는 데요

278
00:14:13,279 --> 00:14:17,470
프로그램 내에서, add TF를 해주어야 합니다

279
00:14:17,470 --> 00:14:18,769
프로그램 내에서, add TF를 해주어야 합니다

280
00:14:18,769 --> 00:14:22,649
add TF를 서쪽 영역에 해줍시다

281
00:14:22,649 --> 00:14:25,220
지금까지 그랬던 것처럼요

282
00:14:25,220 --> 00:14:29,800
누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

283
00:14:29,799 --> 00:14:34,669
누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

284
00:14:34,669 --> 00:14:37,279
자 이렇게 설정되었을 때

285
00:14:37,279 --> 00:14:39,980
이 이벤트를 생성한 텍스트 필드가 무엇인지 어떻게 알죠?

286
00:14:39,980 --> 00:14:43,700
여러 개의 텍스트 필드가 있고

287
00:14:43,700 --> 00:14:47,030
그 중 하나에 사용자가 엔터를 쳐넣을 때요

288
00:14:47,029 --> 00:14:50,839
e.getSource를 해주면 되죠

289
00:14:50,840 --> 00:14:54,740
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

290
00:14:54,740 --> 00:14:57,769
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

291
00:14:57,769 --> 00:15:00,139
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

292
00:15:00,139 --> 00:15:03,809
여기서, 모든 종류의 경고창이 뜹니다

293
00:15:03,809 --> 00:15:07,039
그러므로 여기서, 우리는 박스에 들어있는 텍스트와 hi를 합쳐서 println해 주고 싶은 건데요

294
00:15:07,039 --> 00:15:11,549
이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

295
00:15:11,549 --> 00:15:15,359
이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

296
00:15:15,360 --> 00:15:20,600
그럼 알아서 텍스트를 리턴해 줄 겁니다

297
00:15:20,600 --> 00:15:24,119
엔터를 치면 박스에 있던 문자열을 리턴해 주죠

298
00:15:24,119 --> 00:15:27,200
그럼 hi와 이 리턴된 텍스트를 출력해 줍니다

299
00:15:27,200 --> 00:15:30,440
프로그램에서 봤던 것과 같습니다

300
00:15:30,440 --> 00:15:32,789
그건 hi가 아니라 hello였다는 걸 제외하면요

301
00:15:32,788 --> 00:15:34,419
그건 hi가 아니라 hello였다는 걸 제외하면요

302
00:15:34,419 --> 00:15:37,860
하지만 경고음 사라져야 합니다

303
00:15:37,860 --> 00:15:43,820
이렇게 코드를 써서 생기는 문제는 뭘까요?

304
00:15:43,820 --> 00:15:47,390
이건 인스턴스 변수가 아닙니다. 그렇죠?

305
00:15:47,389 --> 00:15:50,960
그러므로 현재는 방도가 없어요

306
00:15:51,840 --> 00:15:56,610
여기 이게 init메소드고 이 밖에서 TF를 참조하려면요
그래서 인스턴스 변수를 생성해야 하는 것입니다

307
00:15:56,610 --> 00:15:59,450
알겠죠? 이게 init메소드고요 이 앞은 public void고요

308
00:15:59,450 --> 00:16:04,110
이 TF를 클래스 어딘가에서 예를 들어 여기서요

309
00:16:04,110 --> 00:16:07,629
내가 l바를 선언한 곳이죠

310
00:16:07,629 --> 00:16:08,139
클래스 아래쪽 어딘가 입니다

311
00:16:08,139 --> 00:16:11,990
여기다 private JTextField TF를 해줍니다

312
00:16:11,990 --> 00:16:12,830
private JTextField TF

313
00:16:12,830 --> 00:16:14,070
private JTextField TF

314
00:16:14,070 --> 00:16:15,280
private JTextField TF

315
00:16:15,279 --> 00:16:19,059
그리고 여기서는 선언은 안하고 tf를 new로 생성해 줍니다

316
00:16:19,059 --> 00:16:22,888
이렇게 인스턴스 변수를 선언했습니다

317
00:16:22,889 --> 00:16:25,649
이렇게 인스턴스 변수를 선언했습니다

318
00:16:25,649 --> 00:16:26,870
여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

319
00:16:26,870 --> 00:16:28,750
여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

320
00:16:28,750 --> 00:16:35,320
그럼 코드를 좀 보여드릴게요

321
00:16:35,320 --> 00:16:38,800
자 이게 텍스트 필드 예제입니다

322
00:16:38,799 --> 00:16:41,639
콘솔 프로그램을 확장시키려고 합니다

323
00:16:41,639 --> 00:16:43,730
아직 콘솔로 하고 있잖아요

324
00:16:43,730 --> 00:16:48,149
init메소드에서 name field를 만들게요

325
00:16:48,149 --> 00:16:51,669
nameField가 뭐냐고요? private JTextField입니다.

326
00:16:51,669 --> 00:16:55,279
이렇게 nameField를 정장해놓고요. 이걸 new JTextFiedl(10)으로 초기화 하겠습니다

327
00:16:55,279 --> 00:16:57,759
저기서 썼던 거랑 똑같을 코드죠

328
00:16:57,759 --> 00:17:01,250
이제 추가적으로 좀 더 재밌는 걸 해보죠

329
00:17:01,250 --> 00:17:05,959
박스에 라벨을 붙이려고 합니다

330
00:17:05,959 --> 00:17:10,548
일단 박스를 컨트롤 바에 붙이고

331
00:17:10,548 --> 00:17:13,480
name이라는 new JLabel을 add해 줄 겁니다

332
00:17:13,480 --> 00:17:16,730
name이라는 new JLabel을 add해 줄 겁니다

333
00:17:16,730 --> 00:17:18,000
그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

334
00:17:18,000 --> 00:17:19,880
그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

335
00:17:19,880 --> 00:17:23,160
자 첫째로 이건 그냥 name이라고 써질 거고

336
00:17:23,160 --> 00:17:27,600
그리고 아까의 nameField를 add할게요

337
00:17:27,599 --> 00:17:30,389
즉 name텍스트 옆에 박스를 생성하는 거죠

338
00:17:30,390 --> 00:17:32,280
그리고 아까 말했던 것과 정확히 동일 하게 할겁니다

339
00:17:32,279 --> 00:17:35,160
액션리스너를 add해 주고 해서

340
00:17:35,160 --> 00:17:36,820
당신이 무엇인가

341
00:17:36,819 --> 00:17:38,259
상호작용을 하면

342
00:17:38,259 --> 00:17:41,799
그것을 알 수 있게 하는 겁니다

343
00:17:43,808 --> 00:17:46,609
. 이것은 즉 이제 actionPerformed가 호출되고

344
00:17:46,609 --> 00:17:50,209
액션리스너에 대한 이벤트를 생성하는 것이

345
00:17:50,210 --> 00:17:51,528
가능해진다는 이야기입니다

346
00:17:51,528 --> 00:17:55,109
actionPerformed에서 e.getSource를 해주고요
이걸 nameField와 비교할 수 있습니다

347
00:17:55,109 --> 00:17:57,619
이걸 밑에 인스턴스 변수로 저장해 두었으니까요

348
00:17:57,619 --> 00:18:01,719
hello를 써주고 이걸 nameField의 텍스트와 연계시켜야죠

349
00:18:03,750 --> 00:18:06,109
텍스트 크기를 좀 더 키워볼게요

350
00:18:06,109 --> 00:18:09,309
자, 조금 더 크게요 어떻게 하는지 보세요

351
00:18:09,309 --> 00:18:11,029
제가 좋아하는 서체인Courier 24포인트로 할 게요

352
00:18:11,029 --> 00:18:14,639
제가 좋아하는 서체인Courier 24포인트로 할 게요

353
00:18:14,640 --> 00:18:17,090
좋아요 더 크게

354
00:18:22,390 --> 00:18:24,740
자 다시 한 번

355
00:18:24,740 --> 00:18:28,509
Mahran 하고 엔터치면 hello, Mehran이 뜹니다. 보이죠? 
엔터를 칠 때마다 이벤트가 일어나죠.

356
00:18:28,509 --> 00:18:32,920
엔터, 엔터, 엔터. 보세요, 텍스트가 나오죠

357
00:18:32,920 --> 00:18:36,860
그리고 이건 또 다른 거. 재밌죠

358
00:18:36,859 --> 00:18:39,158
Sally... 스크롤을 움직여요. 많이 재미있진 않죠

359
00:18:39,159 --> 00:18:43,539
2분정도 하기에 딱 좋아요

360
00:18:44,970 --> 00:18:48,650
이런 식으로 하는 거에요 이제 텍스트 박스로부터

361
00:18:48,650 --> 00:18:49,740
정보(텍스트)를 얻는 방법을 아셨죠

362
00:18:49,740 --> 00:18:52,259
텍스트 박스에 대해 질문?

363
00:18:52,259 --> 00:18:56,500
네, 뒤에 학생

364
00:18:56,500 --> 00:19:00,380
네, 기본적으로 레이아웃은 뭔가를 add해 줄 때마다

365
00:19:03,319 --> 00:19:06,878
왼쪽에서 오른 쪽으로 쭉 확장됩니다

366
00:19:06,878 --> 00:19:10,519
어떤 영역이던 간에요 이 경우에는, 서쪽영역이죠

367
00:19:10,519 --> 00:19:14,288
모든 게 가운데로 몰렸죠. 여기에 공간을 주고 싶다면 JLabel을 더해주면 됩니다 그러면 이것들 사이에 공간이 더 넓어지겠죠

368
00:19:14,288 --> 00:19:17,628
거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

369
00:19:17,628 --> 00:19:19,990
거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

370
00:19:19,990 --> 00:19:23,490
또 다른 재미있는 게 있습니다

371
00:19:23,490 --> 00:19:25,970
사실 텍스트 필드에 이름을 줄 수 있습니다

372
00:19:25,970 --> 00:19:29,089
이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

373
00:19:29,089 --> 00:19:31,579
이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

374
00:19:31,579 --> 00:19:35,399
이름을 줘서 그 이름으로 참조해 봅시다

375
00:19:35,400 --> 00:19:38,798
괜찮죠? 이름을 만들 수 있어요

376
00:19:38,798 --> 00:19:42,490
여기 완전히 똑같은 예제가 있습니다
약간의 차이가 있지만

377
00:19:42,490 --> 00:19:43,160
조금 달라요

378
00:19:43,160 --> 00:19:47,538
전과 동일한 코드입니다

379
00:19:47,538 --> 00:19:50,230
내가 namefield를 생성했다는 걸 빼면요

380
00:19:50,230 --> 00:19:53,400
여기에 액션 코맨드를 주는데요

381
00:19:53,400 --> 00:19:57,540
그 액션 코맨드는 name일 것입니다

382
00:19:57,539 --> 00:20:02,000
그리고 이런 이벤트를 생성할 때마다 그

383
00:20:02,000 --> 00:20:04,619
이벤트의 근원이 얘인지 확인합니다

384
00:20:04,619 --> 00:20:06,109
혹은, 이름을 주고

385
00:20:06,109 --> 00:20:10,529
버튼에 했던 것과 똑같은 일을 할 수 있어요

386
00:20:10,529 --> 00:20:14,538
이 밑에서 getActionCommand를 하고요 이건 문자열을 반환하죠

387
00:20:14,538 --> 00:20:15,650
즉 이벤트를 생성하는 오브젝트의 이름을요

388
00:20:15,650 --> 00:20:20,560
이게 name과 equal하나 봅니다
즉 내가 주었던 이름과요

389
00:20:20,559 --> 00:20:23,289
버튼에서 했던 걸 돌아볼 수 있어요

390
00:20:23,289 --> 00:20:26,720
버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

391
00:20:26,720 --> 00:20:27,989
버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

392
00:20:27,989 --> 00:20:29,519
혹은 버튼의 소스로도 확인 해 볼 수 있었죠

393
00:20:29,519 --> 00:20:31,970
혹은 버튼의 소스로도 확인 해 볼 수 있었죠

394
00:20:31,970 --> 00:20:35,229
JTextField. 이걸 거의 항상 getSource를 사용해 이용할 수 있어요

395
00:20:35,229 --> 00:20:38,528
하지만 이름으로도 참조할 수 있고요

396
00:20:38,528 --> 00:20:42,249
하지만 실제 화면상에 이 이름은 보이지 않습니다

397
00:20:42,249 --> 00:20:45,528
하지만 실제 화면상에 이 이름은 보이지 않습니다

398
00:20:45,528 --> 00:20:47,440
화면상에 뭔가 텍스트가 뜨길 바란다면

399
00:20:47,440 --> 00:20:50,909
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

400
00:20:50,909 --> 00:20:52,050
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

401
00:20:52,049 --> 00:20:59,049
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

402
00:21:01,109 --> 00:21:04,079
이게 최대치입니다

403
00:21:04,079 --> 00:21:09,369
이게 최대치입니다

404
00:21:09,369 --> 00:21:12,619
네, namefield는 l바에 있어요

405
00:21:12,619 --> 00:21:17,489
더 이상 참조하지 않으니까 필요 없어요

406
00:21:17,490 --> 00:21:21,359
이걸 복사해서 붙여 넣기 해볼 게요

407
00:21:21,359 --> 00:21:23,389
이걸 복사해서 붙여 넣기 해볼 게요

408
00:21:28,220 --> 00:21:33,309
아 이런. 이게 바로 이걸 여기 썼던 이유입니다

409
00:21:33,309 --> 00:21:36,690
아 이런. 이게 바로 이걸 여기 썼던 이유입니다

410
00:21:36,690 --> 00:21:40,360
이 텍스트를 얻기 위해

411
00:21:40,359 --> 00:21:41,098
이걸 참조할 필요가 있죠

412
00:21:41,098 --> 00:21:43,838
솔직히, 이걸 e.getSource로 처리해도 됩니다. 이 텍스트를 얻는 걸요

413
00:21:43,838 --> 00:21:45,159
그래서 꼭 필요하지 않지만, 이게 나아요

414
00:21:45,160 --> 00:21:49,060
이게 훨씬 깔끔한 방법이거든요

415
00:21:49,059 --> 00:21:49,940
이걸 없애 버리죠

416
00:21:49,940 --> 00:21:52,100
이걸 없애 버리죠

417
00:21:53,329 --> 00:22:00,329
JTextField에 대해 또 다른 질문?

418
00:22:01,950 --> 00:22:03,980
어.. 네

419
00:22:03,980 --> 00:22:05,048
네, 할 수 있어요

420
00:22:05,048 --> 00:22:09,730
20분 뒤에 보여드릴게요

421
00:22:09,730 --> 00:22:12,909
세 자리 옆으로 날라갔네요..
이걸 하기 전에 앞서

422
00:22:12,909 --> 00:22:15,120
지금까지와는 다른 걸 배워봅시다

423
00:22:15,119 --> 00:22:18,459
지금까지는 상호작용자들이

424
00:22:18,460 --> 00:22:19,909
스크린 아래쪽에서

425
00:22:19,909 --> 00:22:22,519
가운데 정렬되어 나와잖아요

426
00:22:22,519 --> 00:22:26,429
이걸 다른 식으로 배치할 수 있을까요
그리고 이러한 걸 가능하게 해주는 것을

427
00:22:26,429 --> 00:22:30,450
그리고 이러한 걸 가능하게 해주는 것은

428
00:22:30,450 --> 00:22:34,970
이상하게도 레이아웃layout입니다

429
00:22:34,970 --> 00:22:39,319
즉 레이아웃이 특정 상호작용자들의 레이아웃을 컨트롤합니다

430
00:22:39,319 --> 00:22:42,618
지금까지 여러분이 여러분의 친구, 콘솔 프로그램

431
00:22:42,618 --> 00:22:45,089
혹은 그래픽 프로그램을

432
00:22:45,089 --> 00:22:48,529
쓰면서 봤던 것은 보더레이아웃입니다

433
00:22:48,529 --> 00:22:50,700
쓰면서 봤던 것은 보더레이아웃입니다

434
00:22:50,700 --> 00:22:54,819
사실 여러분은 이미 보더 레이아웃을 경험해 본거죠
이렇게 생겼습니다

435
00:22:54,819 --> 00:22:58,599
가운데 영역이 있고요. 북쪽, 남쪽, 동쪽, 그리고 서쪽 보더border가 있습니다

436
00:22:58,599 --> 00:23:01,719
그래서 보더레이아웃이라 부르는 거죠

437
00:23:01,720 --> 00:23:02,759
그래서 보더레이아웃이라 부르는 거죠

438
00:23:02,759 --> 00:23:04,150
이 보더 레이아웃에서는

439
00:23:04,150 --> 00:23:07,370
이 보더 레이아웃에서는

440
00:23:07,369 --> 00:23:11,829
가운데 영역에서 액션이 일어났습니다

441
00:23:11,829 --> 00:23:14,439
가운데 영역에서 액션이 일어났습니다

442
00:23:14,440 --> 00:23:18,629
콘솔 프로그램에서는 자동으로 가운데에 콘솔을 add해 주었고요

443
00:23:18,628 --> 00:23:22,928
그게 콘솔 프로그램입니다
그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다

444
00:23:22,929 --> 00:23:26,210
그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다
여기서 여러분이 이것저것을 draw할 수 있었죠.

445
00:23:26,210 --> 00:23:30,380
다른 영역은 오직 뭔가를 그곳에 add해 주었을 때부터 보이기 시작합니다

446
00:23:30,380 --> 00:23:32,440
초기에 오로지 그래픽을 위한

447
00:23:32,440 --> 00:23:36,039
그래픽프로그램을 만들 때 여러분은

448
00:23:36,039 --> 00:23:36,980
서쪽 영역을 보지 못했습니다

449
00:23:36,980 --> 00:23:39,390
그것은 거기에 아무런 상호작용자를 add해 주지 않았기 때문이죠

450
00:23:39,390 --> 00:23:43,860
이러한 상호작용자 영역은 무언가 거기에 얹혀주었을 때만 나타납니다

451
00:23:43,859 --> 00:23:47,099
이러한 것을 컨트롤바라고 부른다고 했었죠
지난 시간에 봤잖아요

452
00:23:47,099 --> 00:23:50,939
그런 다른 종류의 레이아웃은 무엇이 있을까요?
중요한 몇 가지 레이아웃을 공부해 봅시다

453
00:23:50,940 --> 00:23:55,049
첫째로 그리드 레이아웃이라는 게 있습니다

454
00:23:55,049 --> 00:23:59,940
그리드 레이아웃을 이용하려면 일단 이걸 생성해야 하고요

455
00:23:59,940 --> 00:24:04,220
또 그리드 레이아웃은 행과 열로 이루어져 있습니다

456
00:24:04,220 --> 00:24:06,298
또 그리드 레이아웃은 행과 열로 이루어져 있습니다

457
00:24:06,298 --> 00:24:10,219
예를 들어 2행3열로요

458
00:24:10,219 --> 00:24:14,130
그럼 이러한 레이아웃이 나옵니다
이것은 2행 3열을 그리드grid입니다

459
00:24:14,130 --> 00:24:17,070
잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

460
00:24:17,069 --> 00:24:17,798
잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

461
00:24:17,798 --> 00:24:19,690
어쨌든 Conceptually개념적으론 이렇습니다

462
00:24:19,690 --> 00:24:24,110
자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

463
00:24:24,109 --> 00:24:26,319
자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

464
00:24:26,319 --> 00:24:31,058
그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

465
00:24:31,058 --> 00:24:32,028
그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

466
00:24:32,028 --> 00:24:37,169
아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

467
00:24:37,169 --> 00:24:37,690
아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

468
00:24:37,690 --> 00:24:42,028
매번 새 요소를 더할 때 마다 그 행의 맨 마지막 열에 찰 때 까지 차례로 채워지고

469
00:24:42,028 --> 00:24:45,878
자동으로 아래 행으로 내려갑니다
순차적으로 채워집니다

470
00:24:45,878 --> 00:24:46,980
순차적으로 채워집니다

471
00:24:46,980 --> 00:24:49,659
그리드에 차근차근요

472
00:24:49,659 --> 00:24:52,709
그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

473
00:24:52,709 --> 00:24:56,090
그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

474
00:25:00,048 --> 00:25:04,329
그리드 레이아웃을 보여주는 심플한 프로그램입니다

475
00:25:04,329 --> 00:25:05,648
일단 init메소드에서 레이아웃을 생성해줍니다

476
00:25:05,648 --> 00:25:08,309
저는 원래 있던 레이아웃을

477
00:25:08,309 --> 00:25:11,919
다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고 싶습니다

478
00:25:11,920 --> 00:25:16,420
다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고

479
00:25:16,420 --> 00:25:19,870
즉 2행 3열의 그리드로요

480
00:25:19,869 --> 00:25:20,399
이 프로그램에서 흥미로운 점은 
이 그리드 레이아웃 예제를 보시면요

481
00:25:20,400 --> 00:25:22,788
이건 콘솔 프로그램을 확장한 것이 아닙니다

482
00:25:22,788 --> 00:25:26,739
그래픽 프로그램을 확장한 것도 아닙니다

483
00:25:26,739 --> 00:25:29,420
그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

484
00:25:29,420 --> 00:25:31,230
그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

485
00:25:31,230 --> 00:25:35,160
콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

486
00:25:35,160 --> 00:25:39,000
콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

487
00:25:54,950 --> 00:25:56,600
제가 이걸 만든 이유는

488
00:25:56,599 --> 00:26:01,939
그냥 크고 뚱뚱한 버튼들이 보고 싶어서였어요

489
00:26:04,720 --> 00:26:07,970
보세요. 6개 버튼이 화면을 완전 차지했죠

490
00:26:07,970 --> 00:26:09,110
좋습니다

491
00:26:09,109 --> 00:26:11,689
이게 그리드 입니다. 상호작용자들이 그리드를 꽉 채웠어요

492
00:26:11,690 --> 00:26:16,029
이 레이아웃은 화면에서 가능한 한 많은 공간을 차지합니다

493
00:26:16,029 --> 00:26:20,160
더 중요한 것은 그리드 레이아웃의 각 칸을 차지한

494
00:26:20,160 --> 00:26:24,029
상호자용자들이 그 칸의 공간을 최대한 많이 차지한다는 것입니다

495
00:26:24,740 --> 00:26:29,400
그래서 이런 모양이 됩니다 이렇게 차리를 차지하죠

496
00:26:29,400 --> 00:26:34,050
이게 도대체 뭐지 하는 생각이 들 겁니다

497
00:26:34,049 --> 00:26:37,460
이게 도대체 뭐지 하는 생각이 들 겁니다

498
00:26:37,460 --> 00:26:39,659
이런 2인치x3인치만한 버튼 같은 거 필요 없다고요

499
00:26:39,659 --> 00:26:42,000
이 이유에 대해선 지금 이야기 하지 않겠어요

500
00:26:42,000 --> 00:26:43,288
아마 나중에요

501
00:26:43,288 --> 00:26:47,528
사운드 이펙트랑 비슷해요

502
00:26:47,528 --> 00:26:52,720
제가 창을 리사이즈 할 테니 한 번 보세요

503
00:26:52,720 --> 00:26:53,400
모든 버튼은 작고 귀여워요

504
00:26:53,400 --> 00:26:57,530
이게 바로 우리가 레이아웃 매니저를 이용하는 이유입니다

505
00:26:57,529 --> 00:26:59,269
레이아웃이 어떻게 나올지 알 수 있죠

506
00:26:59,269 --> 00:27:02,950
이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

507
00:27:02,950 --> 00:27:04,919
이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

508
00:27:04,919 --> 00:27:08,139
이러한 것들이 어떻게 놓일지는 알아야 합니다

509
00:27:08,138 --> 00:27:11,369
만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

510
00:27:11,369 --> 00:27:15,049
만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

511
00:27:15,049 --> 00:27:17,389
그리드 레이아웃은 그렇게 유용하진 않죠. 볼 만은 하죠. 책을 보면 알 거에요

512
00:27:17,390 --> 00:27:18,799
거기 보면 테이블 레이아웃이라는

513
00:27:18,798 --> 00:27:20,700
또 다른 종류의 레이아웃이 있습니다

514
00:27:20,700 --> 00:27:23,690
또 플로우 레이아웃이라는 것도 있죠
이것은 이야기 하지 않을 거에요

515
00:27:25,960 --> 00:27:28,460
하지만 테이블 레이아웃이라는 게 있다는 거 정도 알아두세요

516
00:27:28,460 --> 00:27:34,100
테이블 레이아웃은 그리드 레이아웃과 거진 비슷합니다

517
00:27:34,099 --> 00:27:36,859
그리드 레이아웃에서처럼 행과 열을 설정해 주고

518
00:27:36,859 --> 00:27:40,229
거기에 차례로 상호작용자를 채워넣을 수 있습니다

519
00:27:40,230 --> 00:27:42,849
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

520
00:27:42,849 --> 00:27:46,798
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

521
00:27:46,798 --> 00:27:48,509
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

522
00:27:48,509 --> 00:27:50,158
무슨 뜻이냐고요

523
00:27:50,159 --> 00:27:53,609
즉 이 부분에 그리드 레이아웃이 아니고

524
00:27:53,608 --> 00:27:55,569
테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

525
00:27:55,569 --> 00:28:00,210
테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

526
00:28:00,210 --> 00:28:04,009
import할 게 더 생기네요

527
00:28:04,009 --> 00:28:06,009
이걸 import해줄게요

528
00:28:06,009 --> 00:28:11,869
이걸 import해줄게요

529
00:28:30,789 --> 00:28:33,799
자 나와라 테이블 레이아웃

530
00:28:39,859 --> 00:28:41,248
테이블 레이아웃의 더 좋을 예를 보여줄게요

531
00:28:41,249 --> 00:28:48,089
테이블 레이아웃의 더 좋을 예를 보여줄게요

532
00:28:50,039 --> 00:28:50,730
가끔은 코드가 이렇게 추해질 때가 있어요

533
00:28:50,730 --> 00:28:54,420
가끔은 코드가 이렇게 추해질 때가 있어요

534
00:28:54,420 --> 00:28:57,019
어쩔 수 없어요

535
00:28:57,019 --> 00:28:57,950
테이블 레이아웃?

536
00:28:57,950 --> 00:29:00,069
나왔네요.

537
00:29:00,069 --> 00:29:01,460
여전히 6개 버튼이 있죠

538
00:29:01,460 --> 00:29:04,659
윈도우도 리사이징 할 수 있고요

539
00:29:04,659 --> 00:29:07,190
하지만 이제 창의 사이즈가 바뀌어도 버튼 사이즈는 그대로 입니다

540
00:29:07,190 --> 00:29:10,200
영역을 꽉 채우지 않아요

541
00:29:10,200 --> 00:29:13,019
그래서 테이블 레이아웃이 그리드 레이아웃보다 아주 조금 더 유용하긴 합니다

542
00:29:13,019 --> 00:29:15,239
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

543
00:29:15,239 --> 00:29:19,029
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

544
00:29:19,029 --> 00:29:22,589
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

545
00:29:22,589 --> 00:29:26,358
사실, 할 수 있죠 그리고 이걸 좀 더 재미지게 보여드릴게요

546
00:29:26,358 --> 00:29:29,408
이건 온도 전환 프로그램입니다

547
00:29:29,409 --> 00:29:31,989
책에 있는 거고요 코드를 따로 보여주진 않겠어요

548
00:29:31,989 --> 00:29:35,809
책에 있으니까. 따로 프린트물을 나눠주지 않아요

549
00:29:35,809 --> 00:29:39,329
기본적인 개념은 degree Fahrenheit라고 써진 라벨을 주고요

550
00:29:39,329 --> 00:29:40,528
또 degree Celsius라는 라벨도 만들어요

551
00:29:40,528 --> 00:29:44,298
그리고 이 안에 값을 주고요
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

552
00:29:44,298 --> 00:29:44,680
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

553
00:29:44,680 --> 00:29:46,240
Celsius에 자동으로 알맞는 값이 채워집니다

554
00:29:46,240 --> 00:29:50,538
32F는 0C고요

555
00:29:50,538 --> 00:29:52,819
또 다른 재밌는 건 굳이 버튼을 누르지 않아도 되게 하는 겁니다

556
00:29:52,819 --> 00:29:56,079
값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

557
00:29:56,079 --> 00:29:57,549
값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

558
00:30:00,038 --> 00:30:02,900
재밌죠. 이런 프로그램을 어떻게 만들까요

559
00:30:02,900 --> 00:30:07,220
첫째로 필요한 건 관리되 것들이 아닙니다

560
00:30:07,220 --> 00:30:10,500
다 그리드에 들어 있고요

561
00:30:10,500 --> 00:30:13,039
2행 3열의 테이블 레이아웃이 필요합니다

562
00:30:14,390 --> 00:30:17,360
여기 놓을 첫 번째 요소는 라벨입니다

563
00:30:17,359 --> 00:30:20,769
그리고 텍스트 필드를 넣습니다

564
00:30:20,769 --> 00:30:22,970
사실 특별한 텍스트필드를 넣어줄 겁니다

565
00:30:22,970 --> 00:30:25,419
두 개의 특성화된 텍스트 필드가 있는데요 인트필드와 더블필드라고 부르는 것이 그것입니다

566
00:30:25,419 --> 00:30:29,570
인티저integer 값 혹은 더블double 값을 얻는다는 보장이 있는 걸 제외하면

567
00:30:29,569 --> 00:30:32,838
일반 텍스트 필드와 다를 바 없습니다

568
00:30:32,838 --> 00:30:37,460
그럼 만약 A를 써넣고 이걸 기온으로 바꾸려고 하면 어떻게 될 지 궁금하시죠

569
00:30:37,460 --> 00:30:40,529
이런, 버튼을 잘못 눌렀습니다

570
00:30:40,529 --> 00:30:43,899
A를 기온으로 바꾸려고 해요 그럼 정수값을 넣으라는 팝업 창이 뜹니다

571
00:30:43,900 --> 00:30:45,880
그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

572
00:30:45,880 --> 00:30:48,720
그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

573
00:30:48,720 --> 00:30:51,690
그리고 버튼을 넣어주는데요
어떻게든 저는 이 버튼과 텍스트 필드를 연결해 주어서

574
00:30:51,690 --> 00:30:53,828
같은 액션을 취하게 하고 싶어요

575
00:30:53,828 --> 00:30:56,418
이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

576
00:30:56,419 --> 00:30:57,560
이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

577
00:30:57,559 --> 00:31:01,389
첫째로 할 것은 레이아웃을 테이블 레이아웃으로 설정해 주는 겁니다

578
00:31:01,390 --> 00:31:05,100
콘솔이나 캔버스가 생성되는 것을 원치 않기 때문에

579
00:31:05,099 --> 00:31:05,859
프로그램을 확장한다는 것에 다시 한 번 주목해주세요

580
00:31:05,859 --> 00:31:08,299
저 전체 레이아웃을 명시하고 싶어요

581
00:31:08,299 --> 00:31:09,819
그래서 프로그램을 확장하는 겁니다

582
00:31:13,538 --> 00:31:16,379
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

583
00:31:16,380 --> 00:31:18,760
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

584
00:31:18,759 --> 00:31:19,569
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

585
00:31:19,569 --> 00:31:23,059
다시 말하지만. 그리고 첫 번째 요소를 add해 주겠습니다

586
00:31:23,059 --> 00:31:25,849
. 제가 첫째로 add할 것은

587
00:31:25,849 --> 00:31:28,169
바로 degrees Fahrenheit를 라벨로 넣어주는 것입니다

588
00:31:28,170 --> 00:31:31,440
그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

589
00:31:31,440 --> 00:31:33,809
그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

590
00:31:33,809 --> 00:31:35,359
이걸 어떻게 만들죠? 이 위쪽에 일단 생성해 줍니다

591
00:31:35,359 --> 00:31:39,269
바로 인스턴스 변수로써 선언해 준거죠

592
00:31:39,269 --> 00:31:43,259
그리고 이건 인트필드입니다

593
00:31:43,259 --> 00:31:44,240
J텍스트 필드가 아니고요

594
00:31:44,240 --> 00:31:47,480
아까 말했듯이 정수를 써넣어주는 데 특성화된 필드입니다

595
00:31:47,480 --> 00:31:50,430
그것 빼고는 텍스트 필드랑 똑같고요

596
00:31:50,430 --> 00:31:54,549
일단 인트필드를 보여주고 싶네요

597
00:31:54,549 --> 00:31:55,980
자 new intfield를 해주고 이것의 초기 값을, 사이즈가 아니고요

598
00:31:55,980 --> 00:31:59,049
초기값은 32로 설정해 주겠습니다

599
00:31:59,049 --> 00:32:01,648
Fahrenheit필드를요

600
00:32:01,648 --> 00:32:03,768
그리고 액션 코멘드를 설정해 줄 건데요

601
00:32:03,769 --> 00:32:07,778
그래서 액션이 생성되면 처리해 줄 수 있게요

602
00:32:07,778 --> 00:32:08,788
그래서 액션이 생성되면 처리해 줄 수 있게요

603
00:32:08,788 --> 00:32:10,619
그래서 액션이 생성되면 처리해 줄 수 있게요

604
00:32:10,619 --> 00:32:14,079
이름과 연관 지어서 F -> C

605
00:32:14,079 --> 00:32:17,099
이게 이름이 될 거고요 자 이제 이름도 설정했고요

606
00:32:17,099 --> 00:32:18,899
이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

607
00:32:18,900 --> 00:32:21,870
이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

608
00:32:21,869 --> 00:32:25,409
그리고 액션 리스너를 add해주죠

609
00:32:25,410 --> 00:32:28,259
전에 텍스트 필드에 했던 거랑 똑같죠. 이게 인트필드라는 거 빼고요

610
00:32:28,259 --> 00:32:30,618
Celsius 필드에도 이와 같은 일을 똑같이 해줍니다. 이것도 인트필드죠

611
00:32:30,618 --> 00:32:35,788
이건 처음엔 초기값0으로 시작하고요
액션코맨드를 C에서 F가 되게 해놨습니다

612
00:32:35,788 --> 00:32:39,169
그러므로 약간 다른 이름을 주도록 하죠

613
00:32:39,169 --> 00:32:42,559
또한 액션이벤트를 listen하고 생성하도록 설정해 놓았습니다

614
00:32:42,558 --> 00:32:44,500
그런 후 그리드에 놓습니다

615
00:32:44,500 --> 00:32:47,529
그리드에 놓을 첫 번째 요소는 라벨입니다

616
00:32:47,529 --> 00:32:49,769
아까 이야기했듯이요

617
00:32:49,769 --> 00:32:52,979
다음 요소는 텍스트 박스고요

618
00:32:52,979 --> 00:32:54,600
실제로는 숫자로 된 값을 갖는 거고요

619
00:32:54,599 --> 00:32:58,288
그리드 첫째 줄의 마지막 요소는 버튼입니다

620
00:32:58,288 --> 00:33:02,079
이름은 F ->C고요

621
00:33:02,079 --> 00:33:05,740
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

622
00:33:05,740 --> 00:33:10,390
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

623
00:33:10,390 --> 00:33:13,570
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

624
00:33:13,569 --> 00:33:17,460
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

625
00:33:17,460 --> 00:33:21,670
네 이 두 요소는 같은 이름을 가지고요
하지만 두 경우 다 같은 일을 해 주고 싶기 때문에

626
00:33:21,670 --> 00:33:24,940
별 차이가 없어요

627
00:33:24,940 --> 00:33:27,588
제가 원하는 건 누군가 버튼을 누르면 변환이 일어나는 것이니까요

628
00:33:27,588 --> 00:33:29,989
이렇게 변환이 일어나는 코드를 쓰고요

629
00:33:29,989 --> 00:33:30,900
이렇게 변환이 일어나는 코드를 쓰고요

630
00:33:30,900 --> 00:33:33,820
또 누군가 텍스트 필드에 뭔가를 쓰고 엔터를 치면

631
00:33:33,819 --> 00:33:35,619
버튼을 누른 것과 같은 일이 생깁니다

632
00:33:35,619 --> 00:33:38,479
이것은 여러분이 웹에서 많이 접했던 것과 다르지 않습니다

633
00:33:38,480 --> 00:33:41,740
어떠한 검색 엔진에서 창에 뭔가를 치고 클릭을 해서

634
00:33:41,740 --> 00:33:45,329
검색이 시작되거나 엔터를 쳐서 검색이 시작되는 거 기억나시죠
하지만 몇이나 되는 사람이 버튼을 누릅니까

635
00:33:45,329 --> 00:33:48,490
없어요
또 엔터를 치는 사람은 얼마나 되죠?

636
00:33:48,490 --> 00:33:51,839
엔터를 치는 게 편하지 않나요?

637
00:33:51,839 --> 00:33:54,269
어쨌든 이 프로그램에서도 그것과 같은 작업을 해주는 겁니다

638
00:33:54,269 --> 00:33:57,480
엔터를 치는 게 더 편할 때가 있기 때문에

639
00:33:57,480 --> 00:34:01,079
우리가 액션 코맨드에 추가적인 작업을 해 주는 거죠

640
00:34:01,079 --> 00:34:03,689
그리고 Celcius에도 똑같은 일을 해줍니다

641
00:34:03,690 --> 00:34:07,690
이게 전체 UI 혹은 GUI를 위한 설정입니다

642
00:34:07,690 --> 00:34:11,490
그리고 사용자가 버튼을 클릭하면 액션 코맨드를 가지고 옵니다

643
00:34:13,019 --> 00:34:16,650
그리고 액션리스너를 추가하여

644
00:34:16,650 --> 00:34:19,139
처리해 줍니다

645
00:34:19,139 --> 00:34:21,900
버튼을 클릭했을 때 넘어오는

646
00:34:21,900 --> 00:34:25,420
액션 코맨드가 F->C라면요

647
00:34:25,420 --> 00:34:28,378
Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

648
00:34:28,378 --> 00:34:29,699
Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

649
00:34:29,699 --> 00:34:32,708
값을 갖게 되고

650
00:34:32,708 --> 00:34:36,668
F필드는 인티저 필드니까 인티져 값을 반환합니다

651
00:34:36,668 --> 00:34:39,759
그리고 수학적인 계산을 좀 해주면 되는 데요

652
00:34:39,760 --> 00:34:41,539
그리고 수학적인 계산을 좀 해주면 되는 데요

653
00:34:41,539 --> 00:34:44,519
화씨에서 섭씨로 바꾸는 실을 몰라도 너무 걱정하지 마세요

654
00:34:44,518 --> 00:34:47,898
이렇게 하면 됩니다 F 곱하기 95를 하고 32를 빼주면 되요

655
00:34:47,898 --> 00:34:51,478
이제 알겠죠

656
00:34:51,478 --> 00:34:55,759
더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

657
00:34:55,760 --> 00:34:57,570
더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

658
00:34:57,570 --> 00:35:00,950
F필드에 값을 넣고 엔터를 치거나 버튼을 누르면

659
00:35:00,949 --> 00:35:02,489
화면의 C필드에 값이 업데이트 됩니다

660
00:35:02,489 --> 00:35:06,358
같은 것을 말할 때 얼마다 다양하게 표현할 수 있나요

661
00:35:06,358 --> 00:35:07,150
누군가 C->F라고 한다면

662
00:35:07,150 --> 00:35:10,418
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

663
00:35:10,418 --> 00:35:14,199
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

664
00:35:14,199 --> 00:35:15,789
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

665
00:35:15,789 --> 00:35:17,920
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

666
00:35:17,920 --> 00:35:20,210
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

667
00:35:24,079 --> 00:35:27,389
이게 전체 프로그램입니다 이건 인스턴스 변수고요

668
00:35:27,389 --> 00:35:28,500
그럼 이제 기온 프로그램을 실행해 봅시다

669
00:35:28,500 --> 00:35:30,829
그럼 이제 기온 프로그램을 실행해 봅시다

670
00:35:30,829 --> 00:35:32,109
레이블이 있고

671
00:35:32,108 --> 00:35:36,139
초기 값이 있고 F->C버튼이 있고요

672
00:35:36,139 --> 00:35:38,670
그리고 100이란 값을 화씨에 넣어주면

673
00:35:38,670 --> 00:35:40,380
38 섭씨로 변화해 줍니다

674
00:35:40,380 --> 00:35:43,260
그리고 212를 화씨에 넣어주고

675
00:35:43,260 --> 00:35:44,690
마우스를 사용하지 않고, 엔터를 쳐도 마찬가지고 변환이 이루어지고요

676
00:35:44,690 --> 00:35:49,389
같습니다

677
00:35:49,389 --> 00:35:51,538
섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

678
00:35:51,539 --> 00:35:54,880
섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

679
00:35:54,880 --> 00:35:58,900
리사이징도 할 수 있고요. 어쨌든 계속 중앙에 위치합니다.

680
00:35:58,900 --> 00:36:01,740
멋지지 않나요. 작게 하면 작아지진 않아요

681
00:36:06,989 --> 00:36:11,099
볼 수 없으니까. 질문 있나요?

682
00:36:11,099 --> 00:36:12,719
마이크를 사용해서 말해줄래요

683
00:36:12,719 --> 00:36:18,318
여러분들도 마이크를 쓰게 해야겠네요

684
00:36:18,869 --> 00:36:20,659
그리드 각 셀의 넓이를 조정할 수 있나요

685
00:36:20,659 --> 00:36:24,938
그래서 테이블 레이아웃이 있죠

686
00:36:24,938 --> 00:36:26,058
각각의 사이즈를 특정할 수 있도록 만들 수 있어요

687
00:36:26,059 --> 00:36:29,569
각각의 사이즈를 특정할 수 있도록 만들 수 있어요

688
00:36:29,568 --> 00:36:31,619
. 여기서 하지 않았지만요. 책에는 있습니다

689
00:36:31,619 --> 00:36:36,108
그렇게 하고 싶다면요. 하지만 수업에서는 더 이상 깊게 들어가지 않겠습니다

690
00:36:36,108 --> 00:36:39,469
하지만 네 할 수 있는 방법은 있어습니다

691
00:36:39,469 --> 00:36:41,400
마지막으로 재밌는 걸 하나 하고 싶네요

692
00:36:41,400 --> 00:36:46,200
텍스트와 그래픽을 이용해서요 그리고 상호작용자도요

693
00:36:46,199 --> 00:36:47,368
다 이용해서요

694
00:36:47,369 --> 00:36:51,729
텍스트, 그래픽, 상호작용자. 옛날에 했던 거 생각이 나죠
행맨(단어 맞추는 게임)이요

695
00:36:51,728 --> 00:36:53,879
행맨. 텍스트도 이용했고 그래픽도 이용했죠

696
00:36:53,880 --> 00:36:55,480
하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

697
00:36:55,480 --> 00:36:58,679
하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

698
00:37:01,088 --> 00:37:05,159
자 이제 모든 걸 합쳐서 해볼 시간이 돌아왔습니다

699
00:37:07,188 --> 00:37:09,239
텍스트와 그래픽에요

700
00:37:09,239 --> 00:37:11,760
자 이제 텍스트와 그래픽으로 할 것은

701
00:37:11,760 --> 00:37:15,810
프로그램에 콘솔을 만들고 그래픽 캔버스도 만들어야 되고요

702
00:37:16,958 --> 00:37:20,878
상호작용자도 만들어야 되요.

703
00:37:23,449 --> 00:37:26,178
이걸 다 어떻게 할까요

704
00:37:26,179 --> 00:37:27,940
첫째로 할 것은 작은 텍스트를 칠판에 써주고요

705
00:37:27,940 --> 00:37:31,429
첫째로 할 것은 작은 텍스트를 칠판에 써주고요

706
00:38:07,150 --> 00:38:09,889
두 가지 멋진 맛이 합해지면 더 맛있어져요

707
00:38:09,889 --> 00:38:13,498
어떤걸 초콜렛으로 하고 어떤걸 땅콩 버터로 할 지만 정해주면 되요

708
00:38:13,498 --> 00:38:17,198
하지만 텍스트와 그래픽의 조합이니, 행맨이 됩니다. 상호작용자도 있고요

709
00:38:21,168 --> 00:38:25,088
우리가 할 것은 콘솔 창을 확장하는 것입니다

710
00:38:25,088 --> 00:38:29,058
우리가 할 것은 콘솔 창을 확장하는 것입니다

711
00:38:29,059 --> 00:38:30,220
우리가 여전히 (우리의 친구인)콘솔을 필요로 하기 때문입니다

712
00:38:32,518 --> 00:38:36,908
우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

713
00:38:36,909 --> 00:38:37,929
우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

714
00:38:37,929 --> 00:38:42,439
이것은 우리에게 동서남북 영역을 제공하고요

715
00:38:42,438 --> 00:38:47,509
이 영역들에 우리는 상호작용자를 올릴 수 있죠

716
00:38:47,509 --> 00:38:48,548
이 영역들에 우리는 상호작용자를 올릴 수 있죠

717
00:38:48,548 --> 00:38:51,989
흥미로운 것은 중앙 영역입니다

718
00:38:51,989 --> 00:38:54,898
전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

719
00:38:54,898 --> 00:38:58,618
전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

720
00:38:58,619 --> 00:38:59,798
거기에 텍스트를 쓸 수 가 있죠 그게 할 수 있는 전부이기도 하고요

721
00:38:59,798 --> 00:39:03,748
우리가 할 것은 콘솔 프로그램에게 중앙 영역을 주고

722
00:39:03,748 --> 00:39:07,639
거기에 다른 레이아웃을 줘서 텍스트나

723
00:39:07,639 --> 00:39:08,480
그래픽을 채워넣을 수 있게 만드는 것입니다

724
00:39:08,480 --> 00:39:11,490
그래픽을 채워넣을 수 있게 만드는 것입니다

725
00:39:11,489 --> 00:39:12,698
음

726
00:39:12,699 --> 00:39:14,688
이제 제가 뭘 할거냐고요

727
00:39:14,688 --> 00:39:19,168
첫째로 할 것은 레이아웃에 대해 고려하는 것입니다

728
00:39:19,168 --> 00:39:22,228
레이아웃은 이 중앙에 적용될 것이고요

729
00:39:22,228 --> 00:39:26,048
기억해야 할 것은 콘솔 프로그램입니다

730
00:39:26,048 --> 00:39:28,509
콘솔 프로그램은 영역을 꽉 채우고요

731
00:39:28,510 --> 00:39:34,130
이제 콘솔에 첫 요소를 추가해 주어야 합니다

732
00:39:34,130 --> 00:39:37,579
이것은 즉 레이아웃을 어떻게 정하든 이 안에 적용된다는 것입니다

733
00:39:37,579 --> 00:39:41,940
한 줄에 3개의 요소가 들어가는 그리드를 만든다고 하죠

734
00:39:41,940 --> 00:39:44,039
첫번째는 콘솔이 될 거고요

735
00:39:44,039 --> 00:39:45,450
첫번째는 콘솔이 될 거고요

736
00:39:45,449 --> 00:39:48,539
그리고 제어권이 없을 겁니다 
그게 콘솔 프로그램이 원래 그러니까요

737
00:39:48,539 --> 00:39:51,769
여러분이 콘솔 프로그램을 확장하고 만들 레이아웃이 뭐던 간에

738
00:39:51,769 --> 00:39:55,389
첫 번째 요소는 텍스트입니다

739
00:39:57,028 --> 00:39:58,760
그럼 여러분은 궁금하겠죠

740
00:39:58,760 --> 00:40:01,819
. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

741
00:40:01,818 --> 00:40:04,088
. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

742
00:40:04,088 --> 00:40:08,078
우리는 행맨에 약간의 트릭을 사용할 겁니다

743
00:40:08,079 --> 00:40:08,750
G캔버스라는 게 있었잖아요

744
00:40:08,750 --> 00:40:13,269
이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

745
00:40:13,269 --> 00:40:16,358
이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

746
00:40:16,358 --> 00:40:20,788
그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

747
00:40:20,789 --> 00:40:23,329
그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

748
00:40:23,329 --> 00:40:29,599
예를 들어 인자가 1,3인 그리드 레이아웃을 만들죠

749
00:40:29,599 --> 00:40:30,789
이렇게 생길 거고요

750
00:40:32,228 --> 00:40:36,018
첫번째 칸은 이미 콘솔이 차지했고요

751
00:40:36,018 --> 00:40:37,899
G캔버스를 생성해서 두 번째 칸에 올려줍니다

752
00:40:37,900 --> 00:40:41,309
G캔버스를 생성해서 두 번째 칸에 올려줍니다

753
00:40:41,309 --> 00:40:44,278
그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

754
00:40:44,278 --> 00:40:48,268
그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

755
00:40:48,268 --> 00:40:54,078
이게 G캔버스 도스입니다

756
00:40:55,710 --> 00:40:59,820
그러므로 한 개의 콘솔과 두 개의 G캔버스가 생겼습니다

757
00:40:59,820 --> 00:41:02,780
추가로, 화면 주변에 상호작용작들을 add해 줄 수 있고요

758
00:41:02,780 --> 00:41:06,470
이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

759
00:41:06,469 --> 00:41:07,098
이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

760
00:41:07,099 --> 00:41:10,548
이제 5분만에 한 거에요 그것도 엄청 쉽게.

761
00:41:11,409 --> 00:41:18,409
자 이게 그 모습입니다

762
00:41:18,938 --> 00:41:21,629
텍스트 그리고 그래픽. 콘솔 프로그램을 확장시켰고요

763
00:41:21,630 --> 00:41:23,769
그리고 init메소드로 레이아웃을 설정하는 데요

764
00:41:26,358 --> 00:41:30,719
저는 그리드 레이아웃으로 하고 싶어요

765
00:41:30,719 --> 00:41:33,039
기억하세요 그리드 레이아웃

766
00:41:33,039 --> 00:41:34,949
요소들이 공간을 준 만큼 차지해 버려요

767
00:41:34,949 --> 00:41:38,919
그게 이번 경우에는 제가 바라는 바고요

768
00:41:38,920 --> 00:41:42,269
그래서 그리드를 쓰는 거고요. 1행 3열의 그리드를 만들 거에요

769
00:41:42,269 --> 00:41:46,048
그리고 1/3에는 콘솔을 넣을 거고요

770
00:41:46,048 --> 00:41:49,969
나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

771
00:41:49,969 --> 00:41:52,019
나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

772
00:41:52,018 --> 00:41:54,139
그럼 캔버스 두 개를 생성해야겠죠

773
00:41:54,139 --> 00:41:57,818
RightCanvas와 LeftCanvas라고 부를게요

774
00:41:57,818 --> 00:42:01,478
RightCanvas와 LeftCanvas라고 부를게요

775
00:42:01,478 --> 00:42:05,688
그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

776
00:42:05,688 --> 00:42:08,469
이게 상호작용자죠

777
00:42:08,469 --> 00:42:09,539
제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

778
00:42:09,539 --> 00:42:10,819
제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

779
00:42:10,818 --> 00:42:15,918
RightCanvas와 LeftCanvas라고 부를게요

780
00:42:15,918 --> 00:42:16,998
이제 뭘 할 거냐고요

781
00:42:16,998 --> 00:42:20,618
그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

782
00:42:20,619 --> 00:42:24,419
일단 LeftCanvas에 new Canvas를 해줍니다

783
00:42:24,418 --> 00:42:27,739
그리고 add를 할 때 myLayout에 해주고요

784
00:42:27,739 --> 00:42:29,650
캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

785
00:42:29,650 --> 00:42:31,740
캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

786
00:42:31,739 --> 00:42:33,239
캔버스를 add했잖아요. 두번째 요소로

787
00:42:33,239 --> 00:42:36,929
그것을 다시 오른쪽 캔버스에 똑같이 해줍니다

788
00:42:36,929 --> 00:42:41,169
세번째 요소로 들어가는 오른쪽 캔버스에요

789
00:42:41,170 --> 00:42:42,950
그러므로 두 개의 큰 캔버스가 그리드의 두번째와 세번째에 있습니다

790
00:42:42,949 --> 00:42:44,679
이제 콘솔, 캔버스, 캔버스 이런 식이죠

791
00:42:44,679 --> 00:42:48,779
그럼 이제 상호작용자들을 add하겠어요

792
00:42:48,780 --> 00:42:53,060
일단 텍스트 필드를 만들거에요. new JTextField를 해줘야겠죠

793
00:42:53,059 --> 00:42:56,538
그리고 private인 인스턴스 변수로 선언할 거고요

794
00:42:56,539 --> 00:42:58,278
방금 보여줬고요. 최대 사이즈는 10으로 할 거에요

795
00:42:58,278 --> 00:43:02,340
라벨을 add하고요. 라벨은 some text라고 부를게요

796
00:43:02,340 --> 00:43:04,028
그리고 서쪽영역에 놓고요

797
00:43:05,389 --> 00:43:08,949
이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

798
00:43:08,949 --> 00:43:13,038
이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

799
00:43:13,039 --> 00:43:16,400
매우 흔히 일어나는 일인데요. 사람들은 텍스트 필드를 생성하고 프로그램에서 뭔가 칩니다

800
00:43:16,400 --> 00:43:19,329
그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

801
00:43:19,329 --> 00:43:21,039
그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

802
00:43:21,039 --> 00:43:24,789
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

803
00:43:24,789 --> 00:43:25,958
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

804
00:43:25,958 --> 00:43:27,848
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

805
00:43:27,849 --> 00:43:31,450
알고 배우고 실천하고 사랑하세요

806
00:43:31,449 --> 00:43:34,889
그리고 버튼도 두 개 add할 건데요

807
00:43:34,889 --> 00:43:37,719
그럼 상호작용자는 텍스트 필드하고 버튼 두 개가 더 있는거죠

808
00:43:37,719 --> 00:43:40,289
버튼 하나는 왼쪽 캔버스에 그림을 그릴 거고
다른 하나는 오른쪽에 그림을 그리게 만들 거에요

809
00:43:40,289 --> 00:43:42,129
그럼 나머지를 마저 만들기 전에 이게 어떻게 생겼나 보여드리죠

810
00:43:42,128 --> 00:43:46,328
텍스트와 그래픽까지 만들었죠

811
00:43:46,329 --> 00:43:48,479
콘솔을 만들었고

812
00:43:48,478 --> 00:43:50,179
콘솔을 만들었고

813
00:43:50,179 --> 00:43:54,768
현재 경계선은 없지만 두 개의 캔버스가 있습니다

814
00:43:54,768 --> 00:43:58,328
두 개의 다른 캔버스 창이 여기 있어요

815
00:43:58,329 --> 00:44:00,999
텍스트가 있고요. hi라고 칠 수 있죠

816
00:44:00,998 --> 00:44:02,728
hi. 재밌죠?

817
00:44:02,728 --> 00:44:03,989
hi. 재밌죠?

818
00:44:03,989 --> 00:44:07,489
Draw left는 외족 창에 그림을 그리게

819
00:44:07,489 --> 00:44:08,440
사각형을 그릴건데 좀 있다 보여드리기로 하고

820
00:44:08,440 --> 00:44:09,628
사각형을 그릴건데 좀 있다 보여드리기로 하고

821
00:44:09,628 --> 00:44:12,318
Draw right는 오른쪽 창에 그림을 그릴 수 있게 합니다.

822
00:44:12,318 --> 00:44:15,889
이걸 어떻게 할까요? 나머지 프로그램을 만들면서 알아봅시다

823
00:44:15,889 --> 00:44:18,589
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

824
00:44:18,590 --> 00:44:20,798
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

825
00:44:20,798 --> 00:44:24,449
여기서 액션이 일어납니다
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

826
00:44:24,449 --> 00:44:27,418
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

827
00:44:27,418 --> 00:44:30,708
하나의 상호작용자를 가지고 상호작용을 하는 것 외에는
이 프로그램에서 할 수 있는 게 없습니다

828
00:44:30,708 --> 00:44:34,688
일단 텍스트 필드를 체크하고요

829
00:44:34,688 --> 00:44:38,598
텍스트 필드와의 상호작용이라면

830
00:44:38,599 --> 00:44:43,019
그럼상호작용은 근원지가 텍스트필드 였다면 텍스트 필드에 뭔가를 친 건 이제 콘솔에 나타날 겁니다

831
00:44:43,018 --> 00:44:46,649
. println을 하면 항상 콘솔에 나타나게 되어있으니까요

832
00:44:46,650 --> 00:44:49,568
여기선 아직 별 재미가 없죠

833
00:44:49,568 --> 00:44:52,670
양자택일적으로 텍스트필드에 타이핑을 하지 않았다면

834
00:44:52,670 --> 00:44:56,389
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

835
00:44:56,389 --> 00:44:59,509
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

836
00:44:59,509 --> 00:45:02,849
이걸 여러분이 원하는 대로 섞어 사용하면 됩니다

837
00:45:02,849 --> 00:45:06,028
코맨드(명령)가 뭐였냐 이러면 getActionCommand를 쓰면 되는데

838
00:45:06,028 --> 00:45:10,349
그 코맨드가 Draw left였다면 이제 색이 채워진 사각형이 새로 생성되겠죠. 보여드리죠

839
00:45:10,349 --> 00:45:13,519
새로운 사각형을 만듭니다

840
00:45:14,418 --> 00:45:17,568
간단하죠. 50x20의 크기로요.

841
00:45:17,568 --> 00:45:20,038
상수여야 해요

842
00:45:21,199 --> 00:45:22,930
그리고 filled(채움)으로 설정해 주고

843
00:45:22,929 --> 00:45:26,639
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

844
00:45:26,639 --> 00:45:27,679
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

845
00:45:27,679 --> 00:45:31,518
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

846
00:45:31,518 --> 00:45:33,778
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

847
00:45:33,778 --> 00:45:38,028
그냥 그래픽 프로그램이 아니니까요

848
00:45:38,028 --> 00:45:42,119
그냥 add하란다고 add해 지지 않아요

849
00:45:42,119 --> 00:45:47,399
이걸 더해 주려면 어떤 캔버스에 더할지 명확히 해주어야 합니다

850
00:45:47,398 --> 00:45:51,898
왼쪽 캔버스에 더할 거니까 LetfCanvas 이걸 더해라. 이렇게 하고요

851
00:45:51,898 --> 00:45:54,638
x좌표 20 y좌표 leftY에 더해줍니다

852
00:45:54,639 --> 00:45:57,949
Left Y는 값이 10에서 시작하고요

853
00:45:57,949 --> 00:46:02,688
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

854
00:46:02,688 --> 00:46:06,768
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

855
00:46:06,768 --> 00:46:10,068
그럼 다음 사각형은 아래쪽에 그려지는 거죠

856
00:46:10,068 --> 00:46:12,480
그럼 다음 사각형은 아래쪽에 그려지는 거죠

857
00:46:12,480 --> 00:46:15,509
이걸 똑같이 오른쪽에도 해줍니다

858
00:46:15,509 --> 00:46:19,318
일단 색을 채운 사각형을 생성한 다음에요

859
00:46:19,318 --> 00:46:23,058
분리된 right Y좌표가 있고요

860
00:46:23,059 --> 00:46:23,949
계속해서 이 밑으로 그려집니다

861
00:46:23,949 --> 00:46:26,179
오른쪽 캔버스의 경우에는요

862
00:46:26,179 --> 00:46:27,898
이 차이죠

863
00:46:27,898 --> 00:46:30,298
그러므로 프로그램을 실행하면

864
00:46:30,298 --> 00:46:31,809
텍스트가 있고요

865
00:46:31,809 --> 00:46:34,399
다시 great 라고 쓰고

866
00:46:34,398 --> 00:46:35,868
엔터를 누르면

867
00:46:35,869 --> 00:46:39,930
이벤트가 발생합니다
스크린에 println해서 출력을 해주고

868
00:46:39,929 --> 00:46:43,208
여기 이벤트를 생성하고요

869
00:46:43,208 --> 00:46:46,948
근원지는 텍스트 필드였고 화면에 텍스트를 출력합니다

870
00:46:46,949 --> 00:46:50,068
버튼 중 하나를 클릭하면

871
00:46:50,068 --> 00:46:53,418
예를 들어 Draw left를요
그럼 사각형을 그려주고요 leftY좌표에서 시작하고요

872
00:46:53,418 --> 00:46:55,798
다음 번에 Draw left를 계속 누르면

873
00:46:55,798 --> 00:47:00,759
아래쪽으로 아래쪽으로 계속해서 똑같이 사각형을 그려줍니다.

874
00:47:00,759 --> 00:47:03,318
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

875
00:47:03,318 --> 00:47:08,018
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

876
00:47:08,018 --> 00:47:10,908
그런데도 서로 다른 장소에 그림이 그려지는 이유는

877
00:47:10,909 --> 00:47:14,639
여기에 보이지 않는 경계선이 있기 때문입니다

878
00:47:14,639 --> 00:47:17,298
이렇게 해서

879
00:47:17,298 --> 00:47:22,268
텍스트, 그래픽, 상호작용자를 모두 포함한 프로그램을 만들어 보았습니다. 
질문 있나요?

880
00:47:22,268 --> 00:47:23,688
좋아요, 그럼 수요일날 봅시다