What I Learned Today브라우저의 기본 작동을 방지해야 할 경우에는 어떻게 해야할까.이벤트 객체의 preventDefault() 메서드를 실행해야 한다.이때 브라우저는 이벤트 객체의 defaultPrevented 속성을 true로 바꿔준다.요소.addEventListener('click', (e) => { e.preventDefault() console.log(e.defaultPrevented) // true}) 이벤트 전파는 세가지 단계가 순차적으로 발생한다. (캡쳐링 -> 타겟 -> 버블링)이벤트 버블링 - 자식에서 부모로 올라가는 형태로 이벤트가 전파된다. (window까지)대부분의 이벤트는 버블링으로 처리된다.그래서 이벤트가 있는 요소를 클릭하면 부모의 요소까지 이벤트가 전파된다...
What I Learned Today오늘은 캐러셀 (Carousel)에 대해 실습을 해보았다.캐러셀 : 가로 방향으로 배치된 콘텐츠 목록을 포함한다.캐러셀의 네 가지 요소콘텐츠 영역 (Contents)이전 탐색 버튼 (Previous Button)다음 탐색 버튼 (Next Button)인디케이터 (Indicators, dots) 이전에 배운 것들로 캐러셀을 구현했다.querySelector를 사용해서 각 요소들을 뽑았다.eventListener를 통해 이벤트를 제어했으며getComputedStyle, style, setProperty, getPropertyValue 등을 사용해서 스타일을 설정했다.그리고 다양한 DOM 탐색 기법을 사용하여 요소 간의 연결을 도왔다. 그리고 키보드 접근성을 위해서 sele..
What I Learned Today때로는 요소의 크키, 위치 정보를 알아야 할 때가 있다.또는 문서 요소에서 어디에 위치해있는지 알아야 할 때도 있다.이런 경우 getBoundingClientRect() 메서드를 사용한다.getBoundingClientRect() 메서드는 뷰포트에서 요소까지 거리를 픽셀 단위로 변환해준다.// 이런식으로 사용하면 된다.const DOMRect = 요소.getBoundingClientRect()DOMRect.가져올정보 DOM 탐색 (Traversal)은 인접한 요소에서 하나의 다른 요소를 선택하는 것이다.DOM 탐색의 방법아래로 탐색 (자식 또는 자손 요소)querySelector() - 특정 요소에서 아래쪽 방향으로 탐색querySelectorAll() - 특정 요소에..
What I Learned Today코드가 복잡한 JS에서는 유틸리티 함수를 만들어두면 매우 편하다.// CSS 속성 이름을 전달하면 CSS 스타일 값을 반환해주는 함수function getStyle(element, propertyName, pseudoElement) { const elementStyles = getComputedStyle(element, pseudoElement) const propertyValue = elementStyles.getPropertyValue(propertyName) return propertyValue}// CSS 스타일을 설정하는 함수function setStyle(element, propertyName, propertyValue) { // 요소에 스타일 적용(..
What I Learned Today오늘은 아코디언을 실습해보며 루프를 연습했다.아코디언 : 정보를 펼치거나 숨길 수 있는 UI 컴포넌트다.닫혀있을 땐 헤더만 보이고 열면 내용이 표시된다. 이런 마크업이 있을때 치즈 치즈는 우유에서 유래한 식품으로, 우유 단백질인 카제인을 ..
What I Learned TodayJS에서 루프문을 알지 못한다면 손과 눈은 매우 바쁠것이다.// 루프를 사용하지 않을 때 100번 움직이기function move() { ...}move()move()...move()하지만 루프문을 사용한다면 매우 간단하게 사용할 수 있다. 루프란?명령어를 프로그램 내에서 일정하게 반복해서 실행하는 것을 말한다.루프는 조건이 충족될 때까지 반복하므로 프로그래밍 작업의 효율성을 높인다.while, do while, for 과 같은 다양한 유형의 루프가 있고 각자 고유한 용도가 있다. while 문// 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다.// 하지만 조건이 계속 참이면 무한 루프가 되어버린다.while (조건) { ...}// 특정 상황에서 코드를 건..
What I Learned Today오늘은 배열과 배열 메서드에 대해 배우고 실습했다. JS에서 목록을 나타내는 데이터 타입을 배열이라고 한다.배열은 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체를 말한다.// 배열을 생성하는 정석적인 방법. (new 호출 생략 가능)const arrayName = new Array("item1", "item2", ...)// 배열을 가장 쉽게 생성하려면 대괄호([])를 사용한다.const arrayName = ["item1", "item2", ...]// 배열은 모든 유효한 JS 값을 포함할 수 있다.// string, number, boolean, object, array 등...// 배열은 모든 내용이 한 줄에 작성되면 읽기 어려워질 수 있다.// 각 항..
What I Learned Today커스텀 콜백이란 사용자가 직접 정의한 콜백 함수를 말한다.const button1 = document.querySelector('.button-1')const handleActive = () => { button1.classList.add('is-active')}const handleInactive = () => { button1.classList.remove('is-active')}mouseenter(button1, handleActive)mouseleave(button1, handleInactive)// --------------------------------------------------------------------------click(document...
What I Learned TodayJS에서 이벤트는 어떤 일이 발생했음을 알려준다.사용자가 무언가를 클릭(click)하면 클릭 이벤트가 발생사용자가 키보드의 키(key)를 누르면 키보드 이벤트가 발생이 외에도 다양한 이벤트가 있다.이벤트를 수신하려면 이벤트 리스너가 필요하다.요소에 발생한 이벤트를 수신하기 위해 리스너를 추가할 수 있다.element.addEventListener('type', () => {})// type은 이벤트의 타입을 말한다.// () => {} 함수는 이벤트가 발생할 때 마다 호출된다. 클릭 이벤트클릭 가능한 버튼 요소저런 마크업이 있다고 가정해보자. 버튼을 클릭하면 인터렉션이 동작하도록 하고싶다면const button = document.querySelector('button..
What I Learned Today부정 연산자부정 연산자는 참인 값과 거짓인 값을 뒤집는다.기호는 "!" 를 사용하고 결과는 이렇다.!참 -> 거짓 / !거짓 -> 참부정 연산자를 사용하면 조건이 거짓일 때 실행되도록 할 수 있다.이중 부정은 참을 참으로 변경한다.Boolean() 함수를 대신하여 사용할 수 있다.기호는 "!!" 를 사용하고 결과는 이렇다.!!참 -> 참 / !!거짓 -> 거짓 Undefined는 값이 없음을 나타내는 값이다.무언가 명시적으로 정의되지 않았을 때 값이 없다고 한다.변수를 선언했지만 값을 할당하지 않았을 때 undefined라고 나온다.또한 값을 반환하지 않는 함수가 기본으로 반환하는 값도 undefined다.Null은 빈 상태를 나타내는 값이다.개발자는 명시적으로 값이 ..
