오늘 데브코스에 토스 사의 FE이신 진유림 멘토님께서 깃과 깃허브에 대한 특강을 해주셨다😻(최강 멘토진.. 섭외력 대박..) 실무에서 유용한 깃과 깃허브 사용법을 익힐 수 있는 좋은 기회인 동시에 중간중간 유림님께서 주니어때 개발자로 일하시며 겪으셨던 다양한 일화들을 들을 수 있었던 기회!
나에게는 정말 대단하게 보여지는 개발자분들도 주니어 당시, 개발을 하며 힘들었다는 이야기가 정말 의외기도 하고, 한편으로는 비슷한 감정을 겪는 나에게 위로가 되기도 하였다. (물론 저는 아직 주니어가 아니지만요! ^^) 또한 유림님께서 오픈소스 컨트리뷰션을 추천해주셨는데, 기여할 수 있는 개발자가 되기 위해 노력해야겠다.✨

1. 객체지향 프로그래밍 ( Object-Oriented Programming, OOP)

1-1. 객체지향 프로그래밍

현실의 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 핵심적인 속성 또는 기능 위주로 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임이다.

• 객체 위주로 설계하고 프로그래밍 하는 패러다임
• 객체 지향 언어에서는 추상화의 최소단위가 객체이다.
• 각각의 객체는 메시지를 주고 받을 수 있다.
  
  
  
  

1-2. 객체지향 프로그래밍에서의 '객체'의 의미

객체지향의 객체는 현실에 있는 것을 추상화 한 것을 의미한다.
현실에 존재하는 것을 코드로 옮기는 것이 아니다!

객체는 상태(State)와 행동(Behavior)를 가질수 있으며, 각각 속성(변수)과 메소드로 나타낼 수 있다.

1-3. JS에서의 객체 표현

• 서로 연관이 있는 속성(변수) 또는 기능(메소드)들로 이루어져있다.
• object = { key : value } 형식을 띄고있다.
  
  

객체 생성

1) 객체 리터럴 (object literal)

// const obj = {};

const personA = {
  name : 'meo-sseug',
  company : 'grepp',
  greeting: function() {
    console.log(`Hi! I\'m ${this.name}.`);
  }
};

personA.greeting(); // Hi! I'm meo-sseug.

2) Object (object constructor)

// const obj = new Object();

const personA = new Object();

// Runtime(동적)으로 데이터 추가 및 삭제 가능 (dynamically typed language)
personA.name = 'meo-sseug';
personA.company = 'grepp';
personA.greeting = function() {
	console.log(`Hi! I\'m ${this.name}.`);
};

delete personA.company;

3) 생성자 함수 (object constructor)

function Person(name, company) {
  this.name = name;
  this.company = company;
  this.greeting = function() {
    console.log(`Hi! I\'m ${this.name}.`);
  };
}

const personA = new Person('meo-sseug', 'grepp');

* this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.

기타 참고 기능

in operator : property existence check (key in obj)

console.log('name' in personA); // true
console.log('dfsfdf>??Sfd' in personA); // flase

for..in : for (key in obj)

for (key in personA) {
  console.log(key);
}

생성자 함수와 new 연산자를 통해 인스턴스를 생성할 수 있다. 이때 생성자 함수는 클래스이자 생성자의 역할을 한다.

// 생성자 함수(Constructor)
function Person(name) {
  this.name = name;

  this.setName = function (name) {
    this.name = name;
  };
  this.getName = function () {
    return this.name;
  };
}

// 인스턴스의 생성
const me = new Person('Lee');
console.log(me.getName()); // Lee

// 메소드 호출
me.setName('Kim');
console.log(me.getName()); // Kim



const you = new Person('Lee');
const her = new Person('Park');
const him = new Person('Choi');

console.log(you);  // Person { name: 'Lee', setName: [Function], getName: [Function] }
console.log(her); // Person { name: 'Park', setName: [Function], getName: [Function] }
console.log(him); // Person { name: 'Choi', setName: [Function], getName: [Function] }

그러나 생성자 함수로 여러개의 인스턴스를 생성하면 각각의 인스턴스에 메소드 setName, getName이 중복되어 생성된다.

• 각 인스턴스가 내용이 동일한 메소드를 각자 소유한다.
• 메모리가 낭비된다...

이것을 해결해 줄수 있는 것이 프로토타입(Prototype)이다.

1-4.프로토타입(Prototype)

기존의 객체를 복사하여 새로운 객체를 생성하는 방식

• 모든 객체는 프로토타입이라는 다른 객체를 가리키는 내부 링크를 가지고 있다.
• 즉, 프로토타입을 통해 직접 객체를 연결할 수 있는데 이를 프로토타입 체인이라 한다.

ES6에 Class가 새롭게 도입되었으나, 새로운 객체지향 모델을 제공하는 것이 아니며 Class도 사실 함수이고 기존 prototype 기반 패턴의 Syntactic sugar이다.

참조

데브코스강의 +
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
https://poiemaweb.com/js-object-oriented-programming
https://www.youtube.com/watch?v=1Lbr29tzAA8
https://medium.com/@zieunv/cs-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%9D%EC%B2%B4-object-%EB%9E%80-27298f3f7e5f