Framer Advanced 3.
함수
Framer와 CoffeeScript를 통해 코딩의 기초를 전하고자 했던 글이 이제 마지막 포스팅만을 남겨놓고 있습니다.
마지막으로 이야기할 내용은 “함수” 입니다.
함수
프로토타이핑을 하다 보면 레이어를 만들 때 뿐만 아니라, 애니메이션을 만들거나 혹은 다른 기능들을 만들 때에도 같은 내용을 여러번 반복하는 경우가 발생합니다. 레이어는 반복문으로 해결할 수 있지만, 기능들은 어떻게 해야 할까요?
이렇게 자주 사용하게 되는 내용들을 함수로 만들어두면, 같은 내용을 다시 적지 않아도 필요할 때 언제든지 호출할 수 있어서 매우 편리합니다. 함수는 기본적으로 이렇게 작성할 수 있습니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”#함수 정의하기
move = ->
layerA.animate
properties:
x: 300#함수 실행하기
move()
앞에서 정의한 함수는 레이어A를 X: 300 으로 이동시키는 애니메이션을 포함하고 있습니다. 따라서 코드를 실행해보면 이전에 states.switch나 animate를 통해 구현했던 것과 똑같은 결과가 나오게 됩니다.
매개변수 Parameter
하지만 위의 함수에는 “매개변수(parameter)”가 생략되어 있습니다. 매개변수는 이전 포스팅에서 이야기한 “변수”처럼, 괄호 안에 어떤 값을 넣느냐에 따라 다양한 조건으로 함수를 실행할 수 있도록 해주는 것입니다.
설명이 조금 어렵게 느껴질 수 있지만, 다음 예시를 보면 쉽게 이해할 수 있습니다.
#매개변수 추가
공부 = (과목) ->
print “나는 과목이 제일 쉬었어요.”#매개변수에 값을 대입하여 함수 실행
공부(수학)
결과 : 나는 수학이 제일 쉬웠어요.공부(과학)
결과 : 나는 과학이 제일 쉬웠어요.
위의 함수에서는 “과목” 이라는 매개변수에 어떤 값을 대입하는지에 따라 다른 문장이 출력됩니다. 이 매개변수를 잘 활용하면 앞에서 만들었던 애니메이션 함수도 더욱 유용하게 만들 수 있습니다.
move = (layer) ->
layer.animate
properties:
x: 300#매개변수로 (layer)를 추가하고, 해당 매개변수 이름을 사용한 코드를 추가 (layer.animate)
이제 매개변수 (layer)를 추가한 함수를 사용하면, 기존 레이어 뿐만 아니라 앞으로 만들 새로운 레이어에도 코드의 반복없이 똑같은 움직임을 줄 수 있습니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”layerB = new Layer
x: 0, y: 400
width: 300, height: 300
backgroundColor: “yellow”move = (layer) ->
layer.animate
properties:
x: 300#매개 변수에 레이어B 대입하여 함수 실행
move(layerB)
하나 이상의 매개변수
매개변수는 하나 이상 추가할 수도 있습니다. 이렇게 하면 함수는 조금 더 복잡한 기능을 수행할 수 있게 됩니다.
#매개변수 추가
공부 = (과목, 방법) ->
print “나는 과목이 방법하기 제일 쉬었어요.”#매개변수에 각각 값을 대입하여 함수 실행
공부(수학, 포기)
결과 : 나는 수학이 포기하기 제일 쉬웠어요.
위에서 정의한 함수에 매개변수를 하나 더 추가해 보도록 하겠습니다.
layerA = new Layer
x: 0, y: 0
width: 300, height: 300
backgroundColor: “blue”layerB = new Layer
x: 0, y: 400
width: 300, height: 300
backgroundColor: “yellow”move = (layer, position) ->
layer.animate
properties:
x: positionmove(layerB, 600)#매개변수에 (layer, position) 추가
#animate 속성에서 x값에 매개변수 position 적용
이제 원하는 레이어를 원하는 x값만큼 이동시킬 수 있는 더욱 강력한 함수가 완성되었습니다 !!
마무리
함수를 마지막으로 여기까지가 Framer와 CoffeeScript의 기본적인 골격이라고 할 수 있습니다. 이제 여기에 살을 붙이고, 옷을 입히고, 튼튼하게 만들어주는 것은 각자의 몫일 것입니다.
코딩을 하다보면 처음에는 익숙한 방식을 계속 사용하게 됩니다. 손에 익은 방식을 유지하는 것이 가장 효율적이기 때문입니다. 그러다가 벽에 부딪혔을 때 비로소 새로운 것을 찾아 익히게 되고, 새로운 것은 다시 익숙함이 되어 실력으로 유지됩니다.
그리고 또 다시 문제가 발생하면 앞의 과정을 반복합니다. 따라서 시간과 실력은 정비례하지 않습니다. 예제를 많이 찾아 보고, 커뮤니티에 질문도 하고, 재미있는 것들을 많이 만들다보면, 지나간 시간보다 훨씬 더 많은 내용들이 익숙해져 있을 것입니다.
“그냥 어떻게 하다보니 이렇게 되더라” 라는 말이 잘 어울릴 것 같습니다. 완벽한 코딩을 위해 노력하기 보다는, 오랫동안 꾸준히 할 수 있는 재미있는 코딩을 생각했으면 좋겠습니다.
끝인사 = (누구, 어떻게) ->
print “누구에게 쉽게 설명하기 위해 실제와 다른 표현이 일부 있을 수 있습니다. 너그러이 이해 부탁드립니다.”
print “모두 어떻게 코딩생활 하시길 ^^”끝인사(비개발자, 즐거운)
