WEBVTT

00:00:08.060 --> 00:00:10.829
...

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

00:00:14.099 --> 00:00:21.099
제공됩니다.

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

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

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

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

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

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

00:00:46.509 --> 00:00:50.329
public void고요

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

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

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

00:01:00.469 --> 00:01:02.609
액션 리스너를 add해 줌으로써요

00:01:02.609 --> 00:01:07.510
그래서 버튼을 클릭하면

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

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

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

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

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

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

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

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

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

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

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

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

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

00:01:47.560 --> 00:01:51.219
기억하고 있길 바래요 
지난 시간 수업을 잠시 돌아봤고요

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

00:01:55.140 --> 00:01:58.250
가장 중요한 것은

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

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

00:02:03.430 --> 00:02:05.500
이렇게 하는 거죠

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

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

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

00:02:16.599 --> 00:02:19.009
자 여기서 e.cmd = e.getActionCommand를 써주세요

00:02:19.009 --> 00:02:22.479
자 여기서 e.cmd = e.getActionCommand를 써주세요

00:02:22.479 --> 00:02:26.158
. getActionCommand가 하는 일은 바로

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

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

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

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

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

00:02:40.909 --> 00:02:42.549
버튼의 이름을 확인 할 수 있습니다

00:02:42.549 --> 00:02:46.248
사실 이 액션 코맨드cmd보다는

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

00:02:47.650 --> 00:02:51.140
이걸 지난 수업 때 간단히 봤었는데요
우리가 했던 프로그램에서요

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

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

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

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

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

00:03:06.989 --> 00:03:08.769
여기선 잠시 세미콜론을 뺄게요

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

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

00:03:17.580 --> 00:03:19.809
즉, 버튼을 클릭했다면

00:03:19.808 --> 00:03:23.408
e.getActionCommand는 버튼의 이름을 리턴해주고

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

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

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

00:03:31.679 --> 00:03:34.818
이것은 어떤 의미를 가질까요

00:03:34.818 --> 00:03:38.149
여기서 이것은 여러분이 초기화를 설정 할 때

00:03:38.150 --> 00:03:40.669
여기서 이것은 여러분이 초기화를 설정 할 때

00:03:40.669 --> 00:03:43.110
new JButton을 해줍니다

00:03:43.110 --> 00:03:44.540
new JButton을 해줍니다

00:03:44.539 --> 00:03:46.179
new JButton을 해줍니다

00:03:46.179 --> 00:03:50.729
이걸 hi라고 할게요. 알겠죠

00:03:50.729 --> 00:03:55.489
그리고 hi = new JButton을 해주고요

00:03:55.489 --> 00:03:58.079
hi를 인스턴스 변수로 만든거죠

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

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

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

00:04:10.479 --> 00:04:14.280
그리고 초기화 메소드에서

00:04:14.280 --> 00:04:17.718
이 버튼에 라벨 hi를 붙여 생성합니다

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

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

00:04:25.089 --> 00:04:28.729
여기에 add하는 게 일반적이라서요

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

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

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

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

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

00:04:38.199 --> 00:04:40.180
이제 버튼이 클릭 되면

00:04:40.180 --> 00:04:41.310
이 버튼의 cmd로

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

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

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

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

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

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

00:05:01.379 --> 00:05:04.639
이게 이걸 쓰는 한 가지 방법이고요

00:05:04.639 --> 00:05:07.519
고전적이 방법이기도 하죠

00:05:07.519 --> 00:05:09.108
지난 시간에 본 겁니다

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

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

00:05:16.879 --> 00:05:20.960
e.getSource를 호출하는 방법입니다

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

00:05:24.360 --> 00:05:27.908
지우지는 않고 코멘트 처리 하겠습니다

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

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

00:05:33.509 --> 00:05:37.099
그럼 저는 이 리턴되는 오브젝트가

00:05:37.100 --> 00:05:38.509
제 hi 버튼이 맞는 지 확인할 겁니다

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

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

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

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

00:05:52.329 --> 00:05:56.280
이 두 가지 방식의 차이는

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

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

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

00:06:02.810 --> 00:06:06.459
이제 이게 무엇인지 깊이 생각해봅시다

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

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

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

00:06:15.918 --> 00:06:20.109
이것을 인스턴스 변수로서 사용할 일은

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

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

00:06:27.560 --> 00:06:31.399
예제를 하나 보여드리겠습니다
코드로 좀 더 구체적으로 알아봅시다

00:06:31.399 --> 00:06:33.459
자, 코드를 보세요

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

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

00:06:40.189 --> 00:06:43.339
버튼 이름을 hi라고 했고요

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

00:06:46.910 --> 00:06:48.019
액션 리스너를 add하였습니다

00:06:48.019 --> 00:06:50.280
버튼이 클릭되면

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

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

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

00:06:57.978 --> 00:07:02.639
클릭된 게 hi버튼이라면

00:07:02.639 --> 00:07:04.680
화면에 hello가 출력될 겁니다

00:07:04.680 --> 00:07:07.399
계속해서 이 프로그램을 실행해보죠

00:07:07.399 --> 00:07:09.709
계속해서 이 프로그램을 실행해보죠

00:07:09.709 --> 00:07:13.288
hi를 클릭하면 전에 봤던 게 나옵니다

00:07:13.288 --> 00:07:14.318
hi를 클릭할 때마다 hello가 화면에 뜨죠

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

00:07:17.288 --> 00:07:19.769
지난 시간에 봤었던 것처럼요

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

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

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

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

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

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

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

00:07:39.329 --> 00:07:42.060
cmd는 버튼의 이름일 것이고요

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

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

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

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

00:07:53.918 --> 00:07:56.589
이게 바로 거래입니다

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

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

00:08:00.819 --> 00:08:02.959
이런 케이스에는 인스턴스 변수가 필요하고

00:08:02.959 --> 00:08:05.508
이런 케이스에는 인스턴스 변수가 필요하고

00:08:05.509 --> 00:08:09.959
아 잘못된 줄이네요

00:08:11.369 --> 00:08:13.810
인스턴스 변수가 있어야 하는 경우는

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

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

00:08:17.778 --> 00:08:21.569
자 이렇게 버튼을 생성했고요

00:08:21.569 --> 00:08:23.650
이걸 어딘가에 저장(store)했고요

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

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

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

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

00:08:34.039 --> 00:08:37.019
두 번 째 경우처럼 되는 것이죠

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

00:08:41.149 --> 00:08:48.149
여기에 대해 질문?

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

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

00:09:00.220 --> 00:09:01.879
난 모른다 이런 식이죠

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

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

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

00:09:10.970 --> 00:09:17.970
또 다른 질문 있나요? 네?

00:09:19.129 --> 00:09:21.708
그런 식의 접근도 이 케이스와 비슷합니다
실제 버튼을 얻는 거죠

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

00:10:13.379 --> 00:10:15.620
자 이제 다음으로 할 것은요

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

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

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

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

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

00:10:30.269 --> 00:10:31.779
그러므로 이제 이 예제를 함께 봅시다

00:10:31.779 --> 00:10:35.759
그러므로 이제 이 예제를 함께 봅시다

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

00:10:39.740 --> 00:10:43.019
내 이름이 Mehran이잖아요

00:10:43.019 --> 00:10:44.949
그럼 hello, Mehran 이렇게 나오고

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

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

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

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

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

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

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

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

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

00:11:09.940 --> 00:11:12.500
자 이걸 어떻게 만들까요?

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

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

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

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

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

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

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

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

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

00:11:41.669 --> 00:11:46.319
만약 거기에 라벨을 add하고 싶다면

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

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

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

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

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

00:11:59.590 --> 00:12:03.649
이걸 또 어떻게 설정할까요?

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

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

00:12:12.580 --> 00:12:13.370
이것을 JTextField라 합니다

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

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

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

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

00:12:26.039 --> 00:12:27.469
여러분은 라벨을 주는 것이 아닙니다

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

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

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

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

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

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

00:12:50.350 --> 00:12:52.889
모를까 봐 알려드려요

00:12:52.889 --> 00:12:57.259
모를까 봐 알려드려요

00:12:57.259 --> 00:12:57.779
모를까 봐 알려드려요

00:12:57.779 --> 00:13:00.360
사용자가 엔터를 칠 때 말입니다

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

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

00:13:04.620 --> 00:13:08.289
actionPerformed를 호출하지 않을 겁니다

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

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

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

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

00:13:20.749 --> 00:13:22.778
일단 textfield.addActionLestener를 해주고요

00:13:22.778 --> 00:13:24.889
textfield.addActionLestener

00:13:24.889 --> 00:13:29.049
textfield.addActionLestener

00:13:29.049 --> 00:13:31.689
알겠죠?

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

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

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

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

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

00:13:42.840 --> 00:13:46.649
그래서 이걸 넘긴 거에요

00:13:46.649 --> 00:13:48.899
그래서 이걸 넘긴 거에요

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

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

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

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

00:13:57.958 --> 00:14:01.709
한 번만 해주면 됩니다.

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

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

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

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

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

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

00:14:18.769 --> 00:14:22.649
add TF를 서쪽 영역에 해줍시다

00:14:22.649 --> 00:14:25.220
지금까지 그랬던 것처럼요

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

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

00:14:34.669 --> 00:14:37.279
자 이렇게 설정되었을 때

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

00:14:39.980 --> 00:14:43.700
여러 개의 텍스트 필드가 있고

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

00:14:47.029 --> 00:14:50.839
e.getSource를 해주면 되죠

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

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

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

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

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

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

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

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

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

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

00:15:27.200 --> 00:15:30.440
프로그램에서 봤던 것과 같습니다

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

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

00:15:34.419 --> 00:15:37.860
하지만 경고음 사라져야 합니다

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

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

00:15:47.389 --> 00:15:50.960
그러므로 현재는 방도가 없어요

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

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

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

00:16:04.110 --> 00:16:07.629
내가 l바를 선언한 곳이죠

00:16:07.629 --> 00:16:08.139
클래스 아래쪽 어딘가 입니다

00:16:08.139 --> 00:16:11.990
여기다 private JTextField TF를 해줍니다

00:16:11.990 --> 00:16:12.830
private JTextField TF

00:16:12.830 --> 00:16:14.070
private JTextField TF

00:16:14.070 --> 00:16:15.280
private JTextField TF

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

00:16:19.059 --> 00:16:22.888
이렇게 인스턴스 변수를 선언했습니다

00:16:22.889 --> 00:16:25.649
이렇게 인스턴스 변수를 선언했습니다

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

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

00:16:28.750 --> 00:16:35.320
그럼 코드를 좀 보여드릴게요

00:16:35.320 --> 00:16:38.800
자 이게 텍스트 필드 예제입니다

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

00:16:41.639 --> 00:16:43.730
아직 콘솔로 하고 있잖아요

00:16:43.730 --> 00:16:48.149
init메소드에서 name field를 만들게요

00:16:48.149 --> 00:16:51.669
nameField가 뭐냐고요? private JTextField입니다.

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

00:16:55.279 --> 00:16:57.759
저기서 썼던 거랑 똑같을 코드죠

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

00:17:01.250 --> 00:17:05.959
박스에 라벨을 붙이려고 합니다

00:17:05.959 --> 00:17:10.548
일단 박스를 컨트롤 바에 붙이고

00:17:10.548 --> 00:17:13.480
name이라는 new JLabel을 add해 줄 겁니다

00:17:13.480 --> 00:17:16.730
name이라는 new JLabel을 add해 줄 겁니다

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

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

00:17:19.880 --> 00:17:23.160
자 첫째로 이건 그냥 name이라고 써질 거고

00:17:23.160 --> 00:17:27.600
그리고 아까의 nameField를 add할게요

00:17:27.599 --> 00:17:30.389
즉 name텍스트 옆에 박스를 생성하는 거죠

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

00:17:32.279 --> 00:17:35.160
액션리스너를 add해 주고 해서

00:17:35.160 --> 00:17:36.820
당신이 무엇인가

00:17:36.819 --> 00:17:38.259
상호작용을 하면

00:17:38.259 --> 00:17:41.799
그것을 알 수 있게 하는 겁니다

00:17:43.808 --> 00:17:46.609
. 이것은 즉 이제 actionPerformed가 호출되고

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

00:17:50.210 --> 00:17:51.528
가능해진다는 이야기입니다

00:17:51.528 --> 00:17:55.109
actionPerformed에서 e.getSource를 해주고요
이걸 nameField와 비교할 수 있습니다

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

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

00:18:03.750 --> 00:18:06.109
텍스트 크기를 좀 더 키워볼게요

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

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

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

00:18:14.640 --> 00:18:17.090
좋아요 더 크게

00:18:22.390 --> 00:18:24.740
자 다시 한 번

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

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

00:18:32.920 --> 00:18:36.860
그리고 이건 또 다른 거. 재밌죠

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

00:18:39.159 --> 00:18:43.539
2분정도 하기에 딱 좋아요

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

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

00:18:49.740 --> 00:18:52.259
텍스트 박스에 대해 질문?

00:18:52.259 --> 00:18:56.500
네, 뒤에 학생

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

00:19:03.319 --> 00:19:06.878
왼쪽에서 오른 쪽으로 쭉 확장됩니다

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

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

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

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

00:19:19.990 --> 00:19:23.490
또 다른 재미있는 게 있습니다

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

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

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

00:19:31.579 --> 00:19:35.399
이름을 줘서 그 이름으로 참조해 봅시다

00:19:35.400 --> 00:19:38.798
괜찮죠? 이름을 만들 수 있어요

00:19:38.798 --> 00:19:42.490
여기 완전히 똑같은 예제가 있습니다
약간의 차이가 있지만

00:19:42.490 --> 00:19:43.160
조금 달라요

00:19:43.160 --> 00:19:47.538
전과 동일한 코드입니다

00:19:47.538 --> 00:19:50.230
내가 namefield를 생성했다는 걸 빼면요

00:19:50.230 --> 00:19:53.400
여기에 액션 코맨드를 주는데요

00:19:53.400 --> 00:19:57.540
그 액션 코맨드는 name일 것입니다

00:19:57.539 --> 00:20:02.000
그리고 이런 이벤트를 생성할 때마다 그

00:20:02.000 --> 00:20:04.619
이벤트의 근원이 얘인지 확인합니다

00:20:04.619 --> 00:20:06.109
혹은, 이름을 주고

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

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

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

00:20:15.650 --> 00:20:20.560
이게 name과 equal하나 봅니다
즉 내가 주었던 이름과요

00:20:20.559 --> 00:20:23.289
버튼에서 했던 걸 돌아볼 수 있어요

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

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

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

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

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

00:20:35.229 --> 00:20:38.528
하지만 이름으로도 참조할 수 있고요

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

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

00:20:45.528 --> 00:20:47.440
화면상에 뭔가 텍스트가 뜨길 바란다면

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

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

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

00:21:01.109 --> 00:21:04.079
이게 최대치입니다

00:21:04.079 --> 00:21:09.369
이게 최대치입니다

00:21:09.369 --> 00:21:12.619
네, namefield는 l바에 있어요

00:21:12.619 --> 00:21:17.489
더 이상 참조하지 않으니까 필요 없어요

00:21:17.490 --> 00:21:21.359
이걸 복사해서 붙여 넣기 해볼 게요

00:21:21.359 --> 00:21:23.389
이걸 복사해서 붙여 넣기 해볼 게요

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

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

00:21:36.690 --> 00:21:40.360
이 텍스트를 얻기 위해

00:21:40.359 --> 00:21:41.098
이걸 참조할 필요가 있죠

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

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

00:21:45.160 --> 00:21:49.060
이게 훨씬 깔끔한 방법이거든요

00:21:49.059 --> 00:21:49.940
이걸 없애 버리죠

00:21:49.940 --> 00:21:52.100
이걸 없애 버리죠

00:21:53.329 --> 00:22:00.329
JTextField에 대해 또 다른 질문?

00:22:01.950 --> 00:22:03.980
어.. 네

00:22:03.980 --> 00:22:05.048
네, 할 수 있어요

00:22:05.048 --> 00:22:09.730
20분 뒤에 보여드릴게요

00:22:09.730 --> 00:22:12.909
세 자리 옆으로 날라갔네요..
이걸 하기 전에 앞서

00:22:12.909 --> 00:22:15.120
지금까지와는 다른 걸 배워봅시다

00:22:15.119 --> 00:22:18.459
지금까지는 상호작용자들이

00:22:18.460 --> 00:22:19.909
스크린 아래쪽에서

00:22:19.909 --> 00:22:22.519
가운데 정렬되어 나와잖아요

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

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

00:22:30.450 --> 00:22:34.970
이상하게도 레이아웃layout입니다

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

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

00:22:42.618 --> 00:22:45.089
혹은 그래픽 프로그램을

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

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

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

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

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

00:23:01.720 --> 00:23:02.759
그래서 보더레이아웃이라 부르는 거죠

00:23:02.759 --> 00:23:04.150
이 보더 레이아웃에서는

00:23:04.150 --> 00:23:07.370
이 보더 레이아웃에서는

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

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

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

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

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

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

00:23:30.380 --> 00:23:32.440
초기에 오로지 그래픽을 위한

00:23:32.440 --> 00:23:36.039
그래픽프로그램을 만들 때 여러분은

00:23:36.039 --> 00:23:36.980
서쪽 영역을 보지 못했습니다

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

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

00:23:43.859 --> 00:23:47.099
이러한 것을 컨트롤바라고 부른다고 했었죠
지난 시간에 봤잖아요

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

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

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

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

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

00:24:06.298 --> 00:24:10.219
예를 들어 2행3열로요

00:24:10.219 --> 00:24:14.130
그럼 이러한 레이아웃이 나옵니다
이것은 2행 3열을 그리드grid입니다

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

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

00:24:17.798 --> 00:24:19.690
어쨌든 Conceptually개념적으론 이렇습니다

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

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

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

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

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

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

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

00:24:42.028 --> 00:24:45.878
자동으로 아래 행으로 내려갑니다
순차적으로 채워집니다

00:24:45.878 --> 00:24:46.980
순차적으로 채워집니다

00:24:46.980 --> 00:24:49.659
그리드에 차근차근요

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

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

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

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

00:25:05.648 --> 00:25:08.309
저는 원래 있던 레이아웃을

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

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

00:25:16.420 --> 00:25:19.870
즉 2행 3열의 그리드로요

00:25:19.869 --> 00:25:20.399
이 프로그램에서 흥미로운 점은 
이 그리드 레이아웃 예제를 보시면요

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

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

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

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

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

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

00:25:54.950 --> 00:25:56.600
제가 이걸 만든 이유는

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

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

00:26:07.970 --> 00:26:09.110
좋습니다

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

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

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

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

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

00:26:29.400 --> 00:26:34.050
이게 도대체 뭐지 하는 생각이 들 겁니다

00:26:34.049 --> 00:26:37.460
이게 도대체 뭐지 하는 생각이 들 겁니다

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

00:26:39.659 --> 00:26:42.000
이 이유에 대해선 지금 이야기 하지 않겠어요

00:26:42.000 --> 00:26:43.288
아마 나중에요

00:26:43.288 --> 00:26:47.528
사운드 이펙트랑 비슷해요

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

00:26:52.720 --> 00:26:53.400
모든 버튼은 작고 귀여워요

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

00:26:57.529 --> 00:26:59.269
레이아웃이 어떻게 나올지 알 수 있죠

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

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

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

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

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

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

00:27:17.390 --> 00:27:18.799
거기 보면 테이블 레이아웃이라는

00:27:18.798 --> 00:27:20.700
또 다른 종류의 레이아웃이 있습니다

00:27:20.700 --> 00:27:23.690
또 플로우 레이아웃이라는 것도 있죠
이것은 이야기 하지 않을 거에요

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

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

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

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

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

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

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

00:27:48.509 --> 00:27:50.158
무슨 뜻이냐고요

00:27:50.159 --> 00:27:53.609
즉 이 부분에 그리드 레이아웃이 아니고

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

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

00:28:00.210 --> 00:28:04.009
import할 게 더 생기네요

00:28:04.009 --> 00:28:06.009
이걸 import해줄게요

00:28:06.009 --> 00:28:11.869
이걸 import해줄게요

00:28:30.789 --> 00:28:33.799
자 나와라 테이블 레이아웃

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

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

00:28:50.039 --> 00:28:50.730
가끔은 코드가 이렇게 추해질 때가 있어요

00:28:50.730 --> 00:28:54.420
가끔은 코드가 이렇게 추해질 때가 있어요

00:28:54.420 --> 00:28:57.019
어쩔 수 없어요

00:28:57.019 --> 00:28:57.950
테이블 레이아웃?

00:28:57.950 --> 00:29:00.069
나왔네요.

00:29:00.069 --> 00:29:01.460
여전히 6개 버튼이 있죠

00:29:01.460 --> 00:29:04.659
윈도우도 리사이징 할 수 있고요

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

00:29:07.190 --> 00:29:10.200
영역을 꽉 채우지 않아요

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

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

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

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

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

00:29:26.358 --> 00:29:29.408
이건 온도 전환 프로그램입니다

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

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

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

00:29:39.329 --> 00:29:40.528
또 degree Celsius라는 라벨도 만들어요

00:29:40.528 --> 00:29:44.298
그리고 이 안에 값을 주고요
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

00:29:44.298 --> 00:29:44.680
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

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

00:29:46.240 --> 00:29:50.538
32F는 0C고요

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

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

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

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

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

00:30:07.220 --> 00:30:10.500
다 그리드에 들어 있고요

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

00:30:14.390 --> 00:30:17.360
여기 놓을 첫 번째 요소는 라벨입니다

00:30:17.359 --> 00:30:20.769
그리고 텍스트 필드를 넣습니다

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

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

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

00:30:29.569 --> 00:30:32.838
일반 텍스트 필드와 다를 바 없습니다

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

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

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

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

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

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

00:30:51.690 --> 00:30:53.828
같은 액션을 취하게 하고 싶어요

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

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

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

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

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

00:31:05.859 --> 00:31:08.299
저 전체 레이아웃을 명시하고 싶어요

00:31:08.299 --> 00:31:09.819
그래서 프로그램을 확장하는 겁니다

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

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

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

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

00:31:23.059 --> 00:31:25.849
. 제가 첫째로 add할 것은

00:31:25.849 --> 00:31:28.169
바로 degrees Fahrenheit를 라벨로 넣어주는 것입니다

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

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

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

00:31:35.359 --> 00:31:39.269
바로 인스턴스 변수로써 선언해 준거죠

00:31:39.269 --> 00:31:43.259
그리고 이건 인트필드입니다

00:31:43.259 --> 00:31:44.240
J텍스트 필드가 아니고요

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

00:31:47.480 --> 00:31:50.430
그것 빼고는 텍스트 필드랑 똑같고요

00:31:50.430 --> 00:31:54.549
일단 인트필드를 보여주고 싶네요

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

00:31:55.980 --> 00:31:59.049
초기값은 32로 설정해 주겠습니다

00:31:59.049 --> 00:32:01.648
Fahrenheit필드를요

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

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

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

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

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

00:32:14.079 --> 00:32:17.099
이게 이름이 될 거고요 자 이제 이름도 설정했고요

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

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

00:32:21.869 --> 00:32:25.409
그리고 액션 리스너를 add해주죠

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

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

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

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

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

00:32:42.558 --> 00:32:44.500
그런 후 그리드에 놓습니다

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

00:32:47.529 --> 00:32:49.769
아까 이야기했듯이요

00:32:49.769 --> 00:32:52.979
다음 요소는 텍스트 박스고요

00:32:52.979 --> 00:32:54.600
실제로는 숫자로 된 값을 갖는 거고요

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

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

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

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

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

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

00:33:17.460 --> 00:33:21.670
네 이 두 요소는 같은 이름을 가지고요
하지만 두 경우 다 같은 일을 해 주고 싶기 때문에

00:33:21.670 --> 00:33:24.940
별 차이가 없어요

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

00:33:27.588 --> 00:33:29.989
이렇게 변환이 일어나는 코드를 쓰고요

00:33:29.989 --> 00:33:30.900
이렇게 변환이 일어나는 코드를 쓰고요

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

00:33:33.819 --> 00:33:35.619
버튼을 누른 것과 같은 일이 생깁니다

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

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

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

00:33:45.329 --> 00:33:48.490
없어요
또 엔터를 치는 사람은 얼마나 되죠?

00:33:48.490 --> 00:33:51.839
엔터를 치는 게 편하지 않나요?

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

00:33:54.269 --> 00:33:57.480
엔터를 치는 게 더 편할 때가 있기 때문에

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

00:34:01.079 --> 00:34:03.689
그리고 Celcius에도 똑같은 일을 해줍니다

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

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

00:34:13.019 --> 00:34:16.650
그리고 액션리스너를 추가하여

00:34:16.650 --> 00:34:19.139
처리해 줍니다

00:34:19.139 --> 00:34:21.900
버튼을 클릭했을 때 넘어오는

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

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

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

00:34:29.699 --> 00:34:32.708
값을 갖게 되고

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

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

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

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

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

00:34:47.898 --> 00:34:51.478
이제 알겠죠

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

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

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

00:35:00.949 --> 00:35:02.489
화면의 C필드에 값이 업데이트 됩니다

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

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

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

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

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

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

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

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

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

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

00:35:30.829 --> 00:35:32.109
레이블이 있고

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

00:35:36.139 --> 00:35:38.670
그리고 100이란 값을 화씨에 넣어주면

00:35:38.670 --> 00:35:40.380
38 섭씨로 변화해 줍니다

00:35:40.380 --> 00:35:43.260
그리고 212를 화씨에 넣어주고

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

00:35:44.690 --> 00:35:49.389
같습니다

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

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

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

00:35:58.900 --> 00:36:01.740
멋지지 않나요. 작게 하면 작아지진 않아요

00:36:06.989 --> 00:36:11.099
볼 수 없으니까. 질문 있나요?

00:36:11.099 --> 00:36:12.719
마이크를 사용해서 말해줄래요

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

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

00:36:20.659 --> 00:36:24.938
그래서 테이블 레이아웃이 있죠

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

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

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

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

00:36:36.108 --> 00:36:39.469
하지만 네 할 수 있는 방법은 있어습니다

00:36:39.469 --> 00:36:41.400
마지막으로 재밌는 걸 하나 하고 싶네요

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

00:36:46.199 --> 00:36:47.368
다 이용해서요

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

00:36:51.728 --> 00:36:53.879
행맨. 텍스트도 이용했고 그래픽도 이용했죠

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

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

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

00:37:07.188 --> 00:37:09.239
텍스트와 그래픽에요

00:37:09.239 --> 00:37:11.760
자 이제 텍스트와 그래픽으로 할 것은

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

00:37:16.958 --> 00:37:20.878
상호작용자도 만들어야 되요.

00:37:23.449 --> 00:37:26.178
이걸 다 어떻게 할까요

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

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

00:38:07.150 --> 00:38:09.889
두 가지 멋진 맛이 합해지면 더 맛있어져요

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

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

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

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

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

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

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

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

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

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

00:38:48.548 --> 00:38:51.989
흥미로운 것은 중앙 영역입니다

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

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

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

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

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

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

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

00:39:11.489 --> 00:39:12.698
음

00:39:12.699 --> 00:39:14.688
이제 제가 뭘 할거냐고요

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

00:39:19.168 --> 00:39:22.228
레이아웃은 이 중앙에 적용될 것이고요

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

00:39:26.048 --> 00:39:28.509
콘솔 프로그램은 영역을 꽉 채우고요

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

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

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

00:39:41.940 --> 00:39:44.039
첫번째는 콘솔이 될 거고요

00:39:44.039 --> 00:39:45.450
첫번째는 콘솔이 될 거고요

00:39:45.449 --> 00:39:48.539
그리고 제어권이 없을 겁니다 
그게 콘솔 프로그램이 원래 그러니까요

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

00:39:51.769 --> 00:39:55.389
첫 번째 요소는 텍스트입니다

00:39:57.028 --> 00:39:58.760
그럼 여러분은 궁금하겠죠

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

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

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

00:40:08.079 --> 00:40:08.750
G캔버스라는 게 있었잖아요

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

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

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

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

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

00:40:29.599 --> 00:40:30.789
이렇게 생길 거고요

00:40:32.228 --> 00:40:36.018
첫번째 칸은 이미 콘솔이 차지했고요

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

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

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

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

00:40:48.268 --> 00:40:54.078
이게 G캔버스 도스입니다

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

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

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

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

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

00:41:11.409 --> 00:41:18.409
자 이게 그 모습입니다

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

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

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

00:41:30.719 --> 00:41:33.039
기억하세요 그리드 레이아웃

00:41:33.039 --> 00:41:34.949
요소들이 공간을 준 만큼 차지해 버려요

00:41:34.949 --> 00:41:38.919
그게 이번 경우에는 제가 바라는 바고요

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

00:41:42.269 --> 00:41:46.048
그리고 1/3에는 콘솔을 넣을 거고요

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

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

00:41:52.018 --> 00:41:54.139
그럼 캔버스 두 개를 생성해야겠죠

00:41:54.139 --> 00:41:57.818
RightCanvas와 LeftCanvas라고 부를게요

00:41:57.818 --> 00:42:01.478
RightCanvas와 LeftCanvas라고 부를게요

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

00:42:05.688 --> 00:42:08.469
이게 상호작용자죠

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

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

00:42:10.818 --> 00:42:15.918
RightCanvas와 LeftCanvas라고 부를게요

00:42:15.918 --> 00:42:16.998
이제 뭘 할 거냐고요

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

00:42:20.619 --> 00:42:24.419
일단 LeftCanvas에 new Canvas를 해줍니다

00:42:24.418 --> 00:42:27.739
그리고 add를 할 때 myLayout에 해주고요

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

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

00:42:31.739 --> 00:42:33.239
캔버스를 add했잖아요. 두번째 요소로

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

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

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

00:42:42.949 --> 00:42:44.679
이제 콘솔, 캔버스, 캔버스 이런 식이죠

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

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

00:42:53.059 --> 00:42:56.538
그리고 private인 인스턴스 변수로 선언할 거고요

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

00:42:58.278 --> 00:43:02.340
라벨을 add하고요. 라벨은 some text라고 부를게요

00:43:02.340 --> 00:43:04.028
그리고 서쪽영역에 놓고요

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

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

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

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

00:43:19.329 --> 00:43:21.039
그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

00:43:21.039 --> 00:43:24.789
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

00:43:24.789 --> 00:43:25.958
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

00:43:25.958 --> 00:43:27.848
머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

00:43:27.849 --> 00:43:31.450
알고 배우고 실천하고 사랑하세요

00:43:31.449 --> 00:43:34.889
그리고 버튼도 두 개 add할 건데요

00:43:34.889 --> 00:43:37.719
그럼 상호작용자는 텍스트 필드하고 버튼 두 개가 더 있는거죠

00:43:37.719 --> 00:43:40.289
버튼 하나는 왼쪽 캔버스에 그림을 그릴 거고
다른 하나는 오른쪽에 그림을 그리게 만들 거에요

00:43:40.289 --> 00:43:42.129
그럼 나머지를 마저 만들기 전에 이게 어떻게 생겼나 보여드리죠

00:43:42.128 --> 00:43:46.328
텍스트와 그래픽까지 만들었죠

00:43:46.329 --> 00:43:48.479
콘솔을 만들었고

00:43:48.478 --> 00:43:50.179
콘솔을 만들었고

00:43:50.179 --> 00:43:54.768
현재 경계선은 없지만 두 개의 캔버스가 있습니다

00:43:54.768 --> 00:43:58.328
두 개의 다른 캔버스 창이 여기 있어요

00:43:58.329 --> 00:44:00.999
텍스트가 있고요. hi라고 칠 수 있죠

00:44:00.998 --> 00:44:02.728
hi. 재밌죠?

00:44:02.728 --> 00:44:03.989
hi. 재밌죠?

00:44:03.989 --> 00:44:07.489
Draw left는 외족 창에 그림을 그리게

00:44:07.489 --> 00:44:08.440
사각형을 그릴건데 좀 있다 보여드리기로 하고

00:44:08.440 --> 00:44:09.628
사각형을 그릴건데 좀 있다 보여드리기로 하고

00:44:09.628 --> 00:44:12.318
Draw right는 오른쪽 창에 그림을 그릴 수 있게 합니다.

00:44:12.318 --> 00:44:15.889
이걸 어떻게 할까요? 나머지 프로그램을 만들면서 알아봅시다

00:44:15.889 --> 00:44:18.589
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

00:44:18.590 --> 00:44:20.798
일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

00:44:20.798 --> 00:44:24.449
여기서 액션이 일어납니다
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

00:44:24.449 --> 00:44:27.418
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

00:44:27.418 --> 00:44:30.708
하나의 상호작용자를 가지고 상호작용을 하는 것 외에는
이 프로그램에서 할 수 있는 게 없습니다

00:44:30.708 --> 00:44:34.688
일단 텍스트 필드를 체크하고요

00:44:34.688 --> 00:44:38.598
텍스트 필드와의 상호작용이라면

00:44:38.599 --> 00:44:43.019
그럼상호작용은 근원지가 텍스트필드 였다면 텍스트 필드에 뭔가를 친 건 이제 콘솔에 나타날 겁니다

00:44:43.018 --> 00:44:46.649
. println을 하면 항상 콘솔에 나타나게 되어있으니까요

00:44:46.650 --> 00:44:49.568
여기선 아직 별 재미가 없죠

00:44:49.568 --> 00:44:52.670
양자택일적으로 텍스트필드에 타이핑을 하지 않았다면

00:44:52.670 --> 00:44:56.389
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

00:44:56.389 --> 00:44:59.509
버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

00:44:59.509 --> 00:45:02.849
이걸 여러분이 원하는 대로 섞어 사용하면 됩니다

00:45:02.849 --> 00:45:06.028
코맨드(명령)가 뭐였냐 이러면 getActionCommand를 쓰면 되는데

00:45:06.028 --> 00:45:10.349
그 코맨드가 Draw left였다면 이제 색이 채워진 사각형이 새로 생성되겠죠. 보여드리죠

00:45:10.349 --> 00:45:13.519
새로운 사각형을 만듭니다

00:45:14.418 --> 00:45:17.568
간단하죠. 50x20의 크기로요.

00:45:17.568 --> 00:45:20.038
상수여야 해요

00:45:21.199 --> 00:45:22.930
그리고 filled(채움)으로 설정해 주고

00:45:22.929 --> 00:45:26.639
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

00:45:26.639 --> 00:45:27.679
사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

00:45:27.679 --> 00:45:31.518
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

00:45:31.518 --> 00:45:33.778
그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

00:45:33.778 --> 00:45:38.028
그냥 그래픽 프로그램이 아니니까요

00:45:38.028 --> 00:45:42.119
그냥 add하란다고 add해 지지 않아요

00:45:42.119 --> 00:45:47.399
이걸 더해 주려면 어떤 캔버스에 더할지 명확히 해주어야 합니다

00:45:47.398 --> 00:45:51.898
왼쪽 캔버스에 더할 거니까 LetfCanvas 이걸 더해라. 이렇게 하고요

00:45:51.898 --> 00:45:54.638
x좌표 20 y좌표 leftY에 더해줍니다

00:45:54.639 --> 00:45:57.949
Left Y는 값이 10에서 시작하고요

00:45:57.949 --> 00:46:02.688
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

00:46:02.688 --> 00:46:06.768
매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

00:46:06.768 --> 00:46:10.068
그럼 다음 사각형은 아래쪽에 그려지는 거죠

00:46:10.068 --> 00:46:12.480
그럼 다음 사각형은 아래쪽에 그려지는 거죠

00:46:12.480 --> 00:46:15.509
이걸 똑같이 오른쪽에도 해줍니다

00:46:15.509 --> 00:46:19.318
일단 색을 채운 사각형을 생성한 다음에요

00:46:19.318 --> 00:46:23.058
분리된 right Y좌표가 있고요

00:46:23.059 --> 00:46:23.949
계속해서 이 밑으로 그려집니다

00:46:23.949 --> 00:46:26.179
오른쪽 캔버스의 경우에는요

00:46:26.179 --> 00:46:27.898
이 차이죠

00:46:27.898 --> 00:46:30.298
그러므로 프로그램을 실행하면

00:46:30.298 --> 00:46:31.809
텍스트가 있고요

00:46:31.809 --> 00:46:34.399
다시 great 라고 쓰고

00:46:34.398 --> 00:46:35.868
엔터를 누르면

00:46:35.869 --> 00:46:39.930
이벤트가 발생합니다
스크린에 println해서 출력을 해주고

00:46:39.929 --> 00:46:43.208
여기 이벤트를 생성하고요

00:46:43.208 --> 00:46:46.948
근원지는 텍스트 필드였고 화면에 텍스트를 출력합니다

00:46:46.949 --> 00:46:50.068
버튼 중 하나를 클릭하면

00:46:50.068 --> 00:46:53.418
예를 들어 Draw left를요
그럼 사각형을 그려주고요 leftY좌표에서 시작하고요

00:46:53.418 --> 00:46:55.798
다음 번에 Draw left를 계속 누르면

00:46:55.798 --> 00:47:00.759
아래쪽으로 아래쪽으로 계속해서 똑같이 사각형을 그려줍니다.

00:47:00.759 --> 00:47:03.318
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

00:47:03.318 --> 00:47:08.018
두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

00:47:08.018 --> 00:47:10.908
그런데도 서로 다른 장소에 그림이 그려지는 이유는

00:47:10.909 --> 00:47:14.639
여기에 보이지 않는 경계선이 있기 때문입니다

00:47:14.639 --> 00:47:17.298
이렇게 해서

00:47:17.298 --> 00:47:22.268
텍스트, 그래픽, 상호작용자를 모두 포함한 프로그램을 만들어 보았습니다. 
질문 있나요?

00:47:22.268 --> 00:47:23.688
좋아요, 그럼 수요일날 봅시다