How to Resolve Unintended Slide Events When Clicking Inside a Swiper Slide 이번 포스팅에서는 Swiper 캐러셀 내부의 특정 영역을 클릭 했을 때, 사용자가 의도하지 않은 스와이퍼 슬라이드 이벤트가 발생되는 현상을 해결하는 방법을 다뤄보겠습니다. 이 문제를 예를 들어 설명하자면 스와이퍼에 동영상 영역이 있고 그 동영상을 제어하는 재생/정지 버튼을 만들었는데, 그 버튼을 클릭했을 때 의도하지 않게 다음 슬라이드로 넘어가는 현상과 같은 문제입니다. 그럼 해결 방법을 알아보기 전, 해결에 사용되는 개념을 간단히 정리해보겠습니다. 1. event.stopPropagation() event.stopPropagation() 메서드는 이벤트가 캡처링/버블링 ..
이번 포스팅에서는 모바일에서 touchmove 이벤트가 일어날 때 그 터치하는 영역의 좌표값을 따라다니는 요소를 만들어보도록 하겠습니다. 이러한 기술은 복권을 긁는 UI, 그림을 그리는 기능 등을 만들 때 유용하게 사용할 수 있습니다. 1. Preview 오늘 만들어볼 화면을 미리 살펴보겠습니다. 마리오가 그려진 박스 안에서 사용자가 터치 이벤트를 발생시킬 경우, 즉 모바일 환경에서 마리오를 스와이프 하거나 문지를 경우 코인이 나타나서 손가락이 터치하는대로 따라다닙니다. 그리고 사용자가 손을 떼면 동전이 사라집니다. 마리오 바깥 영역에서 터치를 시작하면 이벤트가 발생하지 않습니다. 오늘은 이런 결과물을 만들어 보겠습니다. 그럼 먼저 해결 방법을 알아보기에 앞서 해결 방법에 사용되는 개념을 간략히 정리해보..
이번 포스팅에서는 position: sticky 인 요소가 stuck 상태인 경우, 즉 브라우저 상에서 원하는 위치에 달라 붙었을 경우에만 해당 요소에 CSS를 적용하는 방법에 대해서 알아보겠습니다. 이러한 작업은 주로 웹사이트의 헤더가 스크롤을 내리면 상단에 달라붙어야 하는 경우, 해당 헤더의 스타일을 바꾸는 경우에 필요합니다. 물론 그 밖에 다른 영역들에도 적용이 필요한 경우도 있겠죠. 먼저 해결 방법을 알아보기에 앞서 해결 방법에 사용되는 개념을 간략히 정리해보겠습니다. 1. IntersectionObserver란? Intersection observer는 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 ..
브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다. 1. 문제 확인 먼저 앞서 서론에서 이야기한 문제를 직접 확인해보겠습니다. 예시 화면은 좌, 우측의 각각의 영역이 있고 전체 너비 100%를 각각 60%, 40%로 나눠 가집니다. 좌측 영역에는 swiper 플러그인이 사용되었고, 우측 영역은 일반 콘텐츠이며 옆에 있는 QUICK 버튼을 클릭하면 열렸다 닫히는 형태의 UI 입니다. See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 12.0 클래스 MDN에서는 클래스를 다음과 같이 설명 클래스는 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다. 클래스는 이미 구축되어 있던 프로토타입을 기반으로 추가된 문법상으로 달달한, 즉 편리함을 제공하는 문법 클래스와 오브젝트 (Class vs. object) class class란 조금 더 연관있는 것들을 묶어 놓은 fields와 methods의 집합 template declare once no data in (data가 들어갈 fields만 들어있음) object object는 class에 직접 data를 넣어 만든 insta..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 11.1 심벌의 고유성 심벌은 ES6에 처음 추가된 원시 자료형으로 항상 고유성을 지님 const me = Symbol("Alberto"); console.log(me); // Symbol(Alberto) const clone = Symbol("Alberto"); console.log(clone); // Symbol(Alberto) console.log(me == clone); // false console.log(me === clone); // false 11.2 객체 속성에 대한 식별자 객체 속성의 식별자로 사용 가능 동일한 속성명이 각각 고유하게 존재해야 할 경우 사용 가능 const office = { [Symbol("Tom")]: "CE..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 10.1 변수를 키와 값으로 하는 객체 만들기 객체의 key와 value가 동일할 경우, value 값을 생략하여 표현 가능 const name = "Alberto"; const surname = "Montalesi"; const age = 25; const nationality = "Italian"; const person = { name, surname, age, nationality, }; console.log(person); // {name: "Alberto", surname: "Montalesi", age: 25, nationality: "Italian"} 10.2 객체에 함수 추가하기 일반 함수 // ES5 const person = ..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 9.1 The Spread operator (스프레드 연산자) spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이 문법을 사용하면 이터러블한 요소를 개별 요소로 분리하거나, 객체 혹은 배열을 펼칠 수 있음 기존의 배열 혹은 객체를 건드리지 않고 새로운 배열 및 객체를 생성해야 하는 경우 유용하게 사용할 수 있음 → 기존의 것을 건드리지 않고 새로운 것을 만든다는 것이 핵심 // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // 이터러..