메모장

position이 absoulte인 요소의 위치를 width에 따라 설정하던 중 스크롤바의 생성 여부에 따라 위치가 달라졌습니다. 스크롤바 넓이를 제외한 넓이를 구하기 위해 다양한 width를 가져오는 속성에 대해 알아봤습니다. offsetWidth: offsetWidth는 요소의 전체 너비를 반환하는 속성입니다. 이 너비에는 요소의 가시적인 너비, 안쪽 여백(padding), 테두리(border) 및 수직 스크롤바의 너비가 포함됩니다. offsetWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다. clientWidth: clientWidth는 요소의 내용 영역의 너비를 반환하는 속성입니다. 내용 영역은 요소의 가시적인 너비와 스크롤바를 제외한 영역입니다. 내용 영역은 안쪽 여백(padd..

제이쿼리를 사용하지 못 하는 상황에서 한 element의 왼상단에 아이콘을 띄우는 작업을 하려고 했다. 처음에 style.top 속성(offsetTop과 동일)을 사용했는데 div안에 element가 있을 경우에 위치에 오류가 있었다. icon.style.position = 'absolute'; icon.style.top = element.style.top.replace('px', '') - 27 + 'px'; icon.style.left = element.style.left; 제이쿼리를 사용할 때 let top = $(element).offset().top let lfet = $(element).offset().left 제이쿼리를 사용하지 않고 직접 계산 function getElementAbsolut..

- Object.assign() Object.assign([], data) Object.assign()은 JavaScript에서 객체를 복사하는 메서드입니다. 첫 번째 매개변수는 대상 객체이고, 나머지 매개변수는 복사하고자 하는 소스 객체입니다. Object.assign([], data)는 빈 배열([])에 data 객체의 속성을 복사하여 새로운 배열을 생성하는 코드입니다. []는 빈 배열을 생성하는 것이며, data 객체의 속성들을 복사하여 새로운 배열로 만듭니다. - 예시 전체리스트를 객체의 특정 속성 값에 따라 분류할 때 this.AList.push(data) 데이터를 push하는데 이때 AllList의 객체를 참조하게 됩니다. 그래서 아래에서 children메뉴를 필터링 할 때 BList의 값이 ..

querySelector(): 선택자를 사용하여 첫 번째 일치하는 요소를 가져옵니다. querySelectorAll(): 선택자를 사용하여 모든 일치하는 요소를 가져옵니다. querySelector() querySelector() 메서드는 문서 내에서 특정 CSS 선택자에 해당하는 첫 번째 요소를 반환하는 메서드입니다. 이 메서드는 Document 객체뿐만 아니라 Element 객체에서도 사용할 수 있습니다. 다음은 querySelector() 메서드의 구문입니다: element.querySelector(selector); element: 요소의 하위 요소 중에서 선택할 요소입니다. Document 객체 또는 다른 Element 객체가 될 수 있습니다. selector: 선택할 요소의 CSS 선택자입니다..

기본적으로 JSON.parse() 메서드는 JSON 문자열을 JavaScript 객체로 변환하는데 사용하고 JSON.stringify() 메서드는 JavaScript 객체를 문자열로 변환하는데 사용합니다. 보통 파라미터로 각각 변환 대상인 객체나 문자열만 넣어서 사용했는데 JSON.stringify()를 사용할 때 undefined 값은 JSON에서 지원하지 않는 값이기 때문에 변환 과정에서 제외된다는 것을 알았습니다. 그래서 undefined를 ""(공백)으로 변환 시키기 위해서 JSON.stringify()의 매개변수 중 하나인 replacer을 사용했습니다. JSON.stringify() value: 변환할 JavaScript 객체나 값입니다. 일반적으로 객체를 전달하지만, 배열, 숫자, 문자열, ..

JavaScript에서 동등 비교(==)와 동일 비교(===)는 값의 비교를 수행하는 두 가지 비교 연산자입니다. 이 두 연산자는 값을 비교하는 방식에서 차이가 있습니다. 동등 비교 (==): 동등 비교(==)는 두 개의 피연산자가 같은 값을 가지는지를 비교합니다. 동등 비교는 값이 같은지 여부를 확인하기 전에, 필요에 따라 타입 간의 암시적인 타입 변환을 수행합니다. 이러한 타입 변환으로 인해 서로 다른 데이터 유형을 비교할 수 있습니다. 예를 들어, 숫자와 문자열을 비교하면 JavaScript는 문자열을 숫자로 변환하여 비교합니다. 10 == "10" // true true == 1 // true null == undefined // true false == "" // true 동일 비교 (===):..

자바스크립트의 draggable 속성과 dragstart, dragend 이벤트를 사용하여 요소를 드래그할 수 있습니다. draggable 옵션입니다. cancel: false는 드래그 가능한 요소 내의 특정 하위 요소를 클릭하여 드래그 작업이 취소되는 것을 방지합니다. 불투명도: 0.7은 드래그 동작 중 드래그 가능 요소의 불투명도를 설정합니다. snap: "[elem]"은 요소를 요소 클래스가 있는 다른 요소로 스냅하도록 지정합니다. snapMode: "둘 다"는 스냅이 수평과 수직 모두에서 발생해야 함을 나타냅니다. snap Tolerance: 10은 스냅이 발생해야 하는 스냅 대상으로부터의 거리(픽셀)를 지정합니다. stack: "[elem]"은 끌어온 요소의 z-index를 요소 클래스가 있는 ..

객체 분해 할당(Object Destructuring Assignment)은 ES6에서 추가된 기능으로, 객체의 속성들을 변수로 분해해서 할당하는 방법입니다. 객체 분해 할당은 객체의 속성에 접근해서 변수로 할당하는 것과 유사합니다. 다만, 객체 분해 할당을 사용하면 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다. 객체 분해 할당은 중괄호({})를 사용하여 객체를 선언하고, 변수 이름을 할당할 속성 이름으로 지정합니다. 이 때, 할당할 변수 이름은 객체의 속성 이름과 일치해야 합니다. 예를 들어, 다음과 같은 객체가 있다고 가정해보겠습니다. const person = { name: 'John', age: 30, city: 'New York' }; 이 객체를 분해해서 name, age, city 변수..

map() map() 함수는 JavaScript 배열에서 사용할 수 있는 내장 함수 중 하나로, 배열의 모든 요소를 변환하고 새로운 배열을 생성합니다. map() 함수는 각 배열 요소에 대해 콜백 함수를 호출하고, 콜백 함수가 반환한 값을 새로운 배열에 추가합니다. 이 때 원래 배열은 변경되지 않고, 새로운 배열만 생성됩니다. arr.map(callback(element, index, array), thisArg) callback: 각 배열 요소에 대해 호출할 함수로, 콜백 함수는 다음과 같은 매개 변수를 받습니다. element: 현재 처리 중인 배열 요소 index: 현재 처리 중인 요소의 인덱스 array: map() 함수가 호출된 배열 thisArg (선택 사항): 콜백 함수에서 this 키워드가..

ESLint ESLint는 자바스크립트 코드에서 문제를 검사하고 일관성 있는 코드 스타일을 유지할 수 있도록 도와주는 정적 코드 분석 도구입니다. ESLint는 사용자가 직접 규칙을 만들거나 다른 사용자가 만든 규칙을 사용할 수 있는데 이 때문에 코드의 문법에 문제가 없어도 규칙을 어기면 에러가 뜹니다. 미리 작성된 template기반으로 동적으로 Vue 코드를 생성해주는 프로그램을 개발중에 띄어쓰기, 줄바꿈 같은 규칙까지 지키면서 만들 수가 없어서 eslint-disable을 사용했습니다. Disable vscode의 Quick Fix에서는 두가지 disable 옵션이 있습니다. - Disable prettier/prettier for this line 에러 나는 코드 위에 해당 구문을 추가하는데 이는..