표준내장객체 (standard built-in object) Date에 관한 내용을 정리했다. 자세한 내용은 mdn 문서를 참조하자. // Date const date = new Date(); console.log(date); // Sat Apr 15 2023 20:24:49 GMT+0900 (한국 표준시) // new Date(년, 월, 일, 시, 분, 초); console.log(date.getFullYear()); // 2023, 연도를 반환 // setFullYear : 연도를 설정(setter) // getMonth(), setMonth() // 날짜 인스턴스의 월을 반환하거나 지정 // 0부터 시작 (1월 = 0, 2월 = 1, 12월 = 11) console.log(date.getMonth(..
javascript
클래스에 대해서 너무 간단하게 쓴 것 같아서 상속과 정적메서드, get과 set에 대해 정리해보았다. 자바스크립트에서 상속은 extends 키워드를 이용해서 적용한다. 상속을 사용하면 기존 클래스를 다른 클래스로 확장할 수 있다. 즉, 이전에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다. 정적메서드는 정적 메서드는 클래스와 연결되어 있지만, 해당 클래스의 임의의 인스턴스와는 연결되어 있지 않다. 이러한 메서드에는 클래스의 객체가 입력 인수를 필요로 하지 않는다. 따라서, 클래스의 객체를 생성하지 않고 정적 메서드를 호출할 수 있다. 대표적인 예로 Math에 내장된 함수나 Number에 내장된 함수들이 있다. (Number.isNaN 등) getter와 setter는 그 뜻에서 알 수 있듯이, 값을..
숫자의 표준내장객체는 아래 서술한 것보다 많이 존재한다. 자세한 것은 mdn문서를 참조하자. // toFixed(), 숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환. const num = 3.1415926535; console.log(num.toFixed(2)); // 3.14 (string) console.log(parseFloat(num.toFixed(2))); // 3.14 (number) console.log(typeof num.toFixed(2)); // string console.log(typeof parseFloat(num.toFixed(2))); // number // toLocaleString(), 숫자를 현지 언어 형식의 문자로 반환. const num1 = 1000..
표준내장객체는 아래 서술한 것보다 더 많다. 자세한 건 mdn문서를 살펴보자. //표준내장객체(Standard Built-in Object) // 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. const str = "Hello world!" //length, 문자열의 길이를 반환 console.log(str.length); //12 //includes(), 대상 문자에 주어진 문자가 포함되어 있는지 확인한다.(Boolean) console.log(str.includes('Hello')); //true //indexOf(), 대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환. 일치하는 문자가 없으면 '-1'을 반환. console.log(str.indexOf('world'));..
자바스크립트는 프로토타입 기반 언어이지만 클래스를 사용할 수는 있다. class User { constructor(first, last) { this.firstName = first; this.lastName = last; } getFullName() { return `${this.firstName} ${this.lastName}` } } const bayern = new User('Tomas', 'Muller'); const munich = new User('Joshua', 'Kimmich'); console.log(bayern.getFullName()); //Tomas Muller console.log(munich.getFullName()); // Joshua Kimmich 클래스의 정의 클래스는 객..
javascript는 프로토타입 기반 언어로, 클래스를 사용할 수는 있음 (ES6) 요즘은 클래스를 사용하지만, 그것을 공부하기 위해 기초적인 원리를 알아야 함 function User(first, last) { this.firstName = first; this.lastName = last; } const cat = new User('Haerin','Kang'); const siuuu = new User('Cristiano', 'Ronaldo'); console.log(cat); // User { firstName: 'Haerin', lastName: 'Kang' } console.log(siuuu); // User { firstName: 'Cristiano', lastName: 'Ronaldo' } ..
this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this..
GSAP 라이브러리는 JavaScript의 애니매이션 라이브러리이다. CSS와 Vanilla JavaScript만으로 구현할 수있는 기능이 많지만, GSAP 라이브러리를 이용하면 세밀한 움직임과 동작의 연속성을 표현할 수 있다. GSAP은 The GreenSock Animation Platform의 줄임말로 프론트엔드 개발자들이 많이 쓰는 라이브러리이다. 설치방법은 다음과 같다. CDN 방식 NPM 방식 npm install gsap 자주 사용해보도록 해야겠다.
lodash 라이브러리는 javascript의 인기있는 라이브러리로 객체, 배열 등의 데이터 구조를 쉽게 변환하여 사용하게끔 도와준다. lodash라는 이름은 _를 사용하기 때문에 따온 것으로 보인다. 나는 스크롤 내릴 때 콘솔이 여러 번 찍히는 것을 막기 위해 throttle 메서드를 사용했다. window.addEventListener('scroll', _.throttle(()=>{ console.log('scroll!')}, 300)); lodash 라이브러리의 설치 과정은 다음과 같다. cdn 방식 npm 설치 방법 npm i -g npm npm i --save lodash import 방법(npm 설치시) import _ from 'lodash'; 자세한 사항은 https://lodash.com..
form 이벤트를 공부하는 중에 새로운 친구를 발견했다. 예전에 들었던 거 같은데 까먹은 건지... 새로운 건지 알 수가 없는 노릇이다. 갈 길이 왜 이렇게 먼 거 같지. 그래도 하다보면 전보다는 나아질 거라는 생각으로 공부해야겠다. event.preventDefault() 폼을 제출하는 경우 기본적으로 페이지가 새로 고침 된다. 하지만 페이지가 새로 고침 될 경우 input 필드에 있는 값도 초기화 되어 버리기 떄문에, 이런 기본 동작(새로 고침)을 막기 위해서 event 객체에서 제공하는 preventDefault() 메서드를 사용한다. 여담으로 form을 넣는 이유가 이후에 백앤드와 정보 전달을 하기 위해서라 addEventListener에 click보다 submit으로 하는 게 좋다고 한다.
