자바스크립트6 [Javascript] onclick과 addEventListener의 차이 자바스크립트에서는 엘리먼트에 클릭 이벤트를 발생시킬 때 onclick()과 addEventListener('click', function(){}) 이 두 가지 방식을 사용한다. 둘 다 클릭 이벤트를 발생시킨다는 점에선 동일하지만 각각 차이점이 존재한다. 두 방법의 차이점에 대해 정리해보려고 한다. 1. 이벤트 덮어쓰기 vs 이벤트 누적 onclick은 이벤트를 여러 개 적용하는 것이 불가능하다. 만일 onclick 이벤트 핸들러를 이미 사용한 상태에서 새로운 onclick 이벤트를 추가한다면 이후에 추가된 이벤트가 기존의 이벤트를 덮어쓴다. addEventListener를 사용할 경우 여러 이벤트를 추가하더라도 누적되어 모든 이벤트가 동작된다. 클릭버튼을 이용하여 간단하게 예제를 만들어보았다. 버튼을 클.. 2021. 9. 21. [Javascript] Dayjs 사용법 정리 (Date Format, 날짜 계산하기 등) 이전 포스트에서는 자바스크립트 Date 객체로 날짜 계산하는 법과 DateFormat 지정하는 법, 주의사항에 대해 정리하였다. 현재 프로젝트에서 Date객체를 이용하여 모든 날짜를 처리하고 계산하고 있는데, 친구가 Dayjs 라이브러리라는 것을 알려주었다. Dayjs가 어떤 라이브러리인지, 사용법에 대해 구글링 해보았더니 Date객체에 비해 훨씬 포맷팅도 쉽고 생각보다 다양한 기능을 제공하기는 것 같아 한 번 정리해보려고 한다. 1. Dayjs 라이브러리란? Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다. 용량도 7.1KB로 기존에 많이 사용하던 Moment.js 에 비해 훨씬 가벼운 경량 라이브러리이다. Moment.js를 .. 2021. 8. 20. [Javascript] Javascript Date → Java LocalDate/LocalDateTime 변환 오류 프로젝트를 진행하다가 자바스크립트에서 Date 타입 변수를 자바로 보낼 때 typeMismatch 에러가 발생하였다. 사내 프로젝트를 진행하다가 발생한 에러이기 때문에 간단한 예제로 해당 오류를 재연해 보았다. 에러 Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult typeMismatch Field error in object 'reservation' on field 'checkInTime' Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanP.. 2021. 8. 12. [Javascript] 데이터 불변성(Immutability) 데이터 불변성(Immutability)이란? 자바스크립트에서 데이터는 원시 데이터와 참조형 데이터로 분류할 수 있다. * 원시 데이터 : String, Number, Boolean, undefined, null * 참조형 데이터 : Object, Array, Function(다른 함수의 인자로 사용되는 callback 함수로 사용이 가능하기 때문에 참조형 데이터에 해당) 1) 데이터 불변성 - 원시데이터 원시데이터가 메모리에 들어있을 경우 동일한 값을 참조할 경우 새로운 메모리에 할당되는 것이 아닌, 기존 메모리를 참조하도록 함 따라서, 단순하게 생각한다면 원시데이터는 a와 b의 값이 동일하면 a===b : true이고, a와 b의 값이 다르다면 a===b : false이다. let a = 1 let b.. 2021. 7. 9. [Javascript] 전개 연산자(...) 패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하고, 추가 내용을 살짝 덧붙여 포스팅하였습니다. 문제가 되는 내용이 있을 경우 댓글로 알려주신다면 바로 조치하겠습니다. :) 전개 연산자 (...) 전개 연산자는 말 그대로 객체나 배열을 전개할 수 있는 연산자이다. 전개 연산자를 이용하면 기존의 것을 건들이지 않고 새로운 객체를 생성할 수 있다. 1. 배열 배열에서 전개데이터를 사용할 경우 하나의 배열 데이터를 쉼표로 구분하는 각각의 아이템으로 전개하여 출력한다. 사용법은 단순하게 배열명 앞에 ...을 붙여주면 된다. const fruits = ['Apple', 'Banana', 'Cherry'] consol.. 2021. 7. 8. [Javascript] 구조 분해 할당(Destructuring Assignment) 패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하였습니다. 구조 분해 할당이란? 구조 분해 할당이란, 객체나 배열을 분해하여 각 속성을 개별적으로 할당하는 것을 말한다. 구조 분해 할당, 혹은 비구조화 할당이라고 부른다. 1. 객체 객체를 구조 분해하여 원하는 속성만 꺼내서 사용 할 수 있다. 👉 중괄호 사용. 객체의 속성명을 동일하게 명시하여 할당 객체 내의 속성이 아닌 다른 속성명을 사용할 경우 해당 변수는 undefined가 된다. const user = { name: 'Hope', age: 27, email: 'hope772948@gmail.com' } const { name, age, email, .. 2021. 7. 8. 이전 1 다음 반응형
