프런트 개발에 유용한 유틸리티

들어가며

자주 사용하지는 않지만, 특별한 상황에 필요한 유틸리티를 소개한다.

Sample로 올려놓은 소스코드를 참고하여, 프로젝트 맞게 함수로 만들어 사용하면 좋다.

 

Crypto-JS AES 활용한 암호화/복호화

주로 암/복호화 처리는 Backend 개발에서 담당하지만, 가끔 디버그 도구로 필요할 때가 있다.

일반적인 경우 Encrypt 된 문자 그냥 사용하기보다 Base64로 Encode 하여 사용한다.

 

 

brix/crypto-js

---

Base 64 Encode/Decode

암호화 작업 시 가장 기본으로 사용되는 라이브러리이다.

AES, RS와 같은 라이브러리로 암호화된 문자열을 만들고 Base64로 한 번 더 Wrapping 하여 사용한다.

File Upload 시에도 Buffer를 Base64로 변화하여 업로드하기도 한다.

 

 

js-base64

---

JS Beautify

크롤링된 데이터를 보기 좋게 정리한다거나, 스크립트 Debug 목적으로 사용하였다.

해당 라이브러리는 CSS, HTML도 지원하니 도큐먼트를 참고 하자.

 

 

js-beautify

---

Equirect to Cubemap

VR 카메라로 촬영한 360 이미지를 웹에서 서비스하기 위해 Three.js, Marzipano 등의 라이브러리를 많이 이용한다.

360 이미지는 용량이 보통 5mb 이상이고, Network 속도에 따라 Loading 시간이 오래 걸리는 경우가 많다.

이를 최적화 하기 위해서는 작은 용량의 미리보기를 먼저 불러오고 난 후 고화질 이미지를 불러와 이미지를 변경한다.

 

이미지는 "앞, 뒤, 좌, 우, 상, 하" 총 6개의 이미지로 나누어  CDN 서비스에 Upload 하여 사용하는 것을 권장한다.

 

 

equirect-cubemap-faces-js

---

JSZip - 파일 압축

Image, csv, text 등을 압축 하여 파일 다운로드 할 수 있습니다.

 

 

jszip