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. [JavaScript] 이미지 파일 업로드 하기 [JS기초 함수] - 띵코딩 on Code FileReader 객체란? FileReader는 웹페이지 상에 파일을 업로드하여 파일의 내용을 보여주는데 도움을 주는 객체이다. 세부적으로는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위하여 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다. 여기서 File객체는 input 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체 정보를 제공한다. FileReader 생성자 구문 var reader = new FileReader(); // reader는 FileReader 속성, 이벤트, 메서드를 사용할 수 있다. FileReader 속성 FileReader.error 파일을 읽는 도중에 발생한 에러를 나타낸다... 2023. 9. 20. [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 다음
