변환

[JS] 배열을 객체로 변환 (Array to Object)

Object.fromEntries() 메서드 const entries = [ ['first', 'apple'], ['second', 7], ]; const object = Object.fromEntries(entries); console.log(object); // {'first': 'apple', 'second': 7} 다음과 같이 key-value 형식으로 갖추어진 배열은 Object.fromEntries() 메서드를 사용하면 객체로 변환하여 반환해 줍니다. forEach(), reduce() 메서드 const array = ['apple', 'banana', 'mango']; // 1. const object = {}; array.forEach((value, index) => { object[ind..

[JS] HEX, RGB 색상코드 변환하기

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다. 완성 코드 See the Pen RGB to HEX by hyukson (@hyukson) on CodePen. HEX 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다. RGB (red, green, blue) 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다. 예시 → 255, 255, 255 = ( FFFFFF ) 코드 const getHEX = (RGB) => { const colors = RGB.split(","); return colors .map(color => Number(color) .toString(16) .p..

[JS] 캔버스(Canvas) 이미지 다운로드

A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다. 예제 코드 See the Pen drawing by hyukson (@hyukson) on CodePen. 코드 // 다운로드할 캔버스 const $canvas = document.querySelector("canvas"); // A DOM 생성 const $link = document.createElement("a"); $link.download = "파일명.png"; $link.href = $canvas.toDataURL("image/png"); // element에 마우스 클릭 $link.click(); document.createElement 메서드..

[JS] 파일 용량(사이즈) 체크, 변환하기

흔히 사용하는 데이터의 크기로는 KB, MB, GB 등이 있습니다. 이때 KB는 1,024Byte이고, MB는 1,024KB입니다. 해당 코드와 같은 파일을 첨부하는 박스에서 파일을 선택하면 fileSize 함수로 해당 요소를 보내 선택한 파일 요소의 정보를 가져와 활용할 수 있습니다. const fileSize = ($target) => { // 유저가 선택한 파일 가져오기 const file = $target.files[0]; // 해당 파일의 용량(사이즈) 정보 console.log(file.size); } 해당 코드로 파일의 정보를 가져올 수 있으며, File.size로 해당 파일의 바이트(Byte) 크기를 알 수 있습니다. 용량(사이즈) 변환하기 const getByteSize = (size) ..

[JS] 대문자, 소문자로 변환하기

const str = "abcDEF"; // 대문자 const upper = str.toUpperCase(); // ABCDEF // 소문자 const lower = str.toLowerCase(); // abcdef 대문자와 소문자로 변환시키는 메서드는 각 toUpperCase과 toLowerCase입니다. 문자열 -> 대문자는 String.toUpperCase메서드를 사용하며, 문자열 -> 소문자는 String.toLowerCase메서드를 사용하여 변환 할 수 있습니다.