개발자의 삶

예시

클래스와 인스턴스

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

인스턴스는 클래스의 사례

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

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

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

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;
}

01_Introduction

02_Types-part1

잘못된 값들이라는 것만 인지하고 다 외울 필요는 없다.

03_LetConst

04_Scope

05_ArrowFunction

06_Types-part2

07_Array

08_Object

09_SpreadSyntax

빈 배열에 전개 문법을 사용할 경우, 아무것도 전달되지 않음

여러 개의 배열을 이어 붙일 수 있음

여러 개의 개체를 병합할 수 있음

Rest Parameter는 함수의 전달인자를 배열로 다룰 수 있게 함

Rest Parameter 전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용 가능

10_Destructuring