[Javascript] 유용한 Library 정리

1. Date Library

# 날짜 및 시간
var today = new Date(); 
# getFullYear(), getMonth(), getDate(), getHours() ..
# setFullYear(), setMonth(), setDate(), setHours() ..
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

# Date를 문자열로 
toLocaleString() // 2022.07.09. 오후 3.07:55
toLocaleDateString() // 2018.05.17

 

2. JSON Library

# 객체 to JSON (보낼때 JSON 으로 바꿔서 보낸다.)
JSON.stringify 

# JSON to 객체 (JSON을 객체로 읽어서 사용)
JSON.parse

 

3. Window Location 객체

Property	Description	Example
hash	주소값에 붙어있는 anchor값 반환	#test
host	URL의 도메인과 포트 반환	www.example.com:8080
hostname	URL의 도메인 반환	www.example.com
href	URL 반환	http://www.example.com:8080/search?q=devmo#test
origin	프로토콜 + URL의 도메인 + 포트	http://www.example.com:8080
pathname	URL 경로 반환	/search
port	서버포트 반환	8080
protocol	프로토콜 반환	http:
search	URL에 붙은 매개변수 반환(물음표 뒤의 값)	?q=devmo
assign(url)	새로운 주소 이동
reload(forceget)	현재 페이지 새로고침
replace(url)	새로운 주소 이동 (세션 히스토리가 남지 않기 때문에 back 버튼으로 이동 불가)
출처: https://august5pm.tistory.com/8 [어느 팔월의 오후 다섯시:티스토리]

 

 

4. Blob

Blob (Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 대상으로 송수신 할 때 사용

• 첫번째 인수(array) : ArrayBuffer, ArrayBufferView, Blob(File), DOMString 객체, 위 객체들이 혼합된 Array
• 두번째 인수(options) : type과 endings (type은 데이터의 MIME Type 설정

const newBlob = new Blob(array, options);

 

slices Methods : Blob객체 잘라내어 재생성, 큰 데이터를 쪼갤 때 유용

const chunk = blob.slice(start, end, type);
const chunk = blob.slice(0, 1024, 'image/jpeg');

 

5. URL 객체 (with Blob)

URL.createObjectURL()

• Blob 객체를 나타내는 URL를 포함한 DOMString를 생성 (blob:URL)
• Blob URL은 생성된 window의 document에서만(브라우저) 유효
• 다른 window에서 재활용할 수 없어 file:URL과 다르게 보안 이슈에서 벗어날 수 있다.

 

# blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30
<img src="blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30" alt="Blob URL Image" />

revokeObjectURL()

• 생성된 URL 폐기
• 메모리 누수를 방지하기 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하는 것을 권장