# window.matchMediacss의 Media Query로 반응형을 구현하는 것 처럼  javascript로 화면 상의 인터랙션을 구현하게 될 때에도 반응형에 대응해야할 경우가 발생합니다. css의 경우, media 쿼리를 사용하여 원하는 break point에서 변경을 할 수 있듯이 javascript의 경우에는 window.matchMedia를 사용하여 해당 break point에서 원하는 로직을 실행할 수 있습니다. # 개요 / 주요 코드## window.matchMedia()Window.matchMedia() 메서드는 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환합니다. 주요 코드const mobileMedia = window.matchMedia(..

javascript events : animationstart, animationend구현 해야 할 UI 중에 하나의 애니메이션이 끝나면,이어서 그 다음 애니메이션이 나와야 하는 경우가 생겼습니다.  위 이미지처럼 화살표 애니메이션이 진행하다가 끝나면, 이어서 다음 애니메이션이 나와야 하는 상황.평소처럼 animation에 딜레이를 적용하여 이어진 애니메이션 처럼 연출하거나,라이브러리를 사용할 수도 있겠지만,  라이브러리를 사용하기에는 간단한 애니메이션이고,딜레이로 작업하려고 생각해보니 반응형 화면 크기 별로 애니메이션 진행 시간을 다르게 적용해야 되서, 화면 크기 별로 다르게 delay 시간을 적용해야 하는 점이 비효율인 것 같아서, 애니메이션 처리 방법에 대해 인터넷에서 찾아보다가 javascript..

onclick vs addEventListener javascript에서는 요소에 클릭 이벤트를 발생시킬 때 onclick과 addEventListener 두가지 방식을 사용합니다. 둘 다 클릭 이벤트를 발생시키지만 각각 차이점이 존재합니다. 1. 이벤트 덮어쓰기 vs 이벤트 누적 onclick 이벤트를 여러 개 적용하는 것이 불가능. click 이벤트 핸들러가 이미 있는 상태에서 onclick으로 이벤트를 추가한다면 기존의 이벤트를 덮어씁니다. addEventListener addEventListener를 사용하여 여러번 이벤트를 추가하면 모든 이벤트가 누적되어 동작합니다. 2. 브라우저 호환성 onclick 모든 브라우저에서 호환이 가능하다. addEventListener IE 6,7,8 버전에서는 ..

목차 01. Console 02. Cookie, Storage 03. Location # Console 콘솔에 메시지나 객체를 출력합니다. console .log() // 일반 메세지 .warn() // 경고 메세지 .error() // 에러 메세지 .dir() // 속성을 볼 수 있는 객체를 출력 ## 예시 코드 console.log(document.body); console.warn(document.body); console.error(document.body); console.dir(document.body); javascript에서는 body 요소를 하나의 객체 데이터로 취급합니다. console.dir를 사용하면 html로 표시하는 것이 아니라 javascript의 객체 모양으로 출력합니다. #..

# ECMAScript 2023 살펴보기 - ECMAScript 2023 명세서 : https://tc39.es/ecma262/2023/#sec-numbers-and-dates ECMAScript® 2023 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc..