개발자의 삶

객체지향 프로그래밍에는 9가지 개념들이 있지만,

그 중에 크게 네가지 기본개념이 있다.

1. 캡슐화(Encapsulation)

2. 상속(Inheritance)

3. 추상화 (Abstraction)

4. 다형성 (Polymorphism)

느슨한 결합은

코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라,

코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미

캡슐화라는 개념은 "은닉화"의 특징도 포함하고 있는데,

은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것

예를들어 전화기로 가정을 들어보자

전화기에는 스피커 기능, 버튼 기능등 여러가지 기능이 탑재되어 있다.

그러나 실제로 우리가 사용할 때에는, 이러한 존재에 대해서는 생각하지 않고 단순히 수화기를 들고

버튼을 눌러서 해결하는 것으로 인터페이스(interface)를 단순화할 수 있다.

추상화는 캡슐화와 비교해서 종종 헷갈려 할 수 있는데

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면,

추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고,

단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

속은 부모 클래스의 특징을 자식 클래스가 물려받는다.

부모/자식으로 이야기하기도 하지만 보다 그 특징을 자세하게 설명하는 용어는

"기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속받는다"로 표현하는 것이 적합하다.

그러나, 부모/자식이라는 용어를 더욱 많이 사용한다.

동일한 인터페이스를 사용하여 다양한 객체를 처리할 수 있다.

1. 오버라이딩
하위 클래스에서 상위 클래스의 메서드를 재정의할 수 있고,

동일한 메서드 이름을 사용하면서 다양한 동작을 구현할 수 있다.

2.업캐스팅
하위 클래스의 객체를 상위 클래스의 타입으로 처리할 수 있다.
상위 클래스의 인터페이스에 맞게 다양한 하위 클래스 객체를 사용할 수 있다.

3.동적 바인딩
실행 시간에 객체의 실제 타입에 따라 메서드 호출이 결정된다.
객체의 타입에 따라 적절한 메서드가 호출된다.

예시

클래스와 인스턴스

클래스는 일종의 원형, 객체를 생성하기 위한 아이디어나 청사진

인스턴스는 클래스의 사례

클래스는 객체를 만들기 위한 생성자 함수를 포함

객체는 일반적인 함수를 정의하듯 만드는데

그냥 실행하는 것은 아니고,

new 키워드를 사용해서 만든다.(이는 새로운 인스턴스를 만드는 방법)

일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사.
일반적인 함수는 적절한 동사를 포함하고 소문자로 시작

이때 예시로

속성은 brand, name, color, currentFuel, maxSpeed가 될 수 있고,

메소드는 refuel(), setSpeed(), drive() 가 될 수 있다.

ES5 클래스와, ES6 클래스 작성 문법은 조금 다른데 최근에는 ES6 방법을 주로 사용한다

ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할수 있기에.
Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 한다.

ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의
refuel() {}, drive() {}와 같이 작성되어 있는 부분이다.

.

클래스 문법을 이용한 카운터 만들기 예제

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

document.createElement('div')

//div 요소 생성

const tweetDiv = document.createElement('div')
//tweetDiv에 div 요소 넣기

document.body.append(tweetDiv)
//바디에 tweetDiv를 추가

const oneTweet = document.querySelector('.tweet')

const tweets = document.querySelectorAll('.tweet')
//이렇게 가져온 요소들은 '배열이 아닌 유사배열'
정식 명칭은 Array-like-Object

getElementById와 quertSelector은 같은 의미이고,
이전 브라우저 호환성 떄문에 전자를 사용해야 할수도 있다.

container.append(tweetDiv)
//컨테이너에 tweewDiv를 추가

extContent를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력
ex) oneDiv.textContent

oneDiv.classList.add('tweet')
//CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가

const container = document.querySelector('#container')
container.append(oneDiv)
// append를 이용해 container의 자식 요소로 추가

oneDiv.remove()
//remove를 활용해 삭제하기

document.querySelector('#container').innerHTML = '';
//컨테이너의 모든 자식 요소를 지우기
+주의사항:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations


따라서 아래와 같은 removeChild 사용을 권고
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
//자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
//제목까지 삭제되기에 이를 방지하는 코드

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}
//직접 클래스 이름을 찾아서 지우는 방법



ex)

let elInputUsername = document.querySelector('#username');
elInputUsername.value = '김코딩'
let elSuccessMessage = document.querySelector('.success-message hide');
let elFailureMessage = document.querySelector('.failure-message hide');
elFailureMessage.classList.remove('hide');
elInputUsername.onkeyup = function(){
  console.log(elInputUsername.value);
  if(isMoreThan4Length(elInputUsername.value)){
    console.log('4글보자보다 크네');
  }else{
    console.log('짧다');
  }
}
function isMoreThan4Length(value){
  return value.length >=4;
}