객체 인스턴스 그리고 OOP

1. For non-developers!
Learn Javascript Programming!
!
Learning contents with!
Object & Instance!
OOP (Object-Oriented Programming)!
!
!
!
!
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare
#5.1

2. 4장 실습 #1 코드를 봅시다
1부터 10까지 숫자를 표시하는 셈플이죠?

3. 객체지향 방식으로 변경한 4장 실습 #1 코드
왼쪽과 오른쪽의 차이는?
*참고: 두 프로그램은 동일한 동작을 수행합니다.

4. 소스 코드가 길어졌다! 22줄 vs. 36줄
객체지향 방식으로 변경한 4장 실습 #1 코드

5. 처음보는 코드 형태가 보인다.
객체지향 방식으로 변경한 4장 실습 #1 코드

6. 왼쪽의 코드에서 보이던 요소들이 오른쪽은 분산되어있다!
객체지향 방식으로 변경한 4장 실습 #1 코드

7. 사라진 태그가 있다
?
객체지향 방식으로 변경한 4장 실습 #1 코드

8. ...
처음 보는 코드 “new”
List 는 함수를 값으로 저장한 변수이고!
List( ) 는 그 함수를 실행시키는 구문이다.
new 명령어는 함수에게!
‘복사본’을 만들어 반환하라고!
지시하는 지시자이다
하나씩 풀어봅시다

9. 처음 보는 코드 “new”
Javascript 에서 함수는 객체다. (5장 참조)!
new로 호출되어 반환된 함수의 ‘복사본’을 객체의 ‘인스턴스’라 한다!
인스턴스는 new를 이용하여 1개 이상, 원하는 수 만큼 만들 수 있다!
만들어진 인스턴스들은 각 각 완전한 독립체이며 독립된 공간을 점유한다
...
하나씩 풀어봅시다

10. 하나씩 풀어봅시다
처음 보는 코드 “this”
함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다!
var 로 생성된 변수는 함수가 실행되는 동안만 유지된다!
this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다

11. 하나씩 풀어봅시다
처음 보는 코드 “this”
함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다!
var 로 생성된 변수는 함수가 실행되는 동안만 유지된다!
this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다
값은 10 값이 없다 (undefined)

12. 하나씩 풀어봅시다
처음 보는 코드 “this”
this.parent 와 this.add 는 this에 추가된 함수다!
따라서 List 의 인스턴스 list 에서 호출할 수 있게된다!
this 안의 값들은 객체 안에서 공유(접근, 사용)된다.
List 객체의 변수 me가
add 함수 내에서도 사용되
고 있는 것 을 볼 수 있다

13. 코드가 “분산” 되어있는 이유
동일한 동작을 수행하는 코드의 중복을 최대한 억제한다!
동일한 코드는 함수를 만들어 호출하여 재사용한다!
함수 또한 공통 요소가 있다면 객체로 묘사하여 결합한다!
객체에 포함된 함수를 객체의 멤버 함수(메소드)라 한다
List 객체는 !
parent, add 두 개의 !
멤버 함수(메소드)가 있다
하나씩 풀어봅시다

14. 코드가 “분산” 되어있는 이유
어떤 객체가 있고, 객체가 제공하는 여러 기능들이 있다고 가정하면!
객체를 사용하기 위해 인스턴스를 만들어 객체를 사용할 수 있다!
객체가 제공하는 기능의(메소드, 또는 변수) 사용법을 안다면!
객체를 만드는 행위와 사용하는 행위는 완전히 독립될 수 있다
하나씩 풀어봅시다
내가 만든 칼로 전쟁을 하던
무를 썰던 난 상관하지 않고
칼을 만들겠소!

15. 코드가 “분산” 되어있는 이유
객체를 만드는 행위!
만드는 과정은 사용을 전제로 하나, 사
용법은 다양해 질 수 있다. 예) 몇 개의
객체 인스턴스가 만들어 질지 예상할 수
없다.
객체를 사용하는 행위!
사용하는 행위는 필요에 따라, 원하는 방식으로(객체가
제공하는 자유도 범위에서) 사용되어질 수 있다. 사용자
입장에서 객체의 제공 기능을 아는것은 중요하나 어떻
게 만들어 졌는지 아는것은 불필요하다
하나씩 풀어봅시다

16. 코드의 규모가 “진짜 길어” 졌을까?
하나씩 풀어봅시다

17. 코드의 규모가 “진짜 길어” 졌을까?
실제 만들고자 하는 부분만 본다면 (1)
코드는 실제 동작의 의미와 유사해졌고,!
따라서 구현 하고자 하는 의미가 선명해졌으며,!
UI 추가를 위한 반복적인 시스템 코드들이 제거되었다.
실제 만들고자 하는 부분만 본다면 (2)
추가로 새로운 리스트(UL)가 필요한 경우 List 객체를
재사용 함으로서 생성하는 객체의 코드 구조에 따른
의존성이 제거됨
하나씩 풀어봅시다

18. 객체의 정보 “은닉과 약속” 으로 정리
하나씩 풀어봅시다
정보의 은닉
객체는 객체 사용자에게 내부 구조를 숨긴다!
내부 구조를 은닉한다는건 외부 구조와 독립됨을 의미한다
객체의 약속
객체는 객체가 제공하는 기능을 공개한다. !
이를 인터페이스라 하며 규정된 입력을 넣으
면 약속된 동작이 수행될 것을 보장한다. 이
약속을 기반으로 사용자는 객체가 제공하는
범위 안에서 자유롭게 객체를 사용하며, 제
작자는 약속의 테두리 안에서 외부와 독립된
내부를 자유롭게 변경할 수 있는 자유를 누
릴 수 있다.

19. 이것을 프로그래머들은 “캡슐화(encapsulation)” 라 한다
하나씩 풀어봅시다
병이 걸려 약을 먹어야 한다면 우리는 약사의
지시대로 식후 30분 후, 하루 3번 두 알씩 먹
는다는 약속만을 알면 된다.
하지만 약속은 중요하다. 환자에게 통보
없이 약의 사용법이 바뀐다면 환자가 죽
을 수 도 있기 때문이다.
그렇게 많은 프로그래머들이 지옥을 경험한다.

20. 1 “다음시간에”;!
2 “잘자요~~;
Unclosed string.