javascript8 [HTML, JavaScript] 드래그 앤 드롭(Drag and Drop) 이벤트 알아보기 [JS 이벤트] 드래그 앤 드롭이란? draggable 가능한 요소를 마우스로 클릭하여 드래그하고 마우스 버튼을 떼면서 요소를 드롭하는 것을 드래그 앤 드롭 기능이라고 한다. 드래그 앤 드롭 속성 draggable Item1 먼저 HTML에서 요소가 드래그 이벤트를 받기 위해선 draggable 속성이 true 값을 가져야 한다. ※ 태그 중에 기본적으로 draggable이 true인 값은 대표적으로 태그가 있다. 반면에 태그는 드래그가 불가능 하다. 드래그 앤 드롭 이벤트 종류 dragstart const item = document.querySelector(".item"); item.addEventListener("dragstart", e => { console.log(e.target); // 드래그를 시작한 요소가.. 2023. 10. 12. [JavaScript] IndexedDB 사용법 알아보기 [JS기초 함수] - 띵코딩 on Code IndexedDB란? IndexedDB는 웹페이지에 내장된 데이터베이스로 서버가 아닌 클라이언트에 데이터를 저장하고 사용한다. 인덱스를 사용하기 때문에 탐색면에서 서버에 비하면 속도가 빠르고, 비용도 절감되며, 서버로부터 사용자의 정보를 노출시키지 않기 때문에 보안상에서도 보다 안전하다. 이 외에 Cookie, LocalStorage 내장 데이터베이스도 존재하지만 이 둘은 저장공간이 크지않고 동기식으로 작동되며 데이터타입이 문자열인 것만 저장되기 때문에 IndexedDB에 비하면 성능이 뛰어나지 않다. 확실히 다른것에 비해 성능이 뛰어나지만 IndexedDB는 비동기식이며, 사용 난이도가 어렵다는 단점이 있다. IndexedDB 구조 여러개의 객체들을 오브젝트 스토어에 넣고, 그 오브젝트 스토어들을 묶어.. 2023. 10. 3. [CSS] box-sizing 사용법 알아보기 - 띵코딩 on Code box-sizing이란? box-sizing은 요소의 너비와 높이를 어떻게 계산할 것인지 지정하는 속성이다. 우리는 보통 요소의 크기를 정하고, 안쪽 여백이나 테두리를 넣게되면 크기 + (여백or테두리)만큼의 크기를 얻게된다. 하지만 부모 컨테이너 내에서 자식 컨테이너가 (여백or테두리)를 갖게되면 문제가 될 수 있다. 자식 컨테이너가 부모 컨테이너보다 크기가 커져 틀에 벗어나거나 겹치는 상황이 나올 수 있기 때문이다. box-sizing속성을 이용하면 이러한 여백or테두리의 크기를 고려하여 원하는 크기를 얻을 수 있다. box-sizing의 주요 속성 content-box box-sizing: content-box; content-box는 가장 기본이 되는 박스 크기 결정 방법이다. 위에 예시는 자식.. 2023. 9. 15. [JavaScript] find() 사용법 알아보기 [JS기초 함수] - 띵코딩 on Code find()란? 배열의 각 요소에 대해 주어진 콜백 함수(reducer)를 실행하면서 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. Array.find() 구문 Array.find( callback( element, index, array ) => { return 참이되는 첫 번째 값 } element : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : find를 호출한 배열 (위 예시에서는 Array) Array.find() 설명 find() 메소드는 각 요소에 대해 callback 함수를 실행하여 참을 반환하는 첫 번째 값을 즉시 반환합니다. 만약 어느 요소도 그렇지 않았다면 undefined를 반환합니다. find() 메소드는.. 2023. 9. 6. [JavaScript] String 객체의 메소드, 속성 알아보기 [JS기초 함수] String이란? 문자열(string)은 따옴표("") 안에 텍스트의 집합을 말합니다. var str = "Hello, I'm myeong-coding." 문자열은 위와 같은 예시로 표현할 수 있습니다. 이러한 문자열 객체가 갖고있는 다양한 메소드와 속성에 대해 알아보겠습니다. 속성 length 문자열의 가장 중요한 속성은 length입니다. var str = "hello"; console.log(str.length); // 5 length는 문자열의 길이를 반환해줍니다. 가장 유용하고 빈번하게 사용됩니다. 메소드 charAt() var str = "HelloWorld"; console.log(str.charAt(0)) // 'H' charAt( index ) : 매개변수에 인덱스를 인자로 주어 문.. 2023. 9. 3. [JavaScript] filter() 사용법 알아보기 [JS기초 함수] Filter()란? 배열에 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수 내에 true로 반환되는 값들로 새로운 배열을 생성합니다. Array.filter() 구문 Array.filter( callback( element, index, array ) => { return 참이 되는 값; } element : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : filter를 호출한 배열 (위 예시에서는 Array) Array.filter() 설명 filter() 함수는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해 ture로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback 함수는 할당된 값이 있는 배열의 인덱스에 대해.. 2023. 8. 31. 이전 1 2 다음
