4.1 인스타그램 만들기
- 반복문(for문)
드디어 for문이다. 손발이 고생하는 것과 방대해지는 코드를 줄여줄 해결사 중 하나 되시겠다. for문을 처음 배우고 나서는 무식이 얼마나 손발을 고생시키는지를 실감하며 쾌재를 불렀더랬다.
for문은 '반복문'이라고도 하는데 이름에서 알 수 있듯이 어떤 것의 특정 부분을 원하는 만큼 반복 실행하도록 하는 것이다. 자바스크립트에서의 사용법을 먼저 본 후 커피스크립트에서 어떻게 축약되는지를 보자.
자바스크립트에서의 for문 기본형
var 변수명;
for (초기값; 조건식; 증감식)
{ 실행문 }
초기값이 조건식에 만족하면 실행문과 증감식이 반복 실행되고 조건식을 만족하지 않을 때 종료된다.
아래의 예시를 보면서 설명을 덧붙이겠다.
var x;
for (x = 0; x <10; x++)
{
alert (x);
}
초기값은 x=0, 조건식은 x < 10, 증감식은 x++, 실행할 내용은 alert("하나씩"+x)이다. 풀이를 해보면 초기 x의 값은 0이고 x가 10보다 작을 때까지 x를 1씩 증가시키면서 x의 값이 써진 경고창을 띄우는 일을 반복하라는 얘기다. (0부터 9까지니 총 10번의 경고창이 뜬다.)
커피스크립트에서는 이 내용이 상당히 축약되었다.
for 변수 in [범위(초기값...마지막 값)]
실행할 내용
커피스크립트에서는 초기값, 조건식이 합쳐진 형태를 보인다. 즉, [ ] 안에 있는 내용이 초기값이면서 조건식이 되는 것이다. 그냥 [ ] 안에 변수에 들어갈 값의 범위를 정해놓고 그 범위를 벗어나면 반복을 중단한다고 생각하면 더 쉬울 것 같다. 영어식으로 해석해도 in은... 안에 라는 의미이니 변수 in [범위]라는 말은 '변수가 범위 안에 들면'이라고 해석할 수 있다. 그림으로 보자.
마찬가지로 예를 들어 보면
for x in [0...10]
layerA = new Layer
size : 500
y: 500 * x
x가 0부터 10보다 작은 범위 안에 들 때까지 layerA를 만드는 일을 반복하게 된다. 영어식으로 해석하면 'x가 [0부터 10 이하]라는 범위에 들면 'layerA = new Layer ~' 이 구문이 반복 실행이 되는 것이다.
여기서 중요한 게 범위를 표현하는 점의 수다. ..(점 두 개)가 될 수도 있고 ...(점 세 개)가 될 수도 있는데 이는 분명한 차이를 보인다. ..(점 두 개)는 =을 뜻한다. 즉 [0..10]이면 0 이상, 10 이하를 의미하므로 총 11번이 반복된다. 하지만 ... (점 세 개)는 <을 뜻한다. 즉 [0...10]이면 0 이상 10 미만을 의미하므로 10번이 반복된다. 이 둘을 섞어서 쓰기보다는 한 가지를 정해서 사용하는 게 헷갈리지 않고 좋은데 추천하는 것은 2번째 ...(점 세 개)를 쓰는 것이다. 마지막 숫자와 반복하는 횟수가 같기 때문에 반복 횟수를 계산할 때 도움이 되기 때문이다.
이제는 익숙해졌을 Snippet > Components > Scroll List를 다시 불러보자.
먼저 저번 편에서 소개했던 '변수' 설정에 대한 코드가 먼저 나오고 scroll이라는 이름으로 새로운 scroll component를 만들어줬다. 그리고 그다음에 for문이 시작된다. 하나하나 뜯어보자.
rows = 16
gutter = 10
rowHeight = 200
#여기까지는 변수를 선언해준 내용이다.
scroll = new ScrollComponent #scroll이라는 이름으로 새로운 scroll component를 만들었다.
size: Screen.size #크기를 스크린 크기에 맞췄다.
scrollHorizontal: false #세로 스크롤을 해야 하므로 가로 스크롤이 되지 않도록 했다. scrollVertical: false로 하면 세로 스크롤이 안된다.
변수가 함께 사용되어 복잡해 보일 수 있으니 이를 모두 숫자로 치환하고 살펴보자.
for index in [0...16] #index라는 변수에 0 이상 16 이하의 숫자들을 반복해서 대입한다.
cell = new Layer #cell이라는 이름으로 새로운 레이어를 만들어준다.
width: Screen.width #cell레이어의 가로사이즈를 스크린의 가로사이즈에 맞췄다.
height: 200 #높이값은 rowHeight의 값인 200이 들어간다.
y: index * (200 + 10) #for문이 반복될 때마다 index는 0, 1, 2...16값이 들어가게 된다. 그러면 프리뷰에서 보는 것과 같이 서로 다른 y값에 cell 레이어들이 생성된다. 이는 아래에 그림에서 살펴보도록 하겠다.
parent: scroll.content #부모 레이어로 위에 만들어놓은 scroll component 레이어를 지정하여 스크롤이 되도록 한다.
backgroundColor: "#00AAFF"
hueRotate: index * 10 #이 역시 y값 설정과 같은 원리로 for문이 반복될 때마다 index에는 0, 1, 2...16 값이 들어간다.
for문의 변수에 따른 변화for문 역시 마찬가지로 반복할 요소를 for문에 귀속시켜줘야 한다. 그건 역시나 tab을 활용하여 for문보다 안쪽으로 넣어주면 된다.
오늘 정리한 'for문'과 '변수'를 활용하여 다음에는 인스타그램의 레이아웃을 만들어보도록 하자.
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
