1.3 framer 기본문법과 깨알팁
바로 예제로 들어가려고 하다보니 기본문법에 대한 설명 때문에 길어져 따로 분리했다. 여기서는 간단한 기본문법에 대해 이야기하고 자세한 내용은 앞으로 업데이트하는 예제에 추가적으로 기술하겠다.
기본적인 코드 작성법 (Syntax - 문법)
캐멀케이스
coffee script에 기반을 두고 있는 framer는 캐멀케이스라는 방식으로 작성된다. 캐멀케이스는 낙타의 혹처럼 단어의 첫머리를 대문자로 작성하는 방식인데 framer의 경우 단일단어는 소문자를 사용하지만 대부분 결합문자의 경우 첫단어는 소문자, 결합되는 단어의 첫머리는 대문자를 사용한다.(오해말자. '대부분'이다. 예외는 어디에나 있는 법. 아닐 때도 있을 수 있다.) 아래의 문장을 보자.
layerA.height = 20
layerA.backgroundColor = '#FFFFFF'
height는 layerA의 높이를 말한다. 단일 단어이므로 모두 소문자로 사용되었다. backgroundColor의 경우를 보면 background와 color, 2개의 단어가 결합된 문자다. 그래서 뒷 단어인 color의 첫머리 c가 소문자가 아닌 대문자로 쓰였다. 붙여쓰는 것 뿐만 아니라 띄어쓰기를 하더라도 뒷 단어의 시작은 대문자를 사용한다. 이런 대소문자 구분을 잘못해서 오류나는 경우가 생각보다 굉장히 많다. 하지만 걱정마시라. framer는 친절해서 자동완성 기능을 제공하기 때문에 모두 타이핑할 필요가 거의 없다.
친절한 framer 씨* 덫붙이자면 내가 부여해야 하는 이름을 사용할 때도 나는 캐멀케이스 방식을 활용한다. 이름을 명명할 때 이게 무엇을 하는건지 의미가 포함된 이름을 지정하는 것이 추후에 복잡한 작업에서도 도움이 되기 때문에 쉽게 알아볼 수 있는 방법을 사용하는 것이다. 캐멀케이스 방식 말고도 스네이크 케이스라는 방식도 있는데 단어마다 _를 삽입하는 방식이다. (예: StatusBar / status_bar) 둘 중에 본인이 편한 방법을 쓰면 된다.
객체(Object)와 속성(Property), 값(Value)
레이어를 만들기 위해서는 객체(object)를 생성해야 한다. 아래를 보자.
layerA = new Layer
width: 750
height: 48
backgroundColor: '#1A237E'
layerA는 내가 새 레이어에 명명한 이름이다.(고로 다른 어떤 단어로 대체해도 상관없다.) 그리고 그 아래에 가로값, 높이값, 배경색에 대한 값을 지정해주었다.
이처럼 특정 요소에 대한 구체적인 정보를 담는 그릇이 객체(object)다. 그리고 그 그릇에 담긴 가로값, 높이값, 배경색 등을 속성(property)이며 각 속성마다 해당하는 값(value)이 있다.
가을 쯤에 국가지원으로 기본 퍼블리싱 수업을 들었던 적이 있는데 그때 강사님이 모든 코드를 입으로 문장화 하여 말하게 했었다. 근데 그게 은근 도움이 된다. 예를 들면 위의 코드를 문장화하면 'layerA는 가로 750, 높이 48, 배경컬러 blue인 새로운 레이어다.'가 된다. 코드를 쓰면서 마음 속으로 이렇게 문장화해서 말하는 연습을 하면 이해하기가 더 쉽다.
속성에 사용되는 다양한 값들은 프로토타입을 만들면서 그때그때 설명을 추가하는 것으로 하겠다.
데이터 타입
framer이 자동완성기능을 보면 오른쪽에 number, string, boolean 등등이 써있는 걸 볼 수 있다. 이게 바로 데이터 타입이다. x라는 속성에는 어떤 타입의 데이터가 값으로 와야 하는지, clip이라는 속성에는 어떤 타입의 값을 주어야 하는지 친절히 안내해주고 있다. 이러한 데이터타입의 의미만 알아도 조금 더 쉬워진다.
new Layer 안에서 쓸 수 있는 속성과 그 속성의 데이터 타입들1. Number (수)
말 그대로 숫자를 나타낸다. 그냥 정수를 써도 되고 소수점을 붙여 쓸 수도 있다.
width: 640
opacity : 0.1
2. String (문자열)
문자열을 표현하는데 사용되는 타입이며 문자열은 반드시 따옴표로 묶어주어야 한다. 다옴표는 큰 따옴표(" ")나 작은 따옴표 (' ') 아무거나 써도 된다.
backgroundColor : 'white'
3. Boolean
true 또는 false와 같이 참과 거짓을 의미하는 논리 데이터타입이다.
visible : false
4. Function (함수)
함수에 대한 설명은 복잡하니까 여기선 패스. 사실 나도 아직까지 뭐라고 설명하면 좋을지 정리가 전혀 안된다. (;_;)
5. Any
어떤 타입이 와도 상관없다.
6. Constructor
구조를 만들 때 사용하는 데이터타입이다.
이정도가 가장 많이 나오는 데이터타입인 것 같고 그 외에도 아래와 같은 것이 있다.
7. Color
8. Language
9. Array
10. Object
오류를 방지하기 위한 깨알팁
1. '='의 의미는 '같다'가 아니다.
이것은 비단 framer에서 뿐만 아니라 언어에 모두 해당되는 내용인 듯 하다. 우리는 학교에서 '=' 기호를 '같다'라고 배웠지만 프로그래밍 언어에서 '='는 '대입하다', '담다'의 의미로 해석해야 한다. (실제로 그러한 의미가 맞다. 스크립트에서 '같다'는 기호는 '=='이다.)
A=B (B를 A에 대입하다)
그렇지 않으면 후에 혼란이 야기된다고 한다. 나는 아직 그런 단계까진 아니여서 혼란스러웠던 적은 없지만 후에 값을 비교하는 수식(==, !=, <=, => 이런 거...)이 등장하기도 해서 그런 것 같다. 아무튼 처음부터 '='는 '같다'가 아닌 '대입하다'로 인식하는 습관을 들이면 좋다.(고 한다.)
2. 객체의 속성은 반드시 들여쓰기를 해야한다.
자바스크립트에서는 중괄호로 속성을 묶어주지만 커피스크립트에서는 중괄호를 사용하지 않기 때문에 들여쓰기를 해주어야만 속성값이 객체에 귀속된다. 들여쓰기 되지 않은 속성은 객체에 귀속되지 않으므로 오류를 일으킨다.
3. 처음엔 웬만하면 자동완성기능을 최대한 활용하자.
코드에 대해 익숙해지기 전까지는 자동완성기능을 최대한 활용하는 것이 좋다. 앞서 말한대로 대소문자 잘못 구분해서 오류나는 경우를 참 많고 자동완성기능에서 어떤 데이터를 값으로 가져야하는지 표시도 해주니 이해가 빠르다는 장점이 있다. 되도록 코드를 완벽히 쓰는 연습을 하되, 처음엔 자동완성기능을 많이 참고하는 것이 좋다.
*기본 문법에 대한 설명은 기발자님의 브런치 매거진 '그림으로 배우는 자바스크립트'를 아주 많이 참조했습니다. 이번 목표인 개념과 체계를 세우는데 아주 많은 도움이 된 매거진이기도 합니다.
*전문 개발자가 아니고 여러 정보를 습득하며 스스로 이해한 내용을 바탕으로 하기 때문에 정확하지 않거나 틀린 정보가 있을 수 있습니다. 이 부분에 대해서는 댓글을 남겨주시면 수정, 보완하도록 하겠습니다.
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
