flat과 flatMap은 이름에서 알 수 있듯이, 평탄화된 새로운 배열을 만들어준다. 때때로, 이러한 메서드가 유용하게 쓰일 때가 있다. Flat const newArr = arr.flat([depth]) 아래 arr에는 배열안에 배열이있는 중첩배열형태이지만, flat을 사용하면, 중첩된 배열이 사라진 온전한 배열을 가질 수 있게 된다. const arr = [1,2,3,[4,5],[6,7]] const new_arr = arr.flat() console.log(new_arr)//[1,2,3,4,5,6,7] 하지만, 이전 배열보다 깊이가 더 깊다면, 온전한 배열로 만들 수 없게 된다. const arr = [1,2,3,[4,[5,6]],[7]] const new_arr = arr.flat() conso..
이번 프로젝트에서 웹 내에서 이미지를 다운받을 수 있도록 해야했어서 찾아보다가 blob을 알게되었다. blob은 이미지, 사운드나 비디오같이 멀티미디어 데이터를 다룰 수 있고, 데이터의 크기와 MIME 타입(image/png, image/jpg...)을 알 수 있고, 데이터를 재가공할 수 있다. 방법은 그냥 간단한데 new Blob() 이렇게 생성자를 통하여 만들 수 있다. const blob = new Blob(fileObj) blob의 기능은 아주 많지만, 그 중에서 후에 필요하겠다 생각드는 것들 몇가지를 정리해보았다. 필요하다면 아래의 mdn문서를 읽어보자! https://developer.mozilla.org/ko/docs/Web/API/Blob blob데이터는 읽을 수 없기 때문에 안에 들어있는..
String, Number, Object 들과 달리 Array는 typeof 를 이용하여 타입을 알아보면 Object라고 뜨게된다. 그 이유는 Javascript에서는 Array를 Object로 취급하기 때문이다. const arr = [1,2,3,4,5] console.log(typeof arr) //"object" const null = null console.log(typeof null) //"object" object라니? 그렇다면, Array를 판별할 수 있는 방법은 무엇이 있을까? instanceof Array instanceof는 앞에 있는 객체의 프로토타입 체인이 뒤에있는 constructor.prototype에 존재하는지 아닌지 판별하여 Boolean (true/false)으로 리턴한다...
본문은 아래의 링크를 읽고 해석, 요약한 글입니다. 13 Useful JavaScript Array Tips and Tricks You Should Know 13 Useful JavaScript Array Tips and Tricks You Should Know An array is one of the most common concepts of Javascript, which gives us a lot of possibilities to work with data stored inside. Taking… medium.com 1. 중복 제거 new Set을 사용하고, Array.from() 메서드 또는, 스프레드 연산자(...)를 사용하여 빠르고 쉽게 중복 제거를 할 수 있다. const fruits = ..
AJAX란? 페이지를 새로고침하지 않아도 데이터가 로드되게끔 합니다. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다. JQuery는 간단한 문법으로 AJAX를 사용할 수 있도록 ajax라는 인터페이스를 제공합니다. AJAX만을 사용하기 위해 JQuery를 사용하기에는 파일자체가 무거워질 수 있습니다. 따라서, Axios나 Superagent, Isomorphic-fetch같은 라이브러리를 사용하는 것도 좋습니다. ajax 사용법 먼저, JQuery를 이용할 때는 꼭, cdn을 추가(링크)하거나, 다운로드를 해주어야합니다. 그 후 아래처럼 ajax를 사용해봅시다! $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, ..
Number() 이나 String() 에서 ()안에 값을 넣으면 그 값이 number이나 string 형태로 바뀐다. Number('1') // 1 String(1) // '1' Boolean값을 Number로 바꾸면? let x = true; console.log(Number(x)) // 1 x = false; console.log(Number(x)) // 0 이렇게 true는 1로, false는 0으로 바뀌는 것을 볼 수 있다. Falsy한 값을 알아보자 x = '' x = 0 x = NaN x = undefined x = null 자동 형변환 JS에서는 자동으로 형변환 되는 것이 있다. //산술 연산 console.log(4 + '2'); //42 console.log(4 + 2); //6 cons..
무작정 JS가 사용되는 프로그램 소스를 보고 따라하고 부딪치면서 JS를 이해하려 했지만, 이 방법은 정신건강에 아주 해로운 방법임을 깨달았습니다. 따라서 앞으로 JS를 이해하기 위해 배운 내용들을 정리하려 합니다. JavaScript란? -스크립트 언어 - 인터프리터 언어 - 페이지를 동적으로 만듬. 대표적인 runtime환경 - 웹브라우저 - 서버 Expression (표현식) 값을 만들어내는 간단한 코드 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다. alert("hello"+"Javascript") *표현식 Statement 하나 또는 여러개의 expression이 모여 문장을 이룬다. 모든 표현식은 문장이 될 수 있다. (보통) 문장의 끝에는 ;(세미콜론)을 붙인다. 한 줄에 문장..
https://www.cssportal.com/style-input-range/ Style Input Range - CSS Portal www.cssportal.com 익스플로어IE에만 적용되는 upper과 lower로 인해 overflow를 사용해 bar를 만들었다. CSS prefixes -webkit : 사파리, 크롬에 적용 -moz 파이어폭스 -o 오페라 -ms 익스플로어 아래는 타입이 range인 input에 먹였던 css코드이다. input[type="range"] { overflow: hidden; height: 30px; -webkit-appearance: none; margin: 10px 0; width: 100%; background: transparent; } input[type="r..
