오늘 데브코스에 토스 사의 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); // flasefor..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
