4.0 인스타그램 만들기
- 변수(Variables)
이번에는 지난 'Component로 간단한 프로토타입 만들기'에서 예고한 대로 인스타그램 디자인을 이용해 프로토타입을 만들어보고자 한다. 지난 시간에 이미지로 대체했던 콘텐츠의 레이아웃을 만들고 포스팅마다 상세가 나오도록해서 '실제' 인스타그램처럼 만드는 예제다. 지난 편에서 삭제했던 것들을 활용한다고 보면 된다.
완성된 예제이건 현재 하고 있는 스터디그룹의 리더인 준석님이 제공해주신 예제를 내가 좀 더 디테일하게 레이아웃을 업그레이드한 것인데 변수, for문, data 활용, 배열까지 중요하지만 복잡한 개념들(왜 중요한 건 항상 어렵고 복잡할까...)이 대거 포진되어 있어서 꽤 많은 편수로 나누어 완성할 예정이다.
프로토타입을 만들면서 개념도 함께 설명을 덧붙이면 좋겠지만 이러한 개념들이 어느 한 군데만 적용되는 게 아니라 복합적으로 쓰이고 있어서 몇 가지 개념에 대한 정리를 먼저 한 후 적용하는 형태로 진행한다.
지난 'Components로 간단한 프로토타입 만들기'에서 components로 불러왔던 코드들 중 삭제했던 아이들에 대해 짚고 넘어갈 텐데 비교적 쉬운 '변수'에 대해 정리해보자.
지난 편에서 Snippet > Components > Scroll List를 했을 때 지웠던 코드들이 당연히 기억나지 않을 것이다. 다시 한번 살포시 해보면 아래와 같은 코드들이 자동 생성된다.
그때는 길쭉한 이미지가 스크롤이 가능하게만 하면 되는 거였기 때문에 다른 코드들은 모두 지우고 scroll = new ScrollComponent 영역의 코드만 사용했었는데 여기서 살펴볼 변수는 바로 그 위에 있는 녀석들이다.
# Variables
rows = 16
gutter = 10
rowHeight = 200
주석부터도 Variables, 변수임을 말해주고 있다. 역시 친절한 프레이머.
변수는 이름에서도 알 수 있듯이 '변하는 수'다. 저 숫자들 중 일부를 바꿔보면 변화가 생기는 걸 확인할 수 있는데, 정확한 뜻 이해를 위해 네이버 국어사전의 힘을 빌리자.
변수(變數)
1. 어떤 상황의 가변적 요인.
2. <수학> 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수.
우리가 주목해야 하는 뜻은 바로 두 번째에 있는 수학 언어로서의 변수다. 변하는 '수'라고 해서 숫자만 사용할 수 있다고 생각하면 안 된다. 이때의 '수'는 '데이터'라고 봐야 한다. 숫자뿐 아니라 문자나 boolean, 컬러 값 등도 가능하다. 그리고 개발자들은 이를 '변수를 선언한다'라고 말한다.
변수 활용방법
프레이머에서 변수를 선언하는 방법은 아주 간단하다.
변수명 = 데이터
그리고 선언한 변수를 활용하는 방법은 변수에 담긴 데이터가 쓰여야 할 곳에 데이터 값이 아닌 변수명을 사용하면 된다. 아래의 예와 같이.
#변수 선언
layerWidth = 500
#변수 적용
layerA = new Layer
width: layerWidth
변수에 어떠한 데이터를 담아놓았다가 해당 데이터가 동일하게 사용되는 곳에 직접적인 데이터가 아닌 변수를 차용할 수 있다. 당연히 변수가 먼저 선언되어야 하고 그 후에 선언한 변수를 활용할 수 있다. 이렇게 되면 수정할 때도 모든 데이터를 찾아 수정하지 않고 처음 선언한 변수의 데이터 하나만 수정함으로써 같은 변수를 차용한 모든 데이터를 바꿀 수 있다.
말이 좀 어려운 것 같으니 그림으로 보자.
(좌) 변수를 선언하지 않은 예 / (우) 변수를 선언한 예왼쪽은 변수를 선언하지 않고 레이어 3개를 만들었고 오른쪽은 변수를 이용해 레이어 3개를 만들었다. 물론 만들어진 아웃풋은 둘 다 동일하다. 여기서 width와 height의 값을 700으로 바꿔야 한다고 가정하면 어느 방법이 더 쉬울까?
변수를 선언해서 사용한 쪽이 코드도 더 길고 뭔가 복잡해 보여서 어려울 것 같지만 그건 왼쪽은 익숙한 숫자들이 많고 오른쪽은 익숙하지 않은 문자들이 많은 데서 오는 착각이다.
변수를 선언하지 않은 왼쪽의 경우 layer A, B, C의 width와 height값을 700으로 일일이 바꿔줘야 하고 높이가 늘어난 만큼 layer B, C의 좌표값도 바꿔줘야 한다. 총 8개의 값에 대해 수정을 거쳐야 한다는 얘기다.
하지만 변수를 사용한 오른쪽의 경우 layerSize에 있는 값 1개만 바꿔주면 해당 변수를 차용하는 모든 값이 변하게 된다.
변수는 손발이 고생하는 걸 덜어준다.
변수 선언 시 알아두어야 할 법칙
'1.3 framer 기본 문법과 깨알 팁'에서 얘기했던 기발자님의 '그림으로 배우는 자바스크립트'에서 소개하는 변수 선언 시 알아두어야 할 법칙을 추가한다. 이름에서 보듯이 이는 '자바스크립트'에서 변수 선언 법칙인데 어차피 프레이머의 뼈대가 되는 커피 스크립트란 것도 자바스크립트를 좀 더 쓰기 쉽게 패킹한 언어이니 것이니 크게 다르진 않을 것 같다.
1. 예약어는 변수명으로 사용할 수 없다.
예약어라는 건 이미 자바스크립트에서 기본적으로 기능을 가지고 사용되고 있는 키워드를 말한다고 한다. if, for, this, null, true, false 등등. 자세한 것은 W3School에서 제공하는데 어차피 쓰다 보면 몸이 알아서 기억한다고 하니 기발자님의 말을 믿어보기로.
2. 영어의 대소문자 구분
layersize와 layerSize는 다른 변수다.
3. 변수명 첫 문자로 숫자는 사용할 수 없다.
2layer와 같은 형태로 변수를 선언할 수 없다. 숫자가 변수 명의 첫 문자로 사용될 경우 syntzxError(문법적 오류)가 발생한다고 하니 유의하자.
4. 변수명은 데이터의 의미를 담아서 명명해야 한다.
layerSize는 레이어의 사이즈에 대한 데이터를 담고 있다는 것을 바로 알 수 있다. 이처럼 변수명을 명명할 때는 데이터가 갖고 있는 의미를 제대로 표현해주어야 나중에 코드를 수정하거나 다른 사람과 협업하는 과정에서도 효율적이다.
5. 캐멀 케이스 또는 스네이크 케이스로 변수 선언하는 습관을 들이자.
'1.3 framer 기본 문법과 깨알 팁'에서 잠깐 설명한 적이 있는데 캐멀 케이스는 결합하는 단어의 첫 글자를 대문자로 쓰는 것이다. layerSzie처럼. 그리고 스네이크 케이스는 결합하는 단어와 단어 사이에 _를 넣는 방법이다. layer_size. 이건 편한대로 정해서 하면 된다.
다음 편에서는 for문에 대해서 정리해보도록 하겠다.
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
