4.3 인스타그램 만들기 - 배열(Array)
지난 포스팅에서 인스타그램 메인 타임라인의 레이아웃을 변수와 for문을 활용하여 만들었다. (기억이 안 난다면 '4.2 인스타그램 만들기- 레이아웃(Layout) 1'를 다시 보자.) 이제 프로필 영역을 클릭하면 해당 유저의 인스타그램 메인 화면으로 넘어가는 플로우를 작업해야 하는데 이를 위해서는 또 하나 더 알아야 할 것이 바로 '배열'이다. 이번에는 이에 대해서 정리를 먼저 하고 이어서 인스타그램 만들기를 완성해보고자 한다.
배열의 정의
오랜만에 다시 소환해서 보는 기발자님의 '그림으로 배우는 자바스크립트'의 '#7. Array(배열)'편을 참고하면 배열이란 기차와 같다고 표현하고 있다. 무슨 의미인지 알아보기 위해 고전적이지만 '배열'의 사전적 의미를 먼저 살펴보자.
배열 (配列/排列)
[명사]
1. 일정한 차례나 간격에 따라 벌여 놓음.
2. <컴퓨터> 동일한 성격의 데이터를 관리하기 쉽도록 하나로 묶는 일.
[유의어] 열거, 정렬, 진열
1번의 의미와 2번의 의미를 같이 이해하는 것이 좋겠다. 배열은 사전적 의미에서도 볼 수 있듯이 어떠한 데이터를 일정한 순서대로 나열해 놓고 그것을 하나의 묶음으로 만드는 것이다. 기발자님이 정리하신 기차의 의미를 해석해보자면 기차를 이루는 칸이 하나의 데이터이고 그 데이터들은 1번 칸, 2번 칸, 3번 칸... 식의 순서를 가지고 있다. 그리고 이 칸들이 모여서 기차를 이룬다. 치환하여 얘기하자면 여러 데이터가 1번, 2번, 3번... 식의 순서를 가지고 모여있는 것이 배열이라는 얘기다.
이 기차표 예시 이미지를 보자면 나는 KTX 2015(배열)에는 여러 좌석(데이터)가 있고 이 표는 3호차 6A 좌석(데이터)을 불러왔다고 생각할 수 있다.순서를 가지는 배열
배열의 가장 큰 특징은 여러 데이터를 가지고 있되 데이터마다의 순서를 가지고 있다는 점이다. 그래서 배열 전체를 불러올 수도 있지만 배열에 묶인 데이터 중에서 내가 3번 데이터만 쓰고 싶으면 3번만 불러와서 사용할 수 있다. 또 배열 안의 배열로도 활용이 가능하다.(근데 이렇게는 아직 안 써봤다.)
한두 개의 데이터일 때는 괜찮지만 수십, 수백, 수만 개로 늘어나는 데이터를 일일이 변수로 지정해줄 수 없기 때문에 이러한 데이터들을 배열로 묶어 관리하게 되면 데이터를 찾기도 쉽고 가독성이 좋아지는 장점이 있다.
배열 만들기
framer에서 배열을 만드는 방법은 간단하게 '배열 이름 = [데이터 1, 데이터 2, 데이터 3,...]'로 선언해주면 된다. (그리고 for문에서도 배열을 볼 수 있는데 바로 'for i in [0...10]' 여기서 뒤에 붙은 [0...10]이 바로 배열이다.)
layerA = new Layer
size: Screen.size
arrayA = [] #빈 배열 1
arrayB = new Array #빈 배열 2
arrayC = ["딸기", "바나나", "키위", "포도"] #문자열을 이용한 배열
arrayD = [arrayC, layerA, "망고", 422] #다른 배열, 변수, 문자열, 숫자를 이용한 배열
빈 배열을 먼저 만든 후 데이터를 생성해 밀어 넣기를 할 수도 있다. 빈 배열에 데이터를 밀어 넣을 때는 '배열명.push(데이터명)'을 삽입하면 된다. 이어질 인스타그램 완성하는 과정에서는 이 방법을 주로 사용하게 된다.
arrayE = [] #빈 배열 만들기
rows = 5
gutter = 10
sizenum = 60
for index in [0...rows]
profList = new Layer
size: sizenum
y: index * (sizenum + gutter)
x: Align.center
backgroundColor: Utils.randomColor(0.5)
arrayE.push(profList) #비어있던 arrayE 배열에 profList를 밀어 넣어줬다.
특정 배열 불러오기
위에서 잠깐 언급했듯이 배열은 품고 있는 데이터에 순서를 부여하기 때문에 특정 순서의 데이터를 불러올 수 있다. 배열을 만들고 데이터를 삽입한 후, 배열명[순번]을 사용하면 된다. 위의 예시 코드에서 이어서 특정 배열 불러오기를 해보자.
arrayE = []
rows = 5
gutter = 10
sizenum = 60
for index in [0...rows]
profList = new Layer
size: sizenum
y: index * (sizenum + gutter)
x: Align.center
backgroundColor: Utils.randomColor(0.5)
arrayE.push(profList)
arrayE[3].backgroundColor = "#000000" #마지막에 4번째 레이어의 배경색을 바꾸는 코드를 삽입했다. (배열은 0부터 시작하므로 [3]이면 0, 1, 2, 3 / 4번째가 된다.)
마지막 코드 삽입 전(좌)과 후(우)왼쪽은 마지막 코드를 삽입하기 전의 모습이고 오른쪽은 마지막 코드를 삽입했을 때의 모습이다. 이렇게 배열을 활용하면 배열에서 특정 데이터를 불러와 수정이 가능하다.
이 배열이란 녀석이 생각보다 자주 쓰이게 되므로 배열이 가지는 속성에 대해 잘 기억해두면 후에 도움이 많이 된다. 배열에 대한 기초적인 부분이 이쯤에서 마무리하고 다음 편에서 장장 6개월 넘게(미치겠다ㅋ) 질질 끌어왔던 인스타그램 만들기를 드디어! 마무리지어보도록 하겠다.
facebook : https://www.facebook.com/fish0422
blog : http://blog.naver.com/fish0422
site : http://fish-soul.com
