변수 - primitive 타입과 object 타입 변수의 차이점 🍋 리액트를 공부할 때 PureComponent와 관련해서 shallow comparison 을 이해하기 위해 먼저 알아두어야 할 개념이다. 1. primitive(원시 타입) 변수 primitive(원시 타입) 변수 : number, string, boolean, null, undefined, symbol let number = 2; 이렇게 primitive 타입 변수는 변수를 선언함과 동시에 메모리에 공간이 생기게 되고 그 공간에 데이터가 적재되어진다. let number = 2; let number2 = number; console.log(number); // 2 console.log(number2); // 2 이렇게 number2 ..

if(commentTime){ commentTime.forEach((element) => { const commentDate = new Date(Date.parse(element.id)); const currentDate = new Date(); // const diffMSec = currentDate.getTime() - commentDate.getTime(); // const diffSec = diffMSec / 1000; // 몇 초 차이 const diffMin = diffMSec / 1000 / 60; // 몇 분 차이 const diffHour = diffMSec / 1000 / 60 / 60; // 몇 시간 차이 const diffDay = diffMSec / 1000 / 60 / 60 / ..

event.target VS event.currentTarget 🎵event.target 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환 (즉 더 세밀하게 클릭된 요소를 기준으로 사용할 때) (event.target은 내가 이벤트를 건 대상만 발생하는 것이 아니라 그 자식(후손)도 될 수 있다) 🎶event.currentTarget 이벤트가 바인딩된 요소를 반환한다. 🎀 예시 이런 코드가 있다고 하면, 나는 div 태그를 클릭했을 때 삭제 작업을 진행하고 싶은 경우div태그에 onclick 이벤트리스너를 추가했다하더라도, 내가 아이콘 부분을 누르면 event.target은 div태그가 아니라 i태그가 event.target이 된다. 이것을 해결하기 위해서는 event.currentTarget을 ..

클래스(Class) 🍼 클래스(Class) vs 객체(Object) Class 붕어빵 틀에 비유 템플릿, 청사진이라고도 한다 클래스 안에는 데이터가 들어있지 않다 Object 붕어빵 틀로 만든 붕어빵 클래스에 데이터를 넣어서 만든 것이 객체 클래스를 이용해서 많은 객체를 만들 수 있음 붕어빵 클래스에 팥 데이터를 넣으면 팥 붕어빵, 크림 데이터를 넣으면 크림 붕어빵이 된다. 클래스는 ES6에 추가된 기능임 클래스가 없었을 때에는 function을 이용해서 바로 object를 만들었다(이게 prototype) 기존에 존재하던 프로토타입을 기반으로 하며 간편하게 쓸 수 있도록 문법적으로만 추가되었다고 해서 문법적 설탕(Syntatic sugar)이라고 한다. (여전히 클래스도 프로토타입 기반이다) 클래스 몸..

프로토타입 자바스크립트는 멀티 패러다임 프로그래밍 언어 - 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. - C++나 Java 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스,상속,캡슐화를 위한 키워드인 public, private, protected등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우도 있으나 클래스 기반의 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어임 - ES6에서 클래스가 도입되었으나 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아님 클래스는 생성..

안녕하세요, 이번 시간에는 여태 작성했던 코드를 함수화 해보겠습니다. WEB HTML CSS JavaScript 지난시간 까지 작성했던 코드를 보면 중복이 발생하고 있습니다. 소프트웨어를 만드는 과정에서 언제나 고심해야할 부분은 '어떻게 하면 중복을 제거할 수 있을까?' 입니다. 여기 있는 이 코드 중에서 중복인 부분이 있고 중복이 아닌 부분이 있습니다. fetch('html').then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) }) 저 'html' 이부분은 중복이 아닌 부분이고, 나머지는 중복인 부분 입니다. 그러면 어떻게 하면 중복을 제거할 수..