0:00:08.060,0:00:10.829
...

0:00:10.829,0:00:14.099
이 강의는 스탠포드에서 전문인 양성을 위하여

0:00:14.099,0:00:21.099
제공됩니다.

0:00:22.039,0:00:26.880
지난 시간의 주제를 이어서 공부해 봅시다

0:00:26.879,0:00:30.798
우리의 친구, 상호작용자를 배우고 있었죠

0:00:30.798,0:00:34.299
상호작용자와 액션 리스너에 대해서요

0:00:34.299,0:00:38.739
구체적으로는 버튼을 만드는 방법과 그 버튼들에 의해 발생하는 액션 이벤트에 대해 배웠습니다

0:00:38.740,0:00:42.000
기억하나요? 그걸 간단히 정리하고 좀 더 깊이 있는 내용을 배워봅시다

0:00:42.000,0:00:46.509
지난 시간에 이야기 했던 것 중 하나가 바로 프로그램에 init 메소드를 만드는 것이었습니다

0:00:46.509,0:00:50.329
public void고요

0:00:50.329,0:00:54.500
이 메소드 안에서 프로그램의 일부를

0:00:54.500,0:00:57.469
다양한 사용자들을 클릭하거나 해서

0:00:57.469,0:01:00.469
어떠한 이벤트가 발생했을 때의 상황을 처리해 줄 수 있었죠

0:01:00.469,0:01:02.609
액션 리스너를 add해 줌으로써요

0:01:02.609,0:01:07.510
그래서 버튼을 클릭하면

0:01:07.510,0:01:10.469
특정한 메소드를 호출하도록 처리해 주는 것입니다

0:01:10.468,0:01:14.388
액션리스너는 예를 들어 프로그램의 버튼이 있을 때 버튼에 무슨 일이 일어나는 지 감시해주었습니다

0:01:14.388,0:01:17.848
그래서 버튼을 클릭하면 특정한 메소드를 호출하도록 처리해 주는 것입니다

0:01:17.849,0:01:21.200
예를 들어 actionPerformed를 호출하면 그것에 바탕하여 어떤 버튼이 눌렸는 지를 확인하고

0:01:21.200,0:01:23.710
실제로 무엇인가를 실행해줍니다 아셨죠?

0:01:23.709,0:01:27.519
자 여기 우리의 친구 public void actionPerformed가 있습니다

0:01:27.519,0:01:30.939
자 여기 우리의 친구 public void actionPerformed가 있습니다

0:01:30.939,0:01:32.939
자 여기 우리의 친구 public void actionPerformed가 있습니다

0:01:32.939,0:01:33.909
자 여기 우리의 친구 public void actionPerformed가 있습니다

0:01:33.909,0:01:37.989
그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

0:01:37.989,0:01:39.618
그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

0:01:39.618,0:01:43.868
액션 이벤트를 우리는 여기서 e라고 지칭해주고요

0:01:43.868,0:01:47.560
이것은 어떤 액션이 일어났는지 혹은 어떤 버튼이 클릭되었는지를 확인해 줍니다

0:01:47.560,0:01:51.219
기억하고 있길 바래요 [br]지난 시간 수업을 잠시 돌아봤고요

0:01:51.219,0:01:54.109
이제 액션 이벤트가 생겼을 때, 몇 가지 할 일이 있다고 했었죠

0:01:55.140,0:01:58.250
가장 중요한 것은

0:01:58.250,0:02:02.109
어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

0:02:02.109,0:02:03.429
어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

0:02:03.430,0:02:05.500
이렇게 하는 거죠

0:02:05.500,0:02:09.360
일단 문자열 cmd를 만듭니다 command의 줄임말이고요

0:02:09.360,0:02:12.420
이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

0:02:12.419,0:02:15.598
이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

0:02:16.599,0:02:19.009
자 여기서 e.cmd = e.getActionCommand를 써주세요

0:02:19.009,0:02:22.479
자 여기서 e.cmd = e.getActionCommand를 써주세요

0:02:22.479,0:02:26.158
. getActionCommand가 하는 일은 바로

0:02:26.158,0:02:30.098
상호작용자의 이름을 문자열로 리턴시켜 주는 것입니다

0:02:30.098,0:02:33.039
그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

0:02:33.039,0:02:33.609
그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

0:02:33.610,0:02:38.240
그리고 몇 개의 if를 이 cmd를 바탕으로 여기 써줍니다

0:02:38.240,0:02:40.909
if(cmd.equal)으로 확인해서 어떤 버튼이 눌려졌는 지에 따라 액션을 취해 줄 수 있도록

0:02:40.909,0:02:42.549
버튼의 이름을 확인 할 수 있습니다

0:02:42.549,0:02:46.248
사실 이 액션 코맨드cmd보다는

0:02:46.248,0:02:47.650
ActionEvent e를 활용해서 할 수 있는 것이 더 많습니다

0:02:47.650,0:02:51.140
이걸 지난 수업 때 간단히 봤었는데요[br]우리가 했던 프로그램에서요

0:02:51.139,0:02:54.269
이제 이걸 좀 더 배워봅시다 좀 더 시간을 들여서요

0:02:54.270,0:02:56.729
이제 저희가 원하는 것은 e에서 액션 코맨드를 알아내는 것이 아닙니다

0:02:56.729,0:03:00.719
액션의 소스를 직접 가져오는 것을 바라죠

0:03:00.718,0:03:02.848
액션의 소스를 직접 가져오는 것을 바라죠

0:03:02.848,0:03:06.988
자, 여기서 재밌는 것은 getSource가 리턴하는 내용입니다

0:03:06.989,0:03:08.769
여기선 잠시 세미콜론을 뺄게요

0:03:08.769,0:03:12.748
getSource는 오브젝트(객체)를 리턴해 줍니다

0:03:12.748,0:03:17.579
이벤트를 발생시키는 오브젝트 자체를 리턴해주죠

0:03:17.580,0:03:19.809
즉, 버튼을 클릭했다면

0:03:19.808,0:03:23.408
e.getActionCommand는 버튼의 이름을 리턴해주고

0:03:23.408,0:03:27.558
e.getSource는 버튼 오브젝트의 레퍼런스를 리턴해 줍니다

0:03:27.558,0:03:31.149
즉 오브젝트를 참조할 수 있게 되는 겁니다

0:03:31.149,0:03:31.679
즉 오브젝트를 참조할 수 있게 되는 겁니다

0:03:31.679,0:03:34.818
이것은 어떤 의미를 가질까요

0:03:34.818,0:03:38.149
여기서 이것은 여러분이 초기화를 설정 할 때

0:03:38.150,0:03:40.669
여기서 이것은 여러분이 초기화를 설정 할 때

0:03:40.669,0:03:43.110
new JButton을 해줍니다

0:03:43.110,0:03:44.540
new JButton을 해줍니다

0:03:44.539,0:03:46.179
new JButton을 해줍니다

0:03:46.179,0:03:50.729
이걸 hi라고 할게요. 알겠죠

0:03:50.729,0:03:55.489
그리고 hi = new JButton을 해주고요

0:03:55.489,0:03:58.079
hi를 인스턴스 변수로 만든거죠

0:03:58.079,0:04:02.400
그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

0:04:02.400,0:04:03.140
그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

0:04:03.139,0:04:10.139
hi라는 변수를 선언했고요, JButton입니다

0:04:10.479,0:04:14.280
그리고 초기화 메소드에서

0:04:14.280,0:04:17.718
이 버튼에 라벨 hi를 붙여 생성합니다

0:04:17.718,0:04:20.930
그런 다음 이것을 컨트롤 바에 add해 줍니다

0:04:20.930,0:04:25.090
예를 들어 이 hi를 SOUTH 컨트롤 바에 add시켜 주죠

0:04:25.089,0:04:28.729
여기에 add하는 게 일반적이라서요

0:04:28.730,0:04:30.450
버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

0:04:30.449,0:04:31.870
버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

0:04:31.870,0:04:35.269
이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

0:04:35.269,0:04:36.008
이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

0:04:36.009,0:04:38.199
그리고 이 버튼이 클릭 될 때를 위한 액션 리스너를 add해 줍니다

0:04:38.199,0:04:40.180
이제 버튼이 클릭 되면

0:04:40.180,0:04:41.310
이 버튼의 cmd로

0:04:41.310,0:04:42.449
이 버튼의 이름을 가져오라고 요청할 수 있어요

0:04:42.449,0:04:47.460
혹은 액션 이벤트에게 액션 코맨드의 이름을 가져오게 할 수 있죠

0:04:47.459,0:04:52.089
그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

0:04:52.089,0:04:55.739
그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

0:04:55.740,0:04:58.250
이제 처리하고 싶은 대로 할 수 있습니다

0:04:58.250,0:05:01.379
예를 들면 스크린에 뭔가를 출력해 주던가 하는 거죠

0:05:01.379,0:05:04.639
이게 이걸 쓰는 한 가지 방법이고요

0:05:04.639,0:05:07.519
고전적이 방법이기도 하죠

0:05:07.519,0:05:09.108
지난 시간에 본 겁니다

0:05:09.108,0:05:13.308
이걸 쓰는 또 다른 방법으로는 getSource를 이용하는 것입니다

0:05:13.309,0:05:16.879
cmd의 이름을 가져와 hi와 같은지 확인하는 것과 달리

0:05:16.879,0:05:20.960
e.getSource를 호출하는 방법입니다

0:05:20.959,0:05:24.359
사실, 이 방법을 사용하면 이 cmd 라인은 더 이상 필요가 없게 됩니다

0:05:24.360,0:05:27.908
지우지는 않고 코멘트 처리 하겠습니다

0:05:27.908,0:05:29.538
e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

0:05:29.538,0:05:33.509
e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

0:05:33.509,0:05:37.099
그럼 저는 이 리턴되는 오브젝트가

0:05:37.100,0:05:38.509
제 hi 버튼이 맞는 지 확인할 겁니다

0:05:38.509,0:05:44.509
여기서, 직접적으로 hi와 equal 하는 지 확인하고

0:05:44.509,0:05:47.850
맞으면 원하는 데로 처리해 줍니다 아까와 똑같이 처리하겠습니다

0:05:47.850,0:05:49.580
내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

0:05:49.579,0:05:52.329
내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

0:05:52.329,0:05:56.280
이 두 가지 방식의 차이는

0:05:56.279,0:05:57.538
하나는 이름을 문자열로 사용한다는 것이고

0:05:57.538,0:06:01.269
다른 하나는 실제 오브젝트를 사용한다는 것입니다

0:06:01.269,0:06:02.810
다른 하나는 실제 오브젝트를 사용한다는 것입니다

0:06:02.810,0:06:06.459
이제 이게 무엇인지 깊이 생각해봅시다

0:06:06.459,0:06:10.430
이름을 이용할 때 우리는 실제 오브젝트까지 손 댈 필요가 없었죠

0:06:10.430,0:06:12.389
이것은 즉 실제 오브젝트를 사용한다면

0:06:12.389,0:06:15.918
우리는 이것을 인스턴스 변수로 사용할 필요가 없을 거라는 겁니다

0:06:15.918,0:06:20.109
이것을 인스턴스 변수로서 사용할 일은

0:06:20.110,0:06:24.250
이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

0:06:24.250,0:06:27.560
이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

0:06:27.560,0:06:31.399
예제를 하나 보여드리겠습니다[br]코드로 좀 더 구체적으로 알아봅시다

0:06:31.399,0:06:33.459
자, 코드를 보세요

0:06:33.459,0:06:36.448
이게 기본적으로 버튼을 만드는 코드 입니다

0:06:36.449,0:06:40.189
이게 기본적으로 버튼을 만드는 코드 입니다

0:06:40.189,0:06:43.339
버튼 이름을 hi라고 했고요

0:06:43.339,0:06:46.909
서쪽 영역에 넣었고요[br]그리고 버튼이 클릭되는 상황을 알아챌 수 있게

0:06:46.910,0:06:48.019
액션 리스너를 add하였습니다

0:06:48.019,0:06:50.280
버튼이 클릭되면

0:06:50.279,0:06:54.019
클릭된 버튼이 내가 만든 버튼인지를 확인하고요

0:06:54.019,0:06:57.288
저쪽의 hi대신에 여기 실제로 호출되는 hi버튼이 있고요

0:06:57.288,0:06:57.978
이걸 칠판에서는 자리를 좀 덜 차지하게 줄여썼어요

0:06:57.978,0:07:02.639
클릭된 게 hi버튼이라면

0:07:02.639,0:07:04.680
화면에 hello가 출력될 겁니다

0:07:04.680,0:07:07.399
계속해서 이 프로그램을 실행해보죠

0:07:07.399,0:07:09.709
계속해서 이 프로그램을 실행해보죠

0:07:09.709,0:07:13.288
hi를 클릭하면 전에 봤던 게 나옵니다

0:07:13.288,0:07:14.318
hi를 클릭할 때마다 hello가 화면에 뜨죠

0:07:14.319,0:07:17.289
이제, 이걸 조금 다른 방식으로 활용할 수 있습니다

0:07:17.288,0:07:19.769
지난 시간에 봤었던 것처럼요

0:07:19.769,0:07:21.990
자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

0:07:21.990,0:07:25.840
자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

0:07:25.839,0:07:30.239
한 줄의 코드로요. 왜냐면 버튼을 저장할 변수가 필요 없었기 때문이었습니다

0:07:30.240,0:07:33.800
여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

0:07:33.800,0:07:35.550
여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

0:07:35.550,0:07:37.939
그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

0:07:37.939,0:07:39.329
그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

0:07:39.329,0:07:42.060
cmd는 버튼의 이름일 것이고요

0:07:42.060,0:07:46.220
그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

0:07:46.220,0:07:47.930
그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

0:07:47.930,0:07:51.019
왜냐면 이게 내가 필요한 이름을 전달해 주기 때문에요

0:07:51.019,0:07:53.918
결과적으로, 여기서 인스턴스 변수가 필요없다는 것에 주목해주세요

0:07:53.918,0:07:56.589
이게 바로 거래입니다

0:07:56.589,0:07:59.299
이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

0:07:59.300,0:08:00.819
이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

0:08:00.819,0:08:02.959
이런 케이스에는 인스턴스 변수가 필요하고

0:08:02.959,0:08:05.508
이런 케이스에는 인스턴스 변수가 필요하고

0:08:05.509,0:08:09.959
아 잘못된 줄이네요

0:08:11.369,0:08:13.810
인스턴스 변수가 있어야 하는 경우는

0:08:13.810,0:08:16.360
다른 메소드에서 이 변수를 참조해야 할 경우입니니다

0:08:16.360,0:08:17.778
다른 메소드에서 이 변수를 참조해야 할 경우입니니다

0:08:17.778,0:08:21.569
자 이렇게 버튼을 생성했고요

0:08:21.569,0:08:23.650
이걸 어딘가에 저장(store)했고요

0:08:23.649,0:08:26.558
이걸 다른 메소드에서 참조할 수 있어야 합니다

0:08:26.559,0:08:27.629
그래서 인스턴스 변수가 필요해 지는 겁니다

0:08:27.629,0:08:31.309
만약 다른 메소드에서 이것을 참조할 필요가 없다면

0:08:31.309,0:08:34.040
만약 다른 메소드에서 이것을 참조할 필요가 없다면

0:08:34.039,0:08:37.019
두 번 째 경우처럼 되는 것이죠

0:08:37.019,0:08:41.149
자 이렇게 참조가 필요 없는 경우에는 이걸 저장할 필요도 없죠

0:08:41.149,0:08:48.149
여기에 대해 질문?

0:08:53.679,0:08:56.819
그게 학생의 로직 내의 버그(오류)입니다[br]컴퓨터는 두 버튼에 동시에 같은 이름을 주었을 경우

0:08:56.820,0:09:00.220
사용자가 둘 중 어떤 버튼을 이용한 것인지 알아내려고 하지 않습니다

0:09:00.220,0:09:01.879
난 모른다 이런 식이죠

0:09:01.879,0:09:04.279
그게 문제를 발생시켜요 그러니까 이런 짓은 하지 마세요

0:09:04.279,0:09:07.759
이렇게 해서 어떤 일이 일어나는 지 궁금하다면 한 번 시도해 보시고요

0:09:07.759,0:09:10.970
이것은 컴퓨터 실행의 오류가 아니라 논리적 오류입니다

0:09:10.970,0:09:17.970
또 다른 질문 있나요? 네?

0:09:19.129,0:09:21.708
그런 식의 접근도 이 케이스와 비슷합니다[br]실제 버튼을 얻는 거죠

0:09:21.708,0:09:25.989
여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

0:09:25.990,0:09:29.330
여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

0:09:29.330,0:09:32.570
여전히 우리가 만든 오브젝트의 레퍼런스를 리턴해 줄 겁니다

0:09:32.570,0:09:35.990
이제 문제는 뭐냐면 이제 어떤 오브젝트와 equal한 것인 가를 확인할 방도가 없다는 겁니다

0:09:35.990,0:09:38.730
이걸 인스턴스 변수로 만들기 않았다면요

0:09:38.730,0:09:42.430
이게 hi버튼과 같은 것인지 확인할 수가 없어요

0:09:42.429,0:09:45.559
그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

0:09:45.559,0:09:46.649
그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

0:09:46.649,0:09:48.129
이 녀석은 hi버튼에 대한 포인터를 리턴해 주고요

0:09:48.129,0:09:51.269
그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

0:09:51.269,0:09:52.310
그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

0:09:52.309,0:09:55.229
이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

0:09:55.230,0:09:56.070
이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

0:09:56.070,0:09:59.110
이걸 실제 hi버튼과 비교할 방법이 없어요

0:09:59.110,0:10:01.990
이게 바로 이걸 저장해야 하는 이유랍니다

0:10:01.990,0:10:05.129
좋아요, 이 두 가지 다른 방식을 어째서 보여주는가?

0:10:05.129,0:10:08.279
그 이유는 이제 여러분이 상호작용자들을 실제로 활용하게 되면서

0:10:08.279,0:10:11.470
이러한 측면을 사용하게 될 것이기 때문입니다

0:10:11.470,0:10:13.379
이러한 측면을 사용하게 될 것이기 때문입니다

0:10:13.379,0:10:15.620
자 이제 다음으로 할 것은요

0:10:15.620,0:10:18.649
항상 말하지만 프로그램을 만들 때 항상 유저들이 콘솔창에서 뜨는 게 아니고

0:10:18.649,0:10:22.889
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

0:10:22.889,0:10:24.419
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

0:10:24.419,0:10:27.599
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

0:10:27.600,0:10:30.269
또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

0:10:30.269,0:10:31.779
그러므로 이제 이 예제를 함께 봅시다

0:10:31.779,0:10:35.759
그러므로 이제 이 예제를 함께 봅시다

0:10:35.759,0:10:39.740
프로그램에서 textField라 불리는 게 있습니다

0:10:39.740,0:10:43.019
내 이름이 Mehran이잖아요

0:10:43.019,0:10:44.949
그럼 hello, Mehran 이렇게 나오고

0:10:44.950,0:10:48.800
만약 Sally면 hello, Sally이렇게 출력되게 하고 싶어요

0:10:48.799,0:10:50.419
이걸 텍스트 필드를 이용하여 할 수 있습니다

0:10:50.419,0:10:54.269
이걸 텍스트 필드를 이용하여 할 수 있습니다

0:10:54.269,0:10:55.870
이걸 텍스트 필드를 이용하여 할 수 있습니다

0:10:55.870,0:10:59.019
상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

0:10:59.019,0:11:01.100
상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

0:11:01.100,0:11:04.350
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

0:11:04.350,0:11:05.290
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

0:11:05.289,0:11:07.370
그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

0:11:09.940,0:11:12.500
자 이걸 어떻게 만들까요?

0:11:12.500,0:11:13.948
일단 text field라 불리는 상호작용자를 만들어야겠죠

0:11:13.948,0:11:18.370
일단 text field라 불리는 상호작용자를 만들어야겠죠

0:11:18.370,0:11:21.840
기본적으로, 텍스트 필드는 여러분이 봤던 겁니다

0:11:21.840,0:11:25.950
텍스트를 입력할 수 있는 공간이 있는 상호작용자입니다

0:11:25.950,0:11:28.580
이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

0:11:28.580,0:11:30.889
이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

0:11:30.889,0:11:35.079
여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

0:11:35.078,0:11:37.199
여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

0:11:37.200,0:11:41.670
만들면 실제로 상자모양이 생깁니다. 그게 다에요

0:11:41.669,0:11:46.319
만약 거기에 라벨을 add하고 싶다면

0:11:46.320,0:11:48.620
앞에서 이름을 add해 주었던 것처럼 해주어야 합니다

0:11:48.620,0:11:51.210
이걸 어떻게 하는지는 잠시 뒤에 보여드리고요

0:11:51.210,0:11:53.580
자 상자모양이 생기고 그 안에 뭔가를 쓰고 엔터키를 칩니다

0:11:53.580,0:11:58.020
그럼 잠재적으로 이벤트가 발생합니다.

0:11:58.019,0:11:59.590
그럼 잠재적으로 이벤트가 발생합니다.

0:11:59.590,0:12:03.649
이걸 또 어떻게 설정할까요?

0:12:03.649,0:12:08.429
자 우리가 만들려고 하는 것은 바로 JTextField입니다

0:12:08.429,0:12:12.579
이전에 봤던 체크박스나 콤보박스 등과 같은 상호작용자고요

0:12:12.580,0:12:13.370
이것을 JTextField라 합니다

0:12:13.370,0:12:15.370
저는 이 약자를 따서 TF라고 이름 짓겠습니다

0:12:15.370,0:12:17.009
저는 이 약자를 따서 TF라고 이름 짓겠습니다

0:12:17.009,0:12:21.799
자 이걸 새로 하나 생성하는 방법은 new JTextField를 해주는 거고요

0:12:21.799,0:12:26.039
인자를 줍니다. 여기서 재미있는 게 있죠

0:12:26.039,0:12:27.469
여러분은 라벨을 주는 것이 아닙니다

0:12:27.470,0:12:30.830
텍스트 필드는 라벨이 딸려 있지 않아요[br]라벨을 별개로 만들어 주어야 하죠

0:12:30.830,0:12:35.389
여기에 주는 인자는 바로 텍스트 필드의 사이즈 입니다

0:12:35.389,0:12:39.299
이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

0:12:39.299,0:12:43.309
이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

0:12:43.309,0:12:46.789
만약 폰트를 설정해 준다면 사이즈는 10M이 됩니다

0:12:46.789,0:12:50.349
여기서 M은 그 폰트의 가장 넓은 문자입니다

0:12:50.350,0:12:52.889
모를까 봐 알려드려요

0:12:52.889,0:12:57.259
모를까 봐 알려드려요

0:12:57.259,0:12:57.779
모를까 봐 알려드려요

0:12:57.779,0:13:00.360
사용자가 엔터를 칠 때 말입니다

0:13:00.360,0:13:03.990
다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

0:13:03.990,0:13:04.620
다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

0:13:04.620,0:13:08.289
actionPerformed를 호출하지 않을 겁니다

0:13:08.289,0:13:11.639
그러므로 우리가 해 야 할 것은 텍스트 필드를 만든 후에

0:13:11.639,0:13:13.490
이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

0:13:13.490,0:13:17.430
이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

0:13:17.429,0:13:20.748
이걸 하는 방법은 좀 펑키한데,

0:13:20.749,0:13:22.778
일단 textfield.addActionLestener를 해주고요

0:13:22.778,0:13:24.889
textfield.addActionLestener

0:13:24.889,0:13:29.049
textfield.addActionLestener

0:13:29.049,0:13:31.689
알겠죠?

0:13:31.690,0:13:35.180
실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

0:13:35.179,0:13:37.629
실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

0:13:37.629,0:13:38.700
여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

0:13:38.700,0:13:40.200
여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

0:13:40.200,0:13:42.840
그리고 다른 사람들에게 액션을 생성해 주었을 때를 알려주는 겁니다

0:13:42.840,0:13:46.649
그래서 이걸 넘긴 거에요

0:13:46.649,0:13:48.899
그래서 이걸 넘긴 거에요

0:13:48.899,0:13:52.459
하지만 매번 텍스트 필드를 생성할 때마다

0:13:52.460,0:13:53.970
모든 텍스트 필드에 이걸 해 줄 필요는 없습니다

0:13:53.970,0:13:57.360
이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

0:13:57.360,0:13:57.959
이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

0:13:57.958,0:14:01.709
한 번만 해주면 됩니다.

0:14:01.710,0:14:03.479
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

0:14:03.479,0:14:05.250
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

0:14:05.250,0:14:08.929
하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

0:14:08.929,0:14:13.279
러므로 이걸 생성한 뒤 이 줄을 설정하고 이걸 프로그램의 어딘 가에 add해 주어야 하는 데요

0:14:13.279,0:14:17.470
프로그램 내에서, add TF를 해주어야 합니다

0:14:17.470,0:14:18.769
프로그램 내에서, add TF를 해주어야 합니다

0:14:18.769,0:14:22.649
add TF를 서쪽 영역에 해줍시다

0:14:22.649,0:14:25.220
지금까지 그랬던 것처럼요

0:14:25.220,0:14:29.800
누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

0:14:29.799,0:14:34.669
누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

0:14:34.669,0:14:37.279
자 이렇게 설정되었을 때

0:14:37.279,0:14:39.980
이 이벤트를 생성한 텍스트 필드가 무엇인지 어떻게 알죠?

0:14:39.980,0:14:43.700
여러 개의 텍스트 필드가 있고

0:14:43.700,0:14:47.030
그 중 하나에 사용자가 엔터를 쳐넣을 때요

0:14:47.029,0:14:50.839
e.getSource를 해주면 되죠

0:14:50.840,0:14:54.740
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

0:14:54.740,0:14:57.769
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

0:14:57.769,0:15:00.139
자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

0:15:00.139,0:15:03.809
여기서, 모든 종류의 경고창이 뜹니다

0:15:03.809,0:15:07.039
그러므로 여기서, 우리는 박스에 들어있는 텍스트와 hi를 합쳐서 println해 주고 싶은 건데요

0:15:07.039,0:15:11.549
이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

0:15:11.549,0:15:15.359
이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

0:15:15.360,0:15:20.600
그럼 알아서 텍스트를 리턴해 줄 겁니다

0:15:20.600,0:15:24.119
엔터를 치면 박스에 있던 문자열을 리턴해 주죠

0:15:24.119,0:15:27.200
그럼 hi와 이 리턴된 텍스트를 출력해 줍니다

0:15:27.200,0:15:30.440
프로그램에서 봤던 것과 같습니다

0:15:30.440,0:15:32.789
그건 hi가 아니라 hello였다는 걸 제외하면요

0:15:32.788,0:15:34.419
그건 hi가 아니라 hello였다는 걸 제외하면요

0:15:34.419,0:15:37.860
하지만 경고음 사라져야 합니다

0:15:37.860,0:15:43.820
이렇게 코드를 써서 생기는 문제는 뭘까요?

0:15:43.820,0:15:47.390
이건 인스턴스 변수가 아닙니다. 그렇죠?

0:15:47.389,0:15:50.960
그러므로 현재는 방도가 없어요

0:15:51.840,0:15:56.610
여기 이게 init메소드고 이 밖에서 TF를 참조하려면요[br]그래서 인스턴스 변수를 생성해야 하는 것입니다

0:15:56.610,0:15:59.450
알겠죠? 이게 init메소드고요 이 앞은 public void고요

0:15:59.450,0:16:04.110
이 TF를 클래스 어딘가에서 예를 들어 여기서요

0:16:04.110,0:16:07.629
내가 l바를 선언한 곳이죠

0:16:07.629,0:16:08.139
클래스 아래쪽 어딘가 입니다

0:16:08.139,0:16:11.990
여기다 private JTextField TF를 해줍니다

0:16:11.990,0:16:12.830
private JTextField TF

0:16:12.830,0:16:14.070
private JTextField TF

0:16:14.070,0:16:15.280
private JTextField TF

0:16:15.279,0:16:19.059
그리고 여기서는 선언은 안하고 tf를 new로 생성해 줍니다

0:16:19.059,0:16:22.888
이렇게 인스턴스 변수를 선언했습니다

0:16:22.889,0:16:25.649
이렇게 인스턴스 변수를 선언했습니다

0:16:25.649,0:16:26.870
여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

0:16:26.870,0:16:28.750
여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

0:16:28.750,0:16:35.320
그럼 코드를 좀 보여드릴게요

0:16:35.320,0:16:38.800
자 이게 텍스트 필드 예제입니다

0:16:38.799,0:16:41.639
콘솔 프로그램을 확장시키려고 합니다

0:16:41.639,0:16:43.730
아직 콘솔로 하고 있잖아요

0:16:43.730,0:16:48.149
init메소드에서 name field를 만들게요

0:16:48.149,0:16:51.669
nameField가 뭐냐고요? private JTextField입니다.

0:16:51.669,0:16:55.279
이렇게 nameField를 정장해놓고요. 이걸 new JTextFiedl(10)으로 초기화 하겠습니다

0:16:55.279,0:16:57.759
저기서 썼던 거랑 똑같을 코드죠

0:16:57.759,0:17:01.250
이제 추가적으로 좀 더 재밌는 걸 해보죠

0:17:01.250,0:17:05.959
박스에 라벨을 붙이려고 합니다

0:17:05.959,0:17:10.548
일단 박스를 컨트롤 바에 붙이고

0:17:10.548,0:17:13.480
name이라는 new JLabel을 add해 줄 겁니다

0:17:13.480,0:17:16.730
name이라는 new JLabel을 add해 줄 겁니다

0:17:16.730,0:17:18.000
그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

0:17:18.000,0:17:19.880
그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

0:17:19.880,0:17:23.160
자 첫째로 이건 그냥 name이라고 써질 거고

0:17:23.160,0:17:27.600
그리고 아까의 nameField를 add할게요

0:17:27.599,0:17:30.389
즉 name텍스트 옆에 박스를 생성하는 거죠

0:17:30.390,0:17:32.280
그리고 아까 말했던 것과 정확히 동일 하게 할겁니다

0:17:32.279,0:17:35.160
액션리스너를 add해 주고 해서

0:17:35.160,0:17:36.820
당신이 무엇인가

0:17:36.819,0:17:38.259
상호작용을 하면

0:17:38.259,0:17:41.799
그것을 알 수 있게 하는 겁니다

0:17:43.808,0:17:46.609
. 이것은 즉 이제 actionPerformed가 호출되고

0:17:46.609,0:17:50.209
액션리스너에 대한 이벤트를 생성하는 것이

0:17:50.210,0:17:51.528
가능해진다는 이야기입니다

0:17:51.528,0:17:55.109
actionPerformed에서 e.getSource를 해주고요[br]이걸 nameField와 비교할 수 있습니다

0:17:55.109,0:17:57.619
이걸 밑에 인스턴스 변수로 저장해 두었으니까요

0:17:57.619,0:18:01.719
hello를 써주고 이걸 nameField의 텍스트와 연계시켜야죠

0:18:03.750,0:18:06.109
텍스트 크기를 좀 더 키워볼게요

0:18:06.109,0:18:09.309
자, 조금 더 크게요 어떻게 하는지 보세요

0:18:09.309,0:18:11.029
제가 좋아하는 서체인Courier 24포인트로 할 게요

0:18:11.029,0:18:14.639
제가 좋아하는 서체인Courier 24포인트로 할 게요

0:18:14.640,0:18:17.090
좋아요 더 크게

0:18:22.390,0:18:24.740
자 다시 한 번

0:18:24.740,0:18:28.509
Mahran 하고 엔터치면 hello, Mehran이 뜹니다. 보이죠? [br]엔터를 칠 때마다 이벤트가 일어나죠.

0:18:28.509,0:18:32.920
엔터, 엔터, 엔터. 보세요, 텍스트가 나오죠

0:18:32.920,0:18:36.860
그리고 이건 또 다른 거. 재밌죠

0:18:36.859,0:18:39.158
Sally... 스크롤을 움직여요. 많이 재미있진 않죠

0:18:39.159,0:18:43.539
2분정도 하기에 딱 좋아요

0:18:44.970,0:18:48.650
이런 식으로 하는 거에요 이제 텍스트 박스로부터

0:18:48.650,0:18:49.740
정보(텍스트)를 얻는 방법을 아셨죠

0:18:49.740,0:18:52.259
텍스트 박스에 대해 질문?

0:18:52.259,0:18:56.500
네, 뒤에 학생

0:18:56.500,0:19:00.380
네, 기본적으로 레이아웃은 뭔가를 add해 줄 때마다

0:19:03.319,0:19:06.878
왼쪽에서 오른 쪽으로 쭉 확장됩니다

0:19:06.878,0:19:10.519
어떤 영역이던 간에요 이 경우에는, 서쪽영역이죠

0:19:10.519,0:19:14.288
모든 게 가운데로 몰렸죠. 여기에 공간을 주고 싶다면 JLabel을 더해주면 됩니다 그러면 이것들 사이에 공간이 더 넓어지겠죠

0:19:14.288,0:19:17.628
거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

0:19:17.628,0:19:19.990
거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

0:19:19.990,0:19:23.490
또 다른 재미있는 게 있습니다

0:19:23.490,0:19:25.970
사실 텍스트 필드에 이름을 줄 수 있습니다

0:19:25.970,0:19:29.089
이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

0:19:29.089,0:19:31.579
이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

0:19:31.579,0:19:35.399
이름을 줘서 그 이름으로 참조해 봅시다

0:19:35.400,0:19:38.798
괜찮죠? 이름을 만들 수 있어요

0:19:38.798,0:19:42.490
여기 완전히 똑같은 예제가 있습니다[br]약간의 차이가 있지만

0:19:42.490,0:19:43.160
조금 달라요

0:19:43.160,0:19:47.538
전과 동일한 코드입니다

0:19:47.538,0:19:50.230
내가 namefield를 생성했다는 걸 빼면요

0:19:50.230,0:19:53.400
여기에 액션 코맨드를 주는데요

0:19:53.400,0:19:57.540
그 액션 코맨드는 name일 것입니다

0:19:57.539,0:20:02.000
그리고 이런 이벤트를 생성할 때마다 그

0:20:02.000,0:20:04.619
이벤트의 근원이 얘인지 확인합니다

0:20:04.619,0:20:06.109
혹은, 이름을 주고

0:20:06.109,0:20:10.529
버튼에 했던 것과 똑같은 일을 할 수 있어요

0:20:10.529,0:20:14.538
이 밑에서 getActionCommand를 하고요 이건 문자열을 반환하죠

0:20:14.538,0:20:15.650
즉 이벤트를 생성하는 오브젝트의 이름을요

0:20:15.650,0:20:20.560
이게 name과 equal하나 봅니다[br]즉 내가 주었던 이름과요

0:20:20.559,0:20:23.289
버튼에서 했던 걸 돌아볼 수 있어요

0:20:23.289,0:20:26.720
버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

0:20:26.720,0:20:27.989
버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

0:20:27.989,0:20:29.519
혹은 버튼의 소스로도 확인 해 볼 수 있었죠

0:20:29.519,0:20:31.970
혹은 버튼의 소스로도 확인 해 볼 수 있었죠

0:20:31.970,0:20:35.229
JTextField. 이걸 거의 항상 getSource를 사용해 이용할 수 있어요

0:20:35.229,0:20:38.528
하지만 이름으로도 참조할 수 있고요

0:20:38.528,0:20:42.249
하지만 실제 화면상에 이 이름은 보이지 않습니다

0:20:42.249,0:20:45.528
하지만 실제 화면상에 이 이름은 보이지 않습니다

0:20:45.528,0:20:47.440
화면상에 뭔가 텍스트가 뜨길 바란다면

0:20:47.440,0:20:50.909
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

0:20:50.909,0:20:52.050
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

0:20:52.049,0:20:59.049
여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

0:21:01.109,0:21:04.079
이게 최대치입니다

0:21:04.079,0:21:09.369
이게 최대치입니다

0:21:09.369,0:21:12.619
네, namefield는 l바에 있어요

0:21:12.619,0:21:17.489
더 이상 참조하지 않으니까 필요 없어요

0:21:17.490,0:21:21.359
이걸 복사해서 붙여 넣기 해볼 게요

0:21:21.359,0:21:23.389
이걸 복사해서 붙여 넣기 해볼 게요

0:21:28.220,0:21:33.309
아 이런. 이게 바로 이걸 여기 썼던 이유입니다

0:21:33.309,0:21:36.690
아 이런. 이게 바로 이걸 여기 썼던 이유입니다

0:21:36.690,0:21:40.360
이 텍스트를 얻기 위해

0:21:40.359,0:21:41.098
이걸 참조할 필요가 있죠

0:21:41.098,0:21:43.838
솔직히, 이걸 e.getSource로 처리해도 됩니다. 이 텍스트를 얻는 걸요

0:21:43.838,0:21:45.159
그래서 꼭 필요하지 않지만, 이게 나아요

0:21:45.160,0:21:49.060
이게 훨씬 깔끔한 방법이거든요

0:21:49.059,0:21:49.940
이걸 없애 버리죠

0:21:49.940,0:21:52.100
이걸 없애 버리죠

0:21:53.329,0:22:00.329
JTextField에 대해 또 다른 질문?

0:22:01.950,0:22:03.980
어.. 네

0:22:03.980,0:22:05.048
네, 할 수 있어요

0:22:05.048,0:22:09.730
20분 뒤에 보여드릴게요

0:22:09.730,0:22:12.909
세 자리 옆으로 날라갔네요..[br]이걸 하기 전에 앞서

0:22:12.909,0:22:15.120
지금까지와는 다른 걸 배워봅시다

0:22:15.119,0:22:18.459
지금까지는 상호작용자들이

0:22:18.460,0:22:19.909
스크린 아래쪽에서

0:22:19.909,0:22:22.519
가운데 정렬되어 나와잖아요

0:22:22.519,0:22:26.429
이걸 다른 식으로 배치할 수 있을까요[br]그리고 이러한 걸 가능하게 해주는 것을

0:22:26.429,0:22:30.450
그리고 이러한 걸 가능하게 해주는 것은

0:22:30.450,0:22:34.970
이상하게도 레이아웃layout입니다

0:22:34.970,0:22:39.319
즉 레이아웃이 특정 상호작용자들의 레이아웃을 컨트롤합니다

0:22:39.319,0:22:42.618
지금까지 여러분이 여러분의 친구, 콘솔 프로그램

0:22:42.618,0:22:45.089
혹은 그래픽 프로그램을

0:22:45.089,0:22:48.529
쓰면서 봤던 것은 보더레이아웃입니다

0:22:48.529,0:22:50.700
쓰면서 봤던 것은 보더레이아웃입니다

0:22:50.700,0:22:54.819
사실 여러분은 이미 보더 레이아웃을 경험해 본거죠[br]이렇게 생겼습니다

0:22:54.819,0:22:58.599
가운데 영역이 있고요. 북쪽, 남쪽, 동쪽, 그리고 서쪽 보더border가 있습니다

0:22:58.599,0:23:01.719
그래서 보더레이아웃이라 부르는 거죠

0:23:01.720,0:23:02.759
그래서 보더레이아웃이라 부르는 거죠

0:23:02.759,0:23:04.150
이 보더 레이아웃에서는

0:23:04.150,0:23:07.370
이 보더 레이아웃에서는

0:23:07.369,0:23:11.829
가운데 영역에서 액션이 일어났습니다

0:23:11.829,0:23:14.439
가운데 영역에서 액션이 일어났습니다

0:23:14.440,0:23:18.629
콘솔 프로그램에서는 자동으로 가운데에 콘솔을 add해 주었고요

0:23:18.628,0:23:22.928
그게 콘솔 프로그램입니다[br]그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다

0:23:22.929,0:23:26.210
그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다[br]여기서 여러분이 이것저것을 draw할 수 있었죠.

0:23:26.210,0:23:30.380
다른 영역은 오직 뭔가를 그곳에 add해 주었을 때부터 보이기 시작합니다

0:23:30.380,0:23:32.440
초기에 오로지 그래픽을 위한

0:23:32.440,0:23:36.039
그래픽프로그램을 만들 때 여러분은

0:23:36.039,0:23:36.980
서쪽 영역을 보지 못했습니다

0:23:36.980,0:23:39.390
그것은 거기에 아무런 상호작용자를 add해 주지 않았기 때문이죠

0:23:39.390,0:23:43.860
이러한 상호작용자 영역은 무언가 거기에 얹혀주었을 때만 나타납니다

0:23:43.859,0:23:47.099
이러한 것을 컨트롤바라고 부른다고 했었죠[br]지난 시간에 봤잖아요

0:23:47.099,0:23:50.939
그런 다른 종류의 레이아웃은 무엇이 있을까요?[br]중요한 몇 가지 레이아웃을 공부해 봅시다

0:23:50.940,0:23:55.049
첫째로 그리드 레이아웃이라는 게 있습니다

0:23:55.049,0:23:59.940
그리드 레이아웃을 이용하려면 일단 이걸 생성해야 하고요

0:23:59.940,0:24:04.220
또 그리드 레이아웃은 행과 열로 이루어져 있습니다

0:24:04.220,0:24:06.298
또 그리드 레이아웃은 행과 열로 이루어져 있습니다

0:24:06.298,0:24:10.219
예를 들어 2행3열로요

0:24:10.219,0:24:14.130
그럼 이러한 레이아웃이 나옵니다[br]이것은 2행 3열을 그리드grid입니다

0:24:14.130,0:24:17.070
잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

0:24:17.069,0:24:17.798
잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

0:24:17.798,0:24:19.690
어쨌든 Conceptually개념적으론 이렇습니다

0:24:19.690,0:24:24.110
자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

0:24:24.109,0:24:26.319
자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

0:24:26.319,0:24:31.058
그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

0:24:31.058,0:24:32.028
그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

0:24:32.028,0:24:37.169
아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

0:24:37.169,0:24:37.690
아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

0:24:37.690,0:24:42.028
매번 새 요소를 더할 때 마다 그 행의 맨 마지막 열에 찰 때 까지 차례로 채워지고

0:24:42.028,0:24:45.878
자동으로 아래 행으로 내려갑니다[br]순차적으로 채워집니다

0:24:45.878,0:24:46.980
순차적으로 채워집니다

0:24:46.980,0:24:49.659
그리드에 차근차근요

0:24:49.659,0:24:52.709
그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

0:24:52.709,0:24:56.090
그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

0:25:00.048,0:25:04.329
그리드 레이아웃을 보여주는 심플한 프로그램입니다

0:25:04.329,0:25:05.648
일단 init메소드에서 레이아웃을 생성해줍니다

0:25:05.648,0:25:08.309
저는 원래 있던 레이아웃을

0:25:08.309,0:25:11.919
다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고 싶습니다

0:25:11.920,0:25:16.420
다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고

0:25:16.420,0:25:19.870
즉 2행 3열의 그리드로요

0:25:19.869,0:25:20.399
이 프로그램에서 흥미로운 점은 [br]이 그리드 레이아웃 예제를 보시면요

0:25:20.400,0:25:22.788
이건 콘솔 프로그램을 확장한 것이 아닙니다

0:25:22.788,0:25:26.739
그래픽 프로그램을 확장한 것도 아닙니다

0:25:26.739,0:25:29.420
그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

0:25:29.420,0:25:31.230
그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

0:25:31.230,0:25:35.160
콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

0:25:35.160,0:25:39.000
콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

0:25:54.950,0:25:56.600
제가 이걸 만든 이유는

0:25:56.599,0:26:01.939
그냥 크고 뚱뚱한 버튼들이 보고 싶어서였어요

0:26:04.720,0:26:07.970
보세요. 6개 버튼이 화면을 완전 차지했죠

0:26:07.970,0:26:09.110
좋습니다

0:26:09.109,0:26:11.689
이게 그리드 입니다. 상호작용자들이 그리드를 꽉 채웠어요

0:26:11.690,0:26:16.029
이 레이아웃은 화면에서 가능한 한 많은 공간을 차지합니다

0:26:16.029,0:26:20.160
더 중요한 것은 그리드 레이아웃의 각 칸을 차지한

0:26:20.160,0:26:24.029
상호자용자들이 그 칸의 공간을 최대한 많이 차지한다는 것입니다

0:26:24.740,0:26:29.400
그래서 이런 모양이 됩니다 이렇게 차리를 차지하죠

0:26:29.400,0:26:34.050
이게 도대체 뭐지 하는 생각이 들 겁니다

0:26:34.049,0:26:37.460
이게 도대체 뭐지 하는 생각이 들 겁니다

0:26:37.460,0:26:39.659
이런 2인치x3인치만한 버튼 같은 거 필요 없다고요

0:26:39.659,0:26:42.000
이 이유에 대해선 지금 이야기 하지 않겠어요

0:26:42.000,0:26:43.288
아마 나중에요

0:26:43.288,0:26:47.528
사운드 이펙트랑 비슷해요

0:26:47.528,0:26:52.720
제가 창을 리사이즈 할 테니 한 번 보세요

0:26:52.720,0:26:53.400
모든 버튼은 작고 귀여워요

0:26:53.400,0:26:57.530
이게 바로 우리가 레이아웃 매니저를 이용하는 이유입니다

0:26:57.529,0:26:59.269
레이아웃이 어떻게 나올지 알 수 있죠

0:26:59.269,0:27:02.950
이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

0:27:02.950,0:27:04.919
이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

0:27:04.919,0:27:08.139
이러한 것들이 어떻게 놓일지는 알아야 합니다

0:27:08.138,0:27:11.369
만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

0:27:11.369,0:27:15.049
만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

0:27:15.049,0:27:17.389
그리드 레이아웃은 그렇게 유용하진 않죠. 볼 만은 하죠. 책을 보면 알 거에요

0:27:17.390,0:27:18.799
거기 보면 테이블 레이아웃이라는

0:27:18.798,0:27:20.700
또 다른 종류의 레이아웃이 있습니다

0:27:20.700,0:27:23.690
또 플로우 레이아웃이라는 것도 있죠[br]이것은 이야기 하지 않을 거에요

0:27:25.960,0:27:28.460
하지만 테이블 레이아웃이라는 게 있다는 거 정도 알아두세요

0:27:28.460,0:27:34.100
테이블 레이아웃은 그리드 레이아웃과 거진 비슷합니다

0:27:34.099,0:27:36.859
그리드 레이아웃에서처럼 행과 열을 설정해 주고

0:27:36.859,0:27:40.229
거기에 차례로 상호작용자를 채워넣을 수 있습니다

0:27:40.230,0:27:42.849
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

0:27:42.849,0:27:46.798
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

0:27:46.798,0:27:48.509
차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

0:27:48.509,0:27:50.158
무슨 뜻이냐고요

0:27:50.159,0:27:53.609
즉 이 부분에 그리드 레이아웃이 아니고

0:27:53.608,0:27:55.569
테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

0:27:55.569,0:28:00.210
테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

0:28:00.210,0:28:04.009
import할 게 더 생기네요

0:28:04.009,0:28:06.009
이걸 import해줄게요

0:28:06.009,0:28:11.869
이걸 import해줄게요

0:28:30.789,0:28:33.799
자 나와라 테이블 레이아웃

0:28:39.859,0:28:41.248
테이블 레이아웃의 더 좋을 예를 보여줄게요

0:28:41.249,0:28:48.089
테이블 레이아웃의 더 좋을 예를 보여줄게요

0:28:50.039,0:28:50.730
가끔은 코드가 이렇게 추해질 때가 있어요

0:28:50.730,0:28:54.420
가끔은 코드가 이렇게 추해질 때가 있어요

0:28:54.420,0:28:57.019
어쩔 수 없어요

0:28:57.019,0:28:57.950
테이블 레이아웃?

0:28:57.950,0:29:00.069
나왔네요.

0:29:00.069,0:29:01.460
여전히 6개 버튼이 있죠

0:29:01.460,0:29:04.659
윈도우도 리사이징 할 수 있고요

0:29:04.659,0:29:07.190
하지만 이제 창의 사이즈가 바뀌어도 버튼 사이즈는 그대로 입니다

0:29:07.190,0:29:10.200
영역을 꽉 채우지 않아요

0:29:10.200,0:29:13.019
그래서 테이블 레이아웃이 그리드 레이아웃보다 아주 조금 더 유용하긴 합니다

0:29:13.019,0:29:15.239
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

0:29:15.239,0:29:19.029
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

0:29:19.029,0:29:22.589
자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

0:29:22.589,0:29:26.358
사실, 할 수 있죠 그리고 이걸 좀 더 재미지게 보여드릴게요

0:29:26.358,0:29:29.408
이건 온도 전환 프로그램입니다

0:29:29.409,0:29:31.989
책에 있는 거고요 코드를 따로 보여주진 않겠어요

0:29:31.989,0:29:35.809
책에 있으니까. 따로 프린트물을 나눠주지 않아요

0:29:35.809,0:29:39.329
기본적인 개념은 degree Fahrenheit라고 써진 라벨을 주고요

0:29:39.329,0:29:40.528
또 degree Celsius라는 라벨도 만들어요

0:29:40.528,0:29:44.298
그리고 이 안에 값을 주고요[br]Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

0:29:44.298,0:29:44.680
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

0:29:44.680,0:29:46.240
Celsius에 자동으로 알맞는 값이 채워집니다

0:29:46.240,0:29:50.538
32F는 0C고요

0:29:50.538,0:29:52.819
또 다른 재밌는 건 굳이 버튼을 누르지 않아도 되게 하는 겁니다

0:29:52.819,0:29:56.079
값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

0:29:56.079,0:29:57.549
값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

0:30:00.038,0:30:02.900
재밌죠. 이런 프로그램을 어떻게 만들까요

0:30:02.900,0:30:07.220
첫째로 필요한 건 관리되 것들이 아닙니다

0:30:07.220,0:30:10.500
다 그리드에 들어 있고요

0:30:10.500,0:30:13.039
2행 3열의 테이블 레이아웃이 필요합니다

0:30:14.390,0:30:17.360
여기 놓을 첫 번째 요소는 라벨입니다

0:30:17.359,0:30:20.769
그리고 텍스트 필드를 넣습니다

0:30:20.769,0:30:22.970
사실 특별한 텍스트필드를 넣어줄 겁니다

0:30:22.970,0:30:25.419
두 개의 특성화된 텍스트 필드가 있는데요 인트필드와 더블필드라고 부르는 것이 그것입니다

0:30:25.419,0:30:29.570
인티저integer 값 혹은 더블double 값을 얻는다는 보장이 있는 걸 제외하면

0:30:29.569,0:30:32.838
일반 텍스트 필드와 다를 바 없습니다

0:30:32.838,0:30:37.460
그럼 만약 A를 써넣고 이걸 기온으로 바꾸려고 하면 어떻게 될 지 궁금하시죠

0:30:37.460,0:30:40.529
이런, 버튼을 잘못 눌렀습니다

0:30:40.529,0:30:43.899
A를 기온으로 바꾸려고 해요 그럼 정수값을 넣으라는 팝업 창이 뜹니다

0:30:43.900,0:30:45.880
그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

0:30:45.880,0:30:48.720
그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

0:30:48.720,0:30:51.690
그리고 버튼을 넣어주는데요[br]어떻게든 저는 이 버튼과 텍스트 필드를 연결해 주어서

0:30:51.690,0:30:53.828
같은 액션을 취하게 하고 싶어요

0:30:53.828,0:30:56.418
이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

0:30:56.419,0:30:57.560
이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

0:30:57.559,0:31:01.389
첫째로 할 것은 레이아웃을 테이블 레이아웃으로 설정해 주는 겁니다

0:31:01.390,0:31:05.100
콘솔이나 캔버스가 생성되는 것을 원치 않기 때문에

0:31:05.099,0:31:05.859
프로그램을 확장한다는 것에 다시 한 번 주목해주세요

0:31:05.859,0:31:08.299
저 전체 레이아웃을 명시하고 싶어요

0:31:08.299,0:31:09.819
그래서 프로그램을 확장하는 겁니다

0:31:13.538,0:31:16.379
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

0:31:16.380,0:31:18.760
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

0:31:18.759,0:31:19.569
TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

0:31:19.569,0:31:23.059
다시 말하지만. 그리고 첫 번째 요소를 add해 주겠습니다

0:31:23.059,0:31:25.849
. 제가 첫째로 add할 것은

0:31:25.849,0:31:28.169
바로 degrees Fahrenheit를 라벨로 넣어주는 것입니다

0:31:28.170,0:31:31.440
그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

0:31:31.440,0:31:33.809
그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

0:31:33.809,0:31:35.359
이걸 어떻게 만들죠? 이 위쪽에 일단 생성해 줍니다

0:31:35.359,0:31:39.269
바로 인스턴스 변수로써 선언해 준거죠

0:31:39.269,0:31:43.259
그리고 이건 인트필드입니다

0:31:43.259,0:31:44.240
J텍스트 필드가 아니고요

0:31:44.240,0:31:47.480
아까 말했듯이 정수를 써넣어주는 데 특성화된 필드입니다

0:31:47.480,0:31:50.430
그것 빼고는 텍스트 필드랑 똑같고요

0:31:50.430,0:31:54.549
일단 인트필드를 보여주고 싶네요

0:31:54.549,0:31:55.980
자 new intfield를 해주고 이것의 초기 값을, 사이즈가 아니고요

0:31:55.980,0:31:59.049
초기값은 32로 설정해 주겠습니다

0:31:59.049,0:32:01.648
Fahrenheit필드를요

0:32:01.648,0:32:03.768
그리고 액션 코멘드를 설정해 줄 건데요

0:32:03.769,0:32:07.778
그래서 액션이 생성되면 처리해 줄 수 있게요

0:32:07.778,0:32:08.788
그래서 액션이 생성되면 처리해 줄 수 있게요

0:32:08.788,0:32:10.619
그래서 액션이 생성되면 처리해 줄 수 있게요

0:32:10.619,0:32:14.079
이름과 연관 지어서 F -> C

0:32:14.079,0:32:17.099
이게 이름이 될 거고요 자 이제 이름도 설정했고요

0:32:17.099,0:32:18.899
이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

0:32:18.900,0:32:21.870
이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

0:32:21.869,0:32:25.409
그리고 액션 리스너를 add해주죠

0:32:25.410,0:32:28.259
전에 텍스트 필드에 했던 거랑 똑같죠. 이게 인트필드라는 거 빼고요

0:32:28.259,0:32:30.618
Celsius 필드에도 이와 같은 일을 똑같이 해줍니다. 이것도 인트필드죠

0:32:30.618,0:32:35.788
이건 처음엔 초기값0으로 시작하고요[br]액션코맨드를 C에서 F가 되게 해놨습니다

0:32:35.788,0:32:39.169
그러므로 약간 다른 이름을 주도록 하죠

0:32:39.169,0:32:42.559
또한 액션이벤트를 listen하고 생성하도록 설정해 놓았습니다

0:32:42.558,0:32:44.500
그런 후 그리드에 놓습니다

0:32:44.500,0:32:47.529
그리드에 놓을 첫 번째 요소는 라벨입니다

0:32:47.529,0:32:49.769
아까 이야기했듯이요

0:32:49.769,0:32:52.979
다음 요소는 텍스트 박스고요

0:32:52.979,0:32:54.600
실제로는 숫자로 된 값을 갖는 거고요

0:32:54.599,0:32:58.288
그리드 첫째 줄의 마지막 요소는 버튼입니다

0:32:58.288,0:33:02.079
이름은 F ->C고요

0:33:02.079,0:33:05.740
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

0:33:05.740,0:33:10.390
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

0:33:10.390,0:33:13.570
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

0:33:13.569,0:33:17.460
여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

0:33:17.460,0:33:21.670
네 이 두 요소는 같은 이름을 가지고요[br]하지만 두 경우 다 같은 일을 해 주고 싶기 때문에

0:33:21.670,0:33:24.940
별 차이가 없어요

0:33:24.940,0:33:27.588
제가 원하는 건 누군가 버튼을 누르면 변환이 일어나는 것이니까요

0:33:27.588,0:33:29.989
이렇게 변환이 일어나는 코드를 쓰고요

0:33:29.989,0:33:30.900
이렇게 변환이 일어나는 코드를 쓰고요

0:33:30.900,0:33:33.820
또 누군가 텍스트 필드에 뭔가를 쓰고 엔터를 치면

0:33:33.819,0:33:35.619
버튼을 누른 것과 같은 일이 생깁니다

0:33:35.619,0:33:38.479
이것은 여러분이 웹에서 많이 접했던 것과 다르지 않습니다

0:33:38.480,0:33:41.740
어떠한 검색 엔진에서 창에 뭔가를 치고 클릭을 해서

0:33:41.740,0:33:45.329
검색이 시작되거나 엔터를 쳐서 검색이 시작되는 거 기억나시죠[br]하지만 몇이나 되는 사람이 버튼을 누릅니까

0:33:45.329,0:33:48.490
없어요[br]또 엔터를 치는 사람은 얼마나 되죠?

0:33:48.490,0:33:51.839
엔터를 치는 게 편하지 않나요?

0:33:51.839,0:33:54.269
어쨌든 이 프로그램에서도 그것과 같은 작업을 해주는 겁니다

0:33:54.269,0:33:57.480
엔터를 치는 게 더 편할 때가 있기 때문에

0:33:57.480,0:34:01.079
우리가 액션 코맨드에 추가적인 작업을 해 주는 거죠

0:34:01.079,0:34:03.689
그리고 Celcius에도 똑같은 일을 해줍니다

0:34:03.690,0:34:07.690
이게 전체 UI 혹은 GUI를 위한 설정입니다

0:34:07.690,0:34:11.490
그리고 사용자가 버튼을 클릭하면 액션 코맨드를 가지고 옵니다

0:34:13.019,0:34:16.650
그리고 액션리스너를 추가하여

0:34:16.650,0:34:19.139
처리해 줍니다

0:34:19.139,0:34:21.900
버튼을 클릭했을 때 넘어오는

0:34:21.900,0:34:25.420
액션 코맨드가 F->C라면요

0:34:25.420,0:34:28.378
Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

0:34:28.378,0:34:29.699
Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

0:34:29.699,0:34:32.708
값을 갖게 되고

0:34:32.708,0:34:36.668
F필드는 인티저 필드니까 인티져 값을 반환합니다

0:34:36.668,0:34:39.759
그리고 수학적인 계산을 좀 해주면 되는 데요

0:34:39.760,0:34:41.539
그리고 수학적인 계산을 좀 해주면 되는 데요

0:34:41.539,0:34:44.519
화씨에서 섭씨로 바꾸는 실을 몰라도 너무 걱정하지 마세요

0:34:44.518,0:34:47.898
이렇게 하면 됩니다 F 곱하기 95를 하고 32를 빼주면 되요

0:34:47.898,0:34:51.478
이제 알겠죠

0:34:51.478,0:34:55.759
더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

0:34:55.760,0:34:57.570
더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

0:34:57.570,0:35:00.950
F필드에 값을 넣고 엔터를 치거나 버튼을 누르면

0:35:00.949,0:35:02.489
화면의 C필드에 값이 업데이트 됩니다

0:35:02.489,0:35:06.358
같은 것을 말할 때 얼마다 다양하게 표현할 수 있나요

0:35:06.358,0:35:07.150
누군가 C->F라고 한다면

0:35:07.150,0:35:10.418
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

0:35:10.418,0:35:14.199
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

0:35:14.199,0:35:15.789
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

0:35:15.789,0:35:17.920
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

0:35:17.920,0:35:20.210
섭씨에서 화씨로 변환하는 식이 필요할 겁니다

0:35:24.079,0:35:27.389
이게 전체 프로그램입니다 이건 인스턴스 변수고요

0:35:27.389,0:35:28.500
그럼 이제 기온 프로그램을 실행해 봅시다

0:35:28.500,0:35:30.829
그럼 이제 기온 프로그램을 실행해 봅시다

0:35:30.829,0:35:32.109
레이블이 있고

0:35:32.108,0:35:36.139
초기 값이 있고 F->C버튼이 있고요

0:35:36.139,0:35:38.670
그리고 100이란 값을 화씨에 넣어주면

0:35:38.670,0:35:40.380
38 섭씨로 변화해 줍니다

0:35:40.380,0:35:43.260
그리고 212를 화씨에 넣어주고

0:35:43.260,0:35:44.690
마우스를 사용하지 않고, 엔터를 쳐도 마찬가지고 변환이 이루어지고요

0:35:44.690,0:35:49.389
같습니다

0:35:49.389,0:35:51.538
섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

0:35:51.539,0:35:54.880
섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

0:35:54.880,0:35:58.900
리사이징도 할 수 있고요. 어쨌든 계속 중앙에 위치합니다.

0:35:58.900,0:36:01.740
멋지지 않나요. 작게 하면 작아지진 않아요

0:36:06.989,0:36:11.099
볼 수 없으니까. 질문 있나요?

0:36:11.099,0:36:12.719
마이크를 사용해서 말해줄래요

0:36:12.719,0:36:18.318
여러분들도 마이크를 쓰게 해야겠네요

0:36:18.869,0:36:20.659
그리드 각 셀의 넓이를 조정할 수 있나요

0:36:20.659,0:36:24.938
그래서 테이블 레이아웃이 있죠

0:36:24.938,0:36:26.058
각각의 사이즈를 특정할 수 있도록 만들 수 있어요

0:36:26.059,0:36:29.569
각각의 사이즈를 특정할 수 있도록 만들 수 있어요

0:36:29.568,0:36:31.619
. 여기서 하지 않았지만요. 책에는 있습니다

0:36:31.619,0:36:36.108
그렇게 하고 싶다면요. 하지만 수업에서는 더 이상 깊게 들어가지 않겠습니다

0:36:36.108,0:36:39.469
하지만 네 할 수 있는 방법은 있어습니다

0:36:39.469,0:36:41.400
마지막으로 재밌는 걸 하나 하고 싶네요

0:36:41.400,0:36:46.200
텍스트와 그래픽을 이용해서요 그리고 상호작용자도요

0:36:46.199,0:36:47.368
다 이용해서요

0:36:47.369,0:36:51.729
텍스트, 그래픽, 상호작용자. 옛날에 했던 거 생각이 나죠[br]행맨(단어 맞추는 게임)이요

0:36:51.728,0:36:53.879
행맨. 텍스트도 이용했고 그래픽도 이용했죠

0:36:53.880,0:36:55.480
하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

0:36:55.480,0:36:58.679
하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

0:37:01.088,0:37:05.159
자 이제 모든 걸 합쳐서 해볼 시간이 돌아왔습니다

0:37:07.188,0:37:09.239
텍스트와 그래픽에요

0:37:09.239,0:37:11.760
자 이제 텍스트와 그래픽으로 할 것은

0:37:11.760,0:37:15.810
프로그램에 콘솔을 만들고 그래픽 캔버스도 만들어야 되고요

0:37:16.958,0:37:20.878
상호작용자도 만들어야 되요.

0:37:23.449,0:37:26.178
이걸 다 어떻게 할까요

0:37:26.179,0:37:27.940
첫째로 할 것은 작은 텍스트를 칠판에 써주고요

0:37:27.940,0:37:31.429
첫째로 할 것은 작은 텍스트를 칠판에 써주고요

0:38:07.150,0:38:09.889
두 가지 멋진 맛이 합해지면 더 맛있어져요

0:38:09.889,0:38:13.498
어떤걸 초콜렛으로 하고 어떤걸 땅콩 버터로 할 지만 정해주면 되요

0:38:13.498,0:38:17.198
하지만 텍스트와 그래픽의 조합이니, 행맨이 됩니다. 상호작용자도 있고요

0:38:21.168,0:38:25.088
우리가 할 것은 콘솔 창을 확장하는 것입니다

0:38:25.088,0:38:29.058
우리가 할 것은 콘솔 창을 확장하는 것입니다

0:38:29.059,0:38:30.220
우리가 여전히 (우리의 친구인)콘솔을 필요로 하기 때문입니다

0:38:32.518,0:38:36.908
우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

0:38:36.909,0:38:37.929
우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

0:38:37.929,0:38:42.439
이것은 우리에게 동서남북 영역을 제공하고요

0:38:42.438,0:38:47.509
이 영역들에 우리는 상호작용자를 올릴 수 있죠

0:38:47.509,0:38:48.548
이 영역들에 우리는 상호작용자를 올릴 수 있죠

0:38:48.548,0:38:51.989
흥미로운 것은 중앙 영역입니다

0:38:51.989,0:38:54.898
전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

0:38:54.898,0:38:58.618
전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

0:38:58.619,0:38:59.798
거기에 텍스트를 쓸 수 가 있죠 그게 할 수 있는 전부이기도 하고요

0:38:59.798,0:39:03.748
우리가 할 것은 콘솔 프로그램에게 중앙 영역을 주고

0:39:03.748,0:39:07.639
거기에 다른 레이아웃을 줘서 텍스트나

0:39:07.639,0:39:08.480
그래픽을 채워넣을 수 있게 만드는 것입니다

0:39:08.480,0:39:11.490
그래픽을 채워넣을 수 있게 만드는 것입니다

0:39:11.489,0:39:12.698
음

0:39:12.699,0:39:14.688
이제 제가 뭘 할거냐고요

0:39:14.688,0:39:19.168
첫째로 할 것은 레이아웃에 대해 고려하는 것입니다

0:39:19.168,0:39:22.228
레이아웃은 이 중앙에 적용될 것이고요

0:39:22.228,0:39:26.048
기억해야 할 것은 콘솔 프로그램입니다

0:39:26.048,0:39:28.509
콘솔 프로그램은 영역을 꽉 채우고요

0:39:28.510,0:39:34.130
이제 콘솔에 첫 요소를 추가해 주어야 합니다

0:39:34.130,0:39:37.579
이것은 즉 레이아웃을 어떻게 정하든 이 안에 적용된다는 것입니다

0:39:37.579,0:39:41.940
한 줄에 3개의 요소가 들어가는 그리드를 만든다고 하죠

0:39:41.940,0:39:44.039
첫번째는 콘솔이 될 거고요

0:39:44.039,0:39:45.450
첫번째는 콘솔이 될 거고요

0:39:45.449,0:39:48.539
그리고 제어권이 없을 겁니다 [br]그게 콘솔 프로그램이 원래 그러니까요

0:39:48.539,0:39:51.769
여러분이 콘솔 프로그램을 확장하고 만들 레이아웃이 뭐던 간에

0:39:51.769,0:39:55.389
첫 번째 요소는 텍스트입니다

0:39:57.028,0:39:58.760
그럼 여러분은 궁금하겠죠

0:39:58.760,0:40:01.819
. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

0:40:01.818,0:40:04.088
. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

0:40:04.088,0:40:08.078
우리는 행맨에 약간의 트릭을 사용할 겁니다

0:40:08.079,0:40:08.750
G캔버스라는 게 있었잖아요

0:40:08.750,0:40:13.269
이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

0:40:13.269,0:40:16.358
이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

0:40:16.358,0:40:20.788
그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

0:40:20.789,0:40:23.329
그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

0:40:23.329,0:40:29.599
예를 들어 인자가 1,3인 그리드 레이아웃을 만들죠

0:40:29.599,0:40:30.789
이렇게 생길 거고요

0:40:32.228,0:40:36.018
첫번째 칸은 이미 콘솔이 차지했고요

0:40:36.018,0:40:37.899
G캔버스를 생성해서 두 번째 칸에 올려줍니다

0:40:37.900,0:40:41.309
G캔버스를 생성해서 두 번째 칸에 올려줍니다

0:40:41.309,0:40:44.278
그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

0:40:44.278,0:40:48.268
그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

0:40:48.268,0:40:54.078
이게 G캔버스 도스입니다

0:40:55.710,0:40:59.820
그러므로 한 개의 콘솔과 두 개의 G캔버스가 생겼습니다

0:40:59.820,0:41:02.780
추가로, 화면 주변에 상호작용작들을 add해 줄 수 있고요

0:41:02.780,0:41:06.470
이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

0:41:06.469,0:41:07.098
이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

0:41:07.099,0:41:10.548
이제 5분만에 한 거에요 그것도 엄청 쉽게.

0:41:11.409,0:41:18.409
자 이게 그 모습입니다

0:41:18.938,0:41:21.629
텍스트 그리고 그래픽. 콘솔 프로그램을 확장시켰고요

0:41:21.630,0:41:23.769
그리고 init메소드로 레이아웃을 설정하는 데요

0:41:26.358,0:41:30.719
저는 그리드 레이아웃으로 하고 싶어요

0:41:30.719,0:41:33.039
기억하세요 그리드 레이아웃

0:41:33.039,0:41:34.949
요소들이 공간을 준 만큼 차지해 버려요

0:41:34.949,0:41:38.919
그게 이번 경우에는 제가 바라는 바고요

0:41:38.920,0:41:42.269
그래서 그리드를 쓰는 거고요. 1행 3열의 그리드를 만들 거에요

0:41:42.269,0:41:46.048
그리고 1/3에는 콘솔을 넣을 거고요

0:41:46.048,0:41:49.969
나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

0:41:49.969,0:41:52.019
나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

0:41:52.018,0:41:54.139
그럼 캔버스 두 개를 생성해야겠죠

0:41:54.139,0:41:57.818
RightCanvas와 LeftCanvas라고 부를게요

0:41:57.818,0:42:01.478
RightCanvas와 LeftCanvas라고 부를게요

0:42:01.478,0:42:05.688
그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

0:42:05.688,0:42:08.469
이게 상호작용자죠

0:42:08.469,0:42:09.539
제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

0:42:09.539,0:42:10.819
제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

0:42:10.818,0:42:15.918
RightCanvas와 LeftCanvas라고 부를게요

0:42:15.918,0:42:16.998
이제 뭘 할 거냐고요

0:42:16.998,0:42:20.618
그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

0:42:20.619,0:42:24.419
일단 LeftCanvas에 new Canvas를 해줍니다

0:42:24.418,0:42:27.739
그리고 add를 할 때 myLayout에 해주고요

0:42:27.739,0:42:29.650
캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

0:42:29.650,0:42:31.740
캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

0:42:31.739,0:42:33.239
캔버스를 add했잖아요. 두번째 요소로

0:42:33.239,0:42:36.929
그것을 다시 오른쪽 캔버스에 똑같이 해줍니다

0:42:36.929,0:42:41.169
세번째 요소로 들어가는 오른쪽 캔버스에요

0:42:41.170,0:42:42.950
그러므로 두 개의 큰 캔버스가 그리드의 두번째와 세번째에 있습니다

0:42:42.949,0:42:44.679
이제 콘솔, 캔버스, 캔버스 이런 식이죠

0:42:44.679,0:42:48.779
그럼 이제 상호작용자들을 add하겠어요

0:42:48.780,0:42:53.060
일단 텍스트 필드를 만들거에요. new JTextField를 해줘야겠죠

0:42:53.059,0:42:56.538
그리고 private인 인스턴스 변수로 선언할 거고요

0:42:56.539,0:42:58.278
방금 보여줬고요. 최대 사이즈는 10으로 할 거에요

0:42:58.278,0:43:02.340
라벨을 add하고요. 라벨은 some text라고 부를게요

0:43:02.340,0:43:04.028
그리고 서쪽영역에 놓고요

0:43:05.389,0:43:08.949
이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

0:43:08.949,0:43:13.038
이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

0:43:13.039,0:43:16.400
매우 흔히 일어나는 일인데요. 사람들은 텍스트 필드를 생성하고 프로그램에서 뭔가 칩니다

0:43:16.400,0:43:19.329
그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

0:43:19.329,0:43:21.039
그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

0:43:21.039,0:43:24.789
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

0:43:24.789,0:43:25.958
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

0:43:25.958,0:43:27.848
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

0:43:27.849,0:43:31.450
알고 배우고 실천하고 사랑하세요

0:43:31.449,0:43:34.889
그리고 버튼도 두 개 add할 건데요

0:43:34.889,0:43:37.719
그럼 상호작용자는 텍스트 필드하고 버튼 두 개가 더 있는거죠

0:43:37.719,0:43:40.289
버튼 하나는 왼쪽 캔버스에 그림을 그릴 거고[br]다른 하나는 오른쪽에 그림을 그리게 만들 거에요

0:43:40.289,0:43:42.129
그럼 나머지를 마저 만들기 전에 이게 어떻게 생겼나 보여드리죠

0:43:42.128,0:43:46.328
텍스트와 그래픽까지 만들었죠

0:43:46.329,0:43:48.479
콘솔을 만들었고

0:43:48.478,0:43:50.179
콘솔을 만들었고

0:43:50.179,0:43:54.768
현재 경계선은 없지만 두 개의 캔버스가 있습니다

0:43:54.768,0:43:58.328
두 개의 다른 캔버스 창이 여기 있어요

0:43:58.329,0:44:00.999
텍스트가 있고요. hi라고 칠 수 있죠

0:44:00.998,0:44:02.728
hi. 재밌죠?

0:44:02.728,0:44:03.989
hi. 재밌죠?

0:44:03.989,0:44:07.489
Draw left는 외족 창에 그림을 그리게

0:44:07.489,0:44:08.440
사각형을 그릴건데 좀 있다 보여드리기로 하고

0:44:08.440,0:44:09.628
사각형을 그릴건데 좀 있다 보여드리기로 하고

0:44:09.628,0:44:12.318
Draw right는 오른쪽 창에 그림을 그릴 수 있게 합니다.

0:44:12.318,0:44:15.889
이걸 어떻게 할까요? 나머지 프로그램을 만들면서 알아봅시다

0:44:15.889,0:44:18.589
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

0:44:18.590,0:44:20.798
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

0:44:20.798,0:44:24.449
여기서 액션이 일어납니다[br]actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

0:44:24.449,0:44:27.418
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

0:44:27.418,0:44:30.708
하나의 상호작용자를 가지고 상호작용을 하는 것 외에는[br]이 프로그램에서 할 수 있는 게 없습니다

0:44:30.708,0:44:34.688
일단 텍스트 필드를 체크하고요

0:44:34.688,0:44:38.598
텍스트 필드와의 상호작용이라면

0:44:38.599,0:44:43.019
그럼상호작용은 근원지가 텍스트필드 였다면 텍스트 필드에 뭔가를 친 건 이제 콘솔에 나타날 겁니다

0:44:43.018,0:44:46.649
. println을 하면 항상 콘솔에 나타나게 되어있으니까요

0:44:46.650,0:44:49.568
여기선 아직 별 재미가 없죠

0:44:49.568,0:44:52.670
양자택일적으로 텍스트필드에 타이핑을 하지 않았다면

0:44:52.670,0:44:56.389
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

0:44:56.389,0:44:59.509
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

0:44:59.509,0:45:02.849
이걸 여러분이 원하는 대로 섞어 사용하면 됩니다

0:45:02.849,0:45:06.028
코맨드(명령)가 뭐였냐 이러면 getActionCommand를 쓰면 되는데

0:45:06.028,0:45:10.349
그 코맨드가 Draw left였다면 이제 색이 채워진 사각형이 새로 생성되겠죠. 보여드리죠

0:45:10.349,0:45:13.519
새로운 사각형을 만듭니다

0:45:14.418,0:45:17.568
간단하죠. 50x20의 크기로요.

0:45:17.568,0:45:20.038
상수여야 해요

0:45:21.199,0:45:22.930
그리고 filled(채움)으로 설정해 주고

0:45:22.929,0:45:26.639
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

0:45:26.639,0:45:27.679
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

0:45:27.679,0:45:31.518
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

0:45:31.518,0:45:33.778
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

0:45:33.778,0:45:38.028
그냥 그래픽 프로그램이 아니니까요

0:45:38.028,0:45:42.119
그냥 add하란다고 add해 지지 않아요

0:45:42.119,0:45:47.399
이걸 더해 주려면 어떤 캔버스에 더할지 명확히 해주어야 합니다

0:45:47.398,0:45:51.898
왼쪽 캔버스에 더할 거니까 LetfCanvas 이걸 더해라. 이렇게 하고요

0:45:51.898,0:45:54.638
x좌표 20 y좌표 leftY에 더해줍니다

0:45:54.639,0:45:57.949
Left Y는 값이 10에서 시작하고요

0:45:57.949,0:46:02.688
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

0:46:02.688,0:46:06.768
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

0:46:06.768,0:46:10.068
그럼 다음 사각형은 아래쪽에 그려지는 거죠

0:46:10.068,0:46:12.480
그럼 다음 사각형은 아래쪽에 그려지는 거죠

0:46:12.480,0:46:15.509
이걸 똑같이 오른쪽에도 해줍니다

0:46:15.509,0:46:19.318
일단 색을 채운 사각형을 생성한 다음에요

0:46:19.318,0:46:23.058
분리된 right Y좌표가 있고요

0:46:23.059,0:46:23.949
계속해서 이 밑으로 그려집니다

0:46:23.949,0:46:26.179
오른쪽 캔버스의 경우에는요

0:46:26.179,0:46:27.898
이 차이죠

0:46:27.898,0:46:30.298
그러므로 프로그램을 실행하면

0:46:30.298,0:46:31.809
텍스트가 있고요

0:46:31.809,0:46:34.399
다시 great 라고 쓰고

0:46:34.398,0:46:35.868
엔터를 누르면

0:46:35.869,0:46:39.930
이벤트가 발생합니다[br]스크린에 println해서 출력을 해주고

0:46:39.929,0:46:43.208
여기 이벤트를 생성하고요

0:46:43.208,0:46:46.948
근원지는 텍스트 필드였고 화면에 텍스트를 출력합니다

0:46:46.949,0:46:50.068
버튼 중 하나를 클릭하면

0:46:50.068,0:46:53.418
예를 들어 Draw left를요[br]그럼 사각형을 그려주고요 leftY좌표에서 시작하고요

0:46:53.418,0:46:55.798
다음 번에 Draw left를 계속 누르면

0:46:55.798,0:47:00.759
아래쪽으로 아래쪽으로 계속해서 똑같이 사각형을 그려줍니다.

0:47:00.759,0:47:03.318
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

0:47:03.318,0:47:08.018
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

0:47:08.018,0:47:10.908
그런데도 서로 다른 장소에 그림이 그려지는 이유는

0:47:10.909,0:47:14.639
여기에 보이지 않는 경계선이 있기 때문입니다

0:47:14.639,0:47:17.298
이렇게 해서

0:47:17.298,0:47:22.268
텍스트, 그래픽, 상호작용자를 모두 포함한 프로그램을 만들어 보았습니다. [br]질문 있나요?

0:47:22.268,0:47:23.688
좋아요, 그럼 수요일날 봅시다