2주차

한주간 공부하면서 함께 이야기 나누고 싶었던 부분

이번 한주는 Class생성자에 대해 조금 더 이해를 하게 되어 정리한 글과 간단한 예제를 함께 첨부합니다. 또한 박영웅 강사님께서 잠깐 이야기하신 JQuery부터 Angular 그리고 현재 사용되는 React와 Vue.js까지의 변화배경과 상태관리에 대해 읽어보면 좋을 것 같아 정리가 잘된 블로그와 유트브를 함께 첨부를 합니다.

1. Class

▶[Javascript] 생성자 함수와 프로토타입

• 자바스크립트는 프로토타입 기반의 언어입니다.
• 생성자를 이용해 어떠한 인스턴스를 생성하면 그 객체는 자동으로 prototype 프로퍼티를 가지게 됩니다.
• 자동으로 생성된 인스턴스의 __proto__는 생성자 함수의 prototype프로퍼티를 참조하게 됩니다.
• 이 __proto__는 생략이 가능합니다.
• 따라서 인스턴스에 바로 매서드를 호출할 수 있습니다.

Class를 이용한 함수 구현 예제

▶전체코드

버튼을 누르면 다음 이미지로 넘어가는 캐러셀.

index.html

<div class="carousel-wrapper">
  <div class="carousel">
    <img class="carousel_item" src="assets/1.jpeg" />
    <img class="carousel_item" src="assets/2.jpeg" />
    <img class="carousel_item" src="assets/3.jpeg" />
    <img class="carousel_item" src="assets/4.jpeg" />
    <img class="carousel_item" src="assets/5.jpeg" />

    <div class="carousel_button--next"></div>
    <div class="carousel_button--prev"></div>
  </div>
</div>

위 코드의 경우 .carousel 안에 동적으로 움직일 요소들이 모두 들어 있기 때문에 class를 이용해 구현하는 것이 좋습니다.

main.js

  class Carousel {
    constructor(carouselEl) {
      this.carouselEl = carouselEl
	//인스턴스가 자동으로 클래스 값을 갖도록 설정.
      this.itemClassName = 'carousel_item'   
      //4. 캐러셀엘레멘트 안에 있는 모든 carousel_item 를 가져와 items에 담음
      //( querySelector로 아이템을 가져오는 경우에는 유사배열형태로 저장이 되게 됩니다.)
      this.items = this.carouselEl.querySelectorAll('.carousel_item')
      // length를 써서 총 갯수를 가져옵니다.
      this.totalItems = this.items.length;
      //items의 첫번째가 화면에 보일 수 있도록 
      this.current = 0;
    }
...

2. JQuery => Angular => Redux 까지 상태관리의 패러다임 변화

▶도움 받은 사이트
▶ NAVER Engineering TV 중 데이터 상태관리, 그것을 알려주마 유트브