Coffee script for Framer - 객체지향개념

※ 모든 예제는 여기 에서 진행됩니다.

※ Coffee Script 언어 설명은 여기서 확인할 수 있습니다.

※ Framer 의 클래스, 객체, 변수, 함수에 대한 설명은 여기서 확인할 수 있습니다.

0. 도입 - 객체지향 vs 절차지향

---

 다소 틀린 점이 많더라도 이해해주세요!

 언어에는 크게 두가지 종류가 있다고 생각합니다. 

 객체 지향 언어와 절차 지향 언어이죠!

 우리가 배울 Coffee Script언어는 객체 지향 언어에 속하는데요, 

 예를 들어서 두가지 언어의 차이점을 알아볼께요

객체 지향

객체 지향 언어를 사용하는 프로그래머들 끼리 밥을 먹고 있었습니다. 그런데 친구 한명이 늦게 도착했습니다. 그래서 한명이

아주머니 여기 1인분이요

라고 외쳤습니다.

절차지향

절차 지향 언어를 사용하는 프로그래머들 끼리 밥을 먹고 있었습니다. 그런데 친구 한명이 늦게 도착했습니다. 그래서 한명이

아주머니 여기 숟가락하구요 젓가락하구요 컵하구요 물도좀 따라주시구요 고기도 더 가져다 주세요

라고 외쳤습니다.

1. 본문

---

 무슨 차이가 나는지 느껴지시나요? 대충 느낌만 가져가시면 됩니다.

 이처럼 객체 지향 프로그래머는 "1인분" 이라는 단어 안에 숟가락, 젓가락, 컵, 물, 고기, 물따라는 행위, 고기를 가져다 주는 행위, 세팅하는 행위... 등등 다양한 개념들을 포함시켰습니다. 

 여기서 객체 지향의 주요 개념들을 뽑아낼 수 있습니다.

- 1인분 ==> 클래스

- 숟가락     ==> 변수

- 젓가락     ==> 변수

- 컵           ==> 변수

- 고기        ==> 변수

- 세팅해주는 행위     ==> 함수

 위의 개념도를 보면 각각의 변수(숟가락, 젓가락...)와 함수(행위...)를 클래스(1인분)가 포함하고 있다는 것을 확인할 수 있습니다. 

 즉, Coffee Script를 사용하는 우리는 어떤 일을 하려고 할 때 1인분(클래스)를 호출하면, 1인분안에 있는 것들을 사용할 수 있다는 것입니다.

2. 적용 - CoffeeScript 적용

---

 그렇다면 Coffee Script에서는 어떻게 동작하는 지 알아볼까요?

 여기에 들어가서 왼쪽 입력창에 new Layer라고 입력을 해보세요.

 그러면 오른쪽 창에 네모 박스가 생긴것을 볼 수 있습니다.

 그럼 Layer가 Class라면 내부에는 많은 변수와 함수들이 있겠지요? 그것들을 한번 사용해보겠습니다.

위의 그림에서 Layer라는 클래스안에 있는 x, y, width, hegith, html 이라는 변수의 값을 수정함으로써, 오른쪽 박스를 변형시킨 것을 볼 수 있습니다.

 이처럼, 같은 클래스라도 안에 있는 변수를 어떻게 다르게 하느냐에 따라서 모양, 속성 들이 달라지게 됩니다.

 그리고, layer = new Layer처럼 Layer에 이름을 지어 줌으로써 나중에 불러와 쓸 수 있습니다. 이를 "객체" 라고 합니다. 

(프로그래밍에서 "=" 등호는 같다라는 뜻이 아니라, "넣는다 혹은 대입한다" 라는 뜻을 가집니다.) 

 그럼 이번에는 함수를 실행시켜볼까요?

3. 결론

---

 이번에는 객체지향 프로그래밍의 가장 중요한 클래스, 객체, 변수, 함수를 배웠습니다. 다음 시간에는 조건문에 대해서 배워보도록 하겠습니다.