ScrollTrigger: ToggleClass

보호되어 있는 글입니다.

2024.05.29

eventCallback

보호되어 있는 글입니다.

2024.03.22

ES6 class

ES6 클래스 문법은 좀 더 JAVA 스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5 까지 JavaScript에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현 해왔었는데 ES6 버전에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. ES5 프로토타입 문법 VS ES6 클래스 문법 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조다. ES5 프로토타입 문법 // 생성자 함수 function Person({name, age}){ this.name = name; this.age = age; } Person.prototype.introduce..

2023.12.22

Component 만드는 또 다른 문법 class

Component 만드는 또 다른 문법 class 현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다. 그냥 알아두자 1. class 에 component 이름을 작명한다. 2. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것) 3. render return () 안에 JSX를 작성한다. class Modal extends React.Component { constructor(){ super() } render(){ return ( Class문법이다 ) } } class가 뭔가요? class는 변수, 함수를 보관하는 장소다. extends는 기존 class안에 있던 변수, 함수를 복사해주는 문법이다. React.Com..

2022.11.11

Class 추가, 제거

JavaScript class 추가/제거하기 JavaScript로 HTML에 CLASS를 추가하거나 제거할 수 있다. ＊ 클래스 추가하기 element.classList.add(); var d = document.getElementById('div1'); d.classList.add('my-class'); ＊ 클래스 제거하기 element.classList.remove(); var d = document.getElementById('div1'); d.classList.remove('my-class'); ＊ IE9 이하를 지원해야 하는 경우 var d = document.getElementById('div1'); d.className += ' on'; // 앞에 공백을 넣어줘야 한다

2021.12.03