TIL 22일차 - [JavaScript] 객체 지향 프로그램

• 클로저 모듈 패턴에 대해 설명할 수 있다.

  o
  변수를 선언하고 객체를 할당하는 단순 객체는 사용할 때마다
  필요한 개수만큼 여러 개를 만들어야 해서 재사용성이 떨어진다.
  반면, 클로저 모듈 패턴을 사용하면,
  함수를 만들고 객체를 반환하도록 할 수 있어서
  언제든지 필요한 만큼 사용할 수 있어 재사용성이 좋다.

• 객체 지향 프로그래밍에 대해 설명할 수 있다.

  o
  객체 지향 프로그래밍(Object-Oriented Programming)은
  하나의 모델이 되는 청사진을 만들고,
  그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다.
  이때 청사진은 class를 의미하고,
  청사진을 바탕으로 한 객체는 instance를 의미한다.

  이 객체 지향 프로그램은 한 번 만들어지면,
  메모리상으로 반환되기 전까지 객체 내부의 모든 것이 유지되므로
  객체 내에는 메서드와 속성이 존재한다.

  또한 재사용성이 용이하다.

• 클래스와 인스턴스에 대해 설명할 수 있다.

  o
  변수를 선언하여 함수를 할당하는 것인데

  이때 변수는 생성된 함수를 사용하기 위한
  new 키워드로 만들어진 객체가 할당되며,
  이 객체는 자바스크립트 내에 있는 object(객체)와 차이점이 있다.
  바로 청사진(class)를 기반으로 한 객체이다.
  따라서 인스턴스 객체(instance object)라고 부른다.
  이렇게 만들어진 각각의 인스턴스는
  클래스의 고유한 속성과 메서드를 갖게 된다.

  이러한 인스턴스 객체를 만들 수 있는 설계도의 역할을 하는 class는
  class 키워드를 사용하여 생성할 수 있다.

  이때 할당된 함수는 언제든 재사용이 가능한 청사진의 역할을 하는
  클래스(class)를 바탕으로 만들어진 생성자 함수다.
  new 키워드와 함께 대문자로 쓰여진 클래스명을 적으면,
  새로운 인스턴스가 생성되고, 그 즉시 생성자 함수가 실행된다.

  이러한 객체 지향 프로그래밍은
  현실 세계를 기반으로 프로그래밍 모델을 만들 때 유용하며,
  개발의 기본 마인드인
  'Don't reinvent the wheel'을 잘 보여주고 있다.

  요약하자면,
  클래스에 속성과 메서드를 정의하고, 인스턴스에서 사용한다.
  class는 객체를 생성하기 위한
  세부 사항(속성)이 없는 청사진을 의미하며,
  instance는 생성자 함수를 통해 세부 사항(속성)이 들어간 객체로
  인스턴스 객체를 줄여 표현한 것이다.

  모든 생성자 함수는 constructor 속성을 지닌 객체를
  프로토타입 객체로 가지고 있다. return 값을 반환하지 않는다.
  이 constructor 속성은 원본 생성자 함수 자신을 가리키고 있다.

• 클래스 문법을 이용할 수 있다.

  o
  class 키워드를 사용하여 작성할 수 있다.
  이때, 클래스명은 다른 함수와 비교하기 위해
  대문자로 시작하고 일반 명사로 짓는다.

  속성과 메서드를 포함한 객체를 만들기 위해서는 생성자 함수가 필요하다.
  constructor 키워드로 표현되며,
  인스턴스가 만들어질 때(초기화될 때) 실행되는 코드다.

  인스턴스는 new 키워드를 사용하여 만들 수 있다.
  이때, new 키워드로 인스턴스를 생성하면,
  그 즉시 생성자 함수가 실행되고,
  변수에 클래스의 설계를 가진 새로운 객체인 인스턴스가 할당된다.
  이렇게 생성자 함수를 통해 세부사항이 포함된 객체를 instance라고 부른다.
  따라서 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 가진다.

• this 키워드에 대해 설명할 수 있다.

  o
  인스턴스 객체를 의미하는 키워드로 매개변수로 넘어온 인자들을
  인스턴스를 생성했을 때, 지정하는 값이다.

  함수가 실행될 때, 해당 스코프마다 생성되는
  고유한 실행 문맥(execution context)으로 문맥에 맞게
  자바스크립트가 읽어 내어 실행한다.

  this에 할당한다는 것은 new 키워드로 인스턴스를 생설할 때,
  해당 인스턴스에 전달된 인자들을 부여하겠다는 의미로
  해당 인스턴스가 바로 this의 값이 된다.

• ES5 / ES6로 클래스 작성할 수 있다.

  o

  [ES5] 
  
   function Car (brand, name, color) {
    	this.brand = brand;
      this.name = name;
    	this.color = color;
   }
   
   Car.prototype.drive = function(){
   console.log(this.name + '가 운전을 시작한다.')
   }
   
   let avante = new Car ('hundai', 'avante', 'black');
   avante.color;
   avante.drive();

  [ES6]
  
     class Car {
     	constructor (brand, name, color) {
      	this.brand = brand;
          this.name = name;
      	this.color = color;
  	    }
     
  	    drive(){
     	     console.log(this.name + '가 운전을 시작한다.')
  	    }
      }
     
     let avante = new Car ('hundai', 'avante', 'black');
     avante.color;
     avante.drive();

• 객체 지향 프로그래밍의 주요 개념에 대해 설명할 수 있다.

  o
  주요 개념에는 캡슐화, 추상화, 상속, 다형성이 있다.

  (1) 캡슐화

  → 코드 복잡 ✕ , 재사용성 ↑, 정보 은닉 ○

  데이터와 기능들이 느슨하게 결합하여 하나의 객체 안에 넣는 것.
  느슨하게 결합되어 있어서 코드를 보고
  인스턴스 객체들의 기능들을 유추할 수 있다.

  따라서 이러한 캡슐화의 특징은 내부 데이터나 내부 구현이
  외부로 노출되지 않도록 하는 은닉화의 특징도 포함한다.

  (2) 추상화

  → 코드 복잡 ✕, 단순화된 사용으로 변화에 대한 영향 최소화

  추상화라는 한 단어에 많은 의미를 내포하고 있지만,
  간단한 단어의 형태로 정의되고 보여지는 것처럼
  내부구현은 아주 세세하고 복잡한데
  실제로 노출되는 부분은 단순하고 간단하게 만든다는 개념이다.

  이러한 추상화의 특징을 통해 사용자가 너무 많은 기능들에 노출되어
  예기치 못한 에러나 사용상의 변화 발생 등을 최대한 경험하지 않도록
  인터페이스를 단순화할 수 있다.

  (3) 상속

  → 불필요한 코드 사용 ↓, 재사용성↑

  기본 클래스(부모 클래스)의 특징을
  파생 클래스(자식 클래스)가 물려받는 것을 의미한다.

  이때 파생 클래스는
  [기본 클래스의 특징 + ⍺] 로 속성과 메서드를 추가할 수 있다.

  (4) 다형성

  → 객체의 특성에 맞게 다르게 작성하는 것이 가능

  다양한 형태를 가진다는 것을 의미한다.
  이는 같은 메서드를 기본 클래스(부모 클래스)로부터 받았다 할지라도
  파생 클래스(자식 클래스)에 해당하는 각 객체마다
  다른 방식으로 구현될 수 있음을 의미한다.

• 인터페이스에 대해 블로깅 하기

  인터페이스는 두 애플리케이션 간의 요청과 응답을 사용하여
  두 애플리케이션이 서로 통신하는 방법을 의미한다.

  API(Application Programming Interface)는
  정의 및 프로토콜 집합을 사용하여
  두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘.

  API의 맥락에서 애플리케이션이라는 단어는
  고유한 기능을 가진 모든 소프트웨어를 나타낸다.

  API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다.

• #으로 은닉화 구현해보기

  △ (chat-GPT의 답변 받음)
  #은 클래스/인스턴스 형태로 만들 때, 클래스 외부에서 접근할 수 없도록 하는 키워드다. #은 ES2019부터 도입되었다.

   class MyClass {
  	 #privateVar = 10
    
  	 getPrivateVar() {
  	   return this.#privateVar;
  	 }
  	}
   
  	const myObj = new MyClass();
  	console.log(myObj.getPrivateVar()); // 10
  	console.log(myObj.#privateVar); 
  	// Error: SyntaxError: Private field'#privateVariable'
  	must be declared in an enclosing class
   
   	// #privateVar은 클래스 내부에서만 접근할 수 있고, 
  	클래스 외부에서는 직접 접근할 수 없다. 
  	따라서 getPrivateVariable() 메서드를 통해 
  	#privateVariable 값을 반환하도록 구현해야 함.
  

• getter, setter 학습 후 구현하기

  getter와 setter를 사용하면 객체의 정보 은닉을 가능하게 해준다.
  ES6 전에는 get속성명(), set속성명()으로 사용했지만,
  ES6 이후부터는 메소드 이름 앞에 get 또는 set을 붙여서 사용한다.

• 블로깅 과제 충족 조건: 다음의 키워드를 포함해야 한다.

  • 클래스 ✓
  • 인스턴스 ✓
  • new 키워드 ✓
  • 생성자 함수 ✓
  • ES5 클래스 작성 문법 ✓
  • ES6 클래스 작성 문법 ✓
  • 객체 지향 프로그래밍 ✓
  • 캡슐화 ✓
  • 추상화 ✓
  • 상속 ✓
  • 다형성 ✓

소감

🔡➡️💻➡️🤓👍

자바스크립트를 좀 더 깊게 이해할 수 있었다.
이전에 배웠을 때, 이해하지 못하고 넘어간 부분들
혹은 지나간 부분들에 대해서 자세하게 알 수 있어서
배웠던 내용들이 더 기억에 남고 이해가 되었다.

지금 이해가 되지 않는 게 나중에 이해가 되듯이
시간이 걸리더라도 조급해하지 말고 차근차근
내 속도를 유지해야겠다.