brunch

매거진 Framer 초보탈출기

라이킷 10 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유나 Feb 20. 2017

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를 다시 불러보자.