WEBVTT

00:00:00.000 --> 00:00:04.483
배열을 생성하고 접근하는 방법에 대해 지금까지 배웠어요

00:00:04.483 --> 00:00:08.515
배열의 좋은 점은 프로그램이 실행되는 동안

00:00:08.515 --> 00:00:12.859
일반적인 변수처럼 동적으로 값을 변경할 수 있다는거에요

00:00:12.859 --> 00:00:15.805
좋아요
무슨 말인지 직접 보여드릴게요

00:00:15.805 --> 00:00:21.172
호퍼(캐릭터)가 풍선을 들고 있어요
귀엽네요

00:00:21.172 --> 00:00:29.397
풍선 두개에 각각 x좌표값을 넣었어요

00:00:29.397 --> 00:00:35.471
그리고나서 루프(반복문)를 통해 배열의 원소들을 모두 읽어요

00:00:35.471 --> 00:00:40.265
xPosision 배열에 두 개의 값을 가지고 있는데 
두 개의 풍선의 위치입니다

00:00:40.265 --> 00:00:47.639
그 후 "x"위치에 30x40에 해당하는 크기의 동그라미(풍선)을 그려요

00:00:47.639 --> 00:00:51.027
좋아요
이제 어떻게 작동하는지 볼거에요

00:00:51.027 --> 00:00:58.245
풍선을 추가하고싶으면 배열에 숫자를 추가하기만 하면 돼요
300을 넣어 볼까요

00:00:58.245 --> 00:01:02.999
아름다워요
호퍼는 풍선을 3개나 갖고 있어 기분좋아하네요

00:01:02.999 --> 00:01:10.785
그런데 풍선을 새로 추가하기 위해 코딩을 할 줄 모르는 
사용자에게 그 방법을 말해주려고 해요

00:01:10.785 --> 00:01:17.801
사용자에게 프로그램을 제공하고 
"원하는 위치에 클릭하면 풍선이 표시됩니다" 라고 말하고싶어요

00:01:17.801 --> 00:01:20.688
굉장히 멋질거같아요

00:01:20.688 --> 00:01:26.250
이제 어떻게 해야하죠?
프로그램이 시간 흐름에 따라 변해야겠죠?

00:01:26.250 --> 00:01:30.278
사용자가 클릭할 때마다 풍선이 나타날거에요

00:01:30.278 --> 00:01:37.637
시간에 따라 변할 수 있게 draw 함수를 사용할게요

00:01:37.637 --> 00:01:43.185
전부 draw 함수 내부로 넣을게요. 좋아요

00:01:43.185 --> 00:01:48.405
먼저 사용자가 마우스를 누르면 즉시 알아야해요

00:01:48.405 --> 00:01:55.339
if (mouseIsPressed) 를 이용해서 가능하지요

00:01:55.339 --> 00:02:01.176
그리고 마우스를 누르면 배열에 숫자를 추가시켜야해요

00:02:01.176 --> 00:02:04.232
항목 두 개를 가지고 다시 해 볼게요

00:02:04.232 --> 00:02:10.464
이제 배열에 숫자 하나를 추가 하려고 합니다
그렇게 하는 한 가지 방법을 보여 드릴게요

00:02:10.464 --> 00:02:18.508
xPositions[2] = mouseX;로 하면 됩니다

00:02:18.508 --> 00:02:21.681
좋습니다
작동하는 것을 보여드릴게요

00:02:21.681 --> 00:02:26.640
클릭하면 풍선이 생겼어요. 짜잔!
어떻게 한거죠?

00:02:26.640 --> 00:02:33.644
배열 xPositions 의 2 위치인데


00:02:33.644 --> 00:02:38.258
배열은 0부터 세니까 세번째 원소라는 것을 알 수 있지요

00:02:38.258 --> 00:02:41.742
그런데 배열의 세번째 위치에 원소가 없어요

00:02:41.742 --> 00:02:45.897
xPositions[2]라는 것을 인식하고 나서 mouseX를 대입해요

00:02:45.897 --> 00:02:51.358
xPositions[2] 위치에 아무것도 없었지만
이제 mouseX가 입력되었어요

00:02:51.358 --> 00:02:54.501
이제 배열은 3개의 항목을 가진 길이를 갖고

00:02:54.501 --> 00:02:59.804
for 루프는 쭈욱 진행해서 세번째 풍선 그리기가 끝나요

00:02:59.804 --> 00:03:04.027
정말 멋져요
좀 더 클릭해서 어떻게 되는지를 보도록 합시다

00:03:04.027 --> 00:03:10.690
클릭할 때마다 세번째 풍선이 그려지는 것을 볼 수 있어요

00:03:10.690 --> 00:03:18.938
그 이유는 계속 2라는 위치에 오버라이딩(겹쳐쓰기) 하기 때문이에요

00:03:18.938 --> 00:03:22.898
매번 mouseX로 값이 겹쳐지게 됩니다

00:03:22.898 --> 00:03:25.957
그래서 풍선은 3개만 가질 수 있어요

00:03:25.957 --> 00:03:34.456
0 위치에서 하나, 1 위치에서 하나, 
계속 변하는 2 위치에서 하나, 맞죠?

00:03:34.456 --> 00:03:40.235
멋져요
하지만 우리는 풍선을 계속 더 많이 만들고 싶은 겁니다

00:03:40.235 --> 00:03:43.524
사용자가 클릭할 때마다 새로운 풍선이 생기도록요

00:03:43.524 --> 00:03:50.852
배열의 인덱스를 계속 증가시킬 필요가 있다는 의미에요

00:03:50.852 --> 00:03:56.106
매번 2 위치에만 저장하는게 아니라 
2, 3, 4, 5, 6, 등의 위치에도 저장하고 싶어요

00:03:56.106 --> 00:04:01.019
newInd = 2; 라는 카운터 변수를 가지고 할 수 있어요

00:04:01.019 --> 00:04:05.523
2 대신에 newInd라고 적고 사용할 거에요

00:04:05.523 --> 00:04:09.760
그리고 난 후 newInd++ 만 해주면 됩니다

00:04:09.760 --> 00:04:16.231
매번 여기에 1을 증가하게 되면 2에서 시작하고 3, 4 가 됩니다

00:04:16.231 --> 00:04:18.473
누를 때마다 더해질 거에요
직접 해보세요

00:04:18.473 --> 00:04:22.009
짜잔! 풍선이 많아졌어요
풍선파티에요 와~

00:04:22.009 --> 00:04:26.347
멋지지요?
하지만 풍선을 많이 만들려고

00:04:26.347 --> 00:04:31.945
배열 인덱스를 많이 만드는 것은 최선의 방법은 아니에요

00:04:31.945 --> 00:04:35.023
더 쉬운 방법이 있어요

00:04:35.023 --> 00:04:42.768
이전에 했던것을 지우고 주석으로 남길게요

00:04:42.768 --> 00:04:50.996
자 그리고 xPositions.push(mouseX);을 해봅시다

00:04:50.996 --> 00:04:56.573
이것의 역할은 xPositions 배열에서 메서드를 호출하는 거에요

00:04:56.573 --> 00:05:05.232
배열에 다음과 같이 명령하네요
"mouseX라는 새로운 값을 배열의 끝에 집어넣어"라고 말입니다

00:05:05.232 --> 00:05:12.467
이제 그 명령이 호출될 때마다, 즉 사용자가 마우스 클릭을 할 때마다
mouseX를 배열의 끝에 집어넣을 것입니다

00:05:12.467 --> 00:05:16.768
배열은 커지고 커지고 더 커질거에요
재시작하고 다시 해보세요

00:05:16.768 --> 00:05:22.684
짜잔, 작동해요!
이전보다 짧은 코드로 작동하네요. 맞죠?

00:05:22.684 --> 00:05:27.630
이렇게 배열에 무엇을 추가하고자 한다면 
대부분 push를 사용해야합니다

00:05:27.630 --> 00:05:31.762
그리고 꽤 깔끔한 편이에요
왜냐하면 이 후에 배열이 더 커지고 커져도 문제 없기 때문이죠

00:05:31.762 --> 00:05:36.017
애니메이션이나 사용자가 일을 할 때 
유용하게 사용될 거에요

00:05:36.017 --> 00:05:41.295
지금까지 90%는 아마 배열을 기존 방식처럼 사용했겠지만

00:05:41.295 --> 00:05:47.021
배열을 이용해서 더 많은 일을 할 수 있어요
질문이 있으면 토론방에서 질문하세요

00:05:47.021 --> 00:05:50.780
그 전에 오늘 배운 기초내용을 숙지하세요