꾸생의 DevLog

[JS] 자바스크립트 이미지 압축 라이브러리

brower-image-compression 자바스크립트를 사용한 이미지 압축 라이브러리로 brower-image-compression을 사용하면 손쉽게 이미지의 파일 사이즈를 효과적으로 압축할 수 있다. 요즘은 스마트폰 카메라 성능이 날이 갈수록 좋아져 사진 한 장을 찍어도 10MB가 넘어버린다. 사진을 서버로 전송할 때, 서버의 부담을 줄이기 위해서 클라이언트 단에서 사진을 압축해 전송하면 서버의 부담을 크게 줄일 수 있다. browser-image-compression Compress images in the browser www.npmjs.com Install NPM > npm i browser-image-compression CDN Usage // you should provide one of ..

2021.09.16  

[JS] classList 속성 add, remove, contains, toggle 함수

자바스크립트 이벤트를 배울때 태그에 onClick 이벤트 속성을 자바스크립트 함수와 연결하여 사용했지만 이것은 효과적인 코딩 방법이 아니였다. HTML, CSS, JS는 각기다른 기능을 맡고 있기 때문에 연결되는 접점을 분리를 해주어야 효과적으로 관리할 수 있다. 이를 위해서 자바스크립트에서는 classList 함수를 사용하여 HTML 요소에 class 속성을 추가, 제거, 변경, 여부확인이 가능하다. JavaScript - Element.classList classList를 이용하여 해당 요소를 출력했을 때 DOMTokenList를 출력하며, 여기에는 배열의 형태로 클래스의 이름들이 저장되어있다. ele.classList.add(String) 해당 요소의 클래스 속성값을 추가, 같은 클래스명 있는 경우..

2021.03.23