[TIL study] 2주차
2주차
한주간 공부하면서 함께 이야기 나누고 싶었던 부분
이번 한주는 Class생성자에 대해 조금 더 이해를 하게 되어 정리한 글과 간단한 예제를 함께 첨부합니다. 또한 박영웅 강사님께서 잠깐 이야기하신 JQuery부터 Angular 그리고 현재 사용되는 React와 Vue.js까지의 변화배경과 상태관리에 대해 읽어보면 좋을 것 같아 정리가 잘된 블로그와 유트브를 함께 첨부를 합니다.
1. Class
- 자바스크립트는 프로토타입 기반의 언어입니다.
- 생성자를 이용해 어떠한 인스턴스를 생성하면 그 객체는 자동으로 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 중 데이터 상태관리, 그것을 알려주마 유트브
Author And Source
이 문제에 관하여([TIL study] 2주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0seo8/TIL-study-2주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)