본문 바로가기
728x90

프론트엔드/Javascript58

[JavaScript / 자바스크립트] 기준 날짜로 부터 시간 차이 구하기 feat. moment js [Javascript / 자바스크립트] 기준 날짜로 부터 시간 차이 구하기 feat. momentjs (방금전 초전 분전 시간전 달전 년전) // 날짜 차이 export const getDiffStr = (start, end) => { const startTime = moment(start); const endTime = moment(end); const years = startTime.diff(endTime, "years"); const months = startTime.diff(endTime, "months"); const days = startTime.diff(endTime, "days"); const hour = startTime.diff(endTime, "hour"); const minutes .. 2022. 4. 28.
[JavaScript] Console (출력) 관련 여러 매서드 자바스크립트 / Javascript Console 관련 여러 매서드 개발 하다 보면 디버깅을 위해 Console에 해당 상태나 값 등을 출력해볼때가 많은데 이를 Console.log() 만으로 표현하기에는 약간의 부족함이 느껴진다 Console 이라는 객체에는 log 매서드 이외에도 출력 관련 메서드가 몇개 더 있는데 해당 메서드를 이용하여 프로젝트시 각 상태별 조금더 가독성 높은 출력을 시도해 보자 🌈 기본 형태 //일반 메시지 출력 console.log() //정보 메시지 출력 console.info() //경고 메시지 출력 console.warn() //에러 메시지 출력 console.error() 🌈 출력 결과 2021. 7. 26.
[Javascript ES6] 자바스크립트 배열 복사하기 & 합치기 & 요소 추가하기 [자바스크립트] Javascript 배열 복사 / 합치기 / 요소 추가하기 🌈 기본 형태 //복사하기 const newArray = [...oldArray]; //합치기 const resultArray = [...FirstArr,...SecondArr]; //복사하기 + 요소 추가 const copyArr = [...arr,요소]; 🌈 샘플 예제 : 복사하기 const oldArr = [1,2,3]; const newArr = [...oldArr]; console.log(newArr); 💡 출력 결과 [1,2,3] 🌈 샘플 예제 : 합치기 const firstArr = [1,2,3]; const secondArr = [4,5,6]; const resultArr = [...firstArr,...second.. 2021. 6. 23.
[Javascript / ES6] 객체 키 이름으로 직접 접근하기 {key1,key2} = object [자바스크립트 / Javascript] ES6 객체 내 키 이름으로 직접 접근하기 ES6 새로 추가된 문법으로 기존에 접근 방식에 업그레이드 된 방식으로 모듈을 import할때 자주 접했던 문법일 것이다 🌈 기본 형태 const object = { key1,key2 } //원래 키이름으로 접근 원할시 const {key1, key2} = object; //다른 이름으로 접근 원할시 const {key1:newKey1, key2:newKey2} = object; 🌈 샘플 예제 const person = { name : 'goodmemory', age : 10 }; const {name, age} = person; console.log(name,age); 🌈 출력 결과 goodmemory 10 2021. 6. 23.
[Javascript] 프로토타입 (Prototype) 간단한 이해 [Javascript / 자바스크립트] 프로토타입 Prototype 간단한 이해 자바스크립트 프로토타입에 대한 여러 자료를 검색 도중 프로토 타입 자체가 약간 복잡한 개념이라 그런지 대부분의 관련 자료를 검색했을때 이해가 잘 되지 않았다. 그래서 최대한 내가 이해한 내용을 바탕으로 블로그의 취지에 맞게 최대한 간단하게 메모하고자 한다 아래 두개의 예제는 객체 생성 함수 (Person)을 만들고 속성(name,age) 및 메소드(print)를 초기화하기 예제인데 모양만 다를뿐 같은 의미를 가진 코드이다 예제 1 일반적인 속성 및 메서드 추가 //일반적인 객체의 속성 및 메서드 초기화 function Person(name,age){ this.name = name; this.age = age; this.pri.. 2021. 6. 11.
[Javascript] 자바스크립트 클래스 상속에서 super의 두가지 의미 [Javascript / 자바스크립트] 객체지향 (클래스 / Class) 상속에서 super의 두가지 의미 1. 자식 클래스 내에서 부모클래스의 생성자 역할 2. 자식 클래스에서 부모 클래스의 메소드 접근 역할 기본 형태 class 부모클래스 { constructor(변수1,변수2){ this.변수1 = 변수1; this.변수2 = 변수2; } 메소드(){ //기능 ... } } class 자식클래스 extends 부모클래스 { constructor(변수1, 변수2, 변수3){ //super키워드로 부모클래스 생성자 호출 super(변수1,변수2); this.변수3 = 변수3; } 메소드2(){ //부모 클래스의 메소드 호출 super.메소드(); //추가할 자식 클래스만의 기능 ... } } 샘플 예제.. 2021. 6. 9.
[Javascript] 다른 자바스크립트 파일 불러오기 Export / Import [자바스크립트] 다른 자바스크립트 파일 불러오기 Export / Import main.js에 play.js파일 불러오기 기본 형태 : Export //Export (내보내기) //상수, 변수, 클래스, 함수, 객체 가능 export (내보낼모듈명); //Exports (내보내기) //상수, 변수, 클래스, 함수, 객체 가능 exports (내보낼 모듈명1); exports (내보낼 모듈명2); exports (내보낼 모듈명2); 기본 형태 : Import //Import //한개 모듈 내보내기 했을 경우 import 내보낸모듈명 from '모듈의 절대 or 상대 경로'; //두개 모듈 이상 내보내기 했을 경우 import {모듈1, 모듈2 ...} from '모듈의 절대 or 상대 경로'; //모듈을 다.. 2021. 6. 7.
[Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 element.matches(CSS Selector); : boolean 샘플 예제 결과 출력 2021. 6. 2.
[Javascript] 타이머 / 카운트다운 / 멈추기 setInterval / clearInterval [자바스크립트 / Javascript] 타이머 / 카운트 다운 / 멈추기 setInterval : 일정 시간 (millisecond) 마다 반복하여 함수 실행 clearInterval : 일정 시간 마다 반복되는 setInterval 실행 종료 기본 형태 //1000밀리세컨드 (1초) 마다 콜백함수 실행 let play = setInterval(콜백함수,1000); //play 멈추기 clearInterval(play); 샘플 예제 실행 결과 2021. 5. 27.
[Javascript] 이벤트 버블링 방지 stopImmediatePropagation [자바스크립트 / Javascript] 이벤트 버블링 방지 stopImmediatePropagation stopImmediatePropagation과 비슷한 역할을하는 stopPropagation이 있는데 이들은 비슷하면서도 다른 성격을 가지고 있다 stopPropagation 같은 경우에는 상위 관련 다른 모든 이벤트 버블링 차단 기능을 수행하고 stopImmediatePropagation 같은 경우에는 상위 및 현재 레벨에 걸려있는 관련 이벤트 모두 동작하지 않도록 중단하는 역할을 하는데 하단의 예제를 통해 자세히 알아보도록 하자 기본 형태 //이벤트 상위 전파 중단 event.stopPropagation(); //이벤트 상위, 현재 레벨에 걸린 다른 이벤트 또한 동작 중단 event.stopImme.. 2021. 5. 25.
728x90

티스토리툴바