브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다. 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 // 이터러..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 8.1 Array.from() 배열처럼 보이지만 배열이 아닌 개체를 받아 실제 배열로 변환해 반환한다. Apple Banana Orange const fruits = document.querySelectorAll(".fruits p"); const fruitArray = Array.from(fruits); console.log(fruitArray); // [p,p,p] const fruitNames = fruitArray.map( fruit => fruit.textContent); console.log(fruitNames); // ["Apple", "Banana", "Orange"] 아래와 같이 단순화할 수도 있다. const fruits = A..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 7.1 for (value of iterable) for...of 문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문이다. 따라서 이터러블 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에만 사용 가능하다. 사실 이 구문은 배워놔도 사용 할 일이 별로 없다. 보통 배열을 반복할 때에는 map 등의 배열 내장 함수를 많이 사용하기 때문이다. 기본 문법 const array = [1, 2, 4, 5]; for (let value of array) { // use strict 환경이 아닌 경우 let을 빼도 됨 console.log(value); } // 1 // 2 // 4 // 5 배..
💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 6.1 객체 디스트럭처링 // ES6 이전 var person = { first: "Alberto", last: "Montalesi" } var first = person.first; var last = person.last; // ES6 const person = { first: "Alberto", last: "Montalesi" } const { first, last } = person; 중첩된 객체 형태로 데이터가 주어진 경우에도 사용 가능하다. const person = { name: "Alberto", last: "Montalesi", links:{ social: { facebook: "https://www.facebook.com/alb..