배열 내포함 여부 확인

하나의 배열이 다른 배열을 완전히 포함하는지 확인하는 방법입니다.

const isSubset = (arr1, arr2) => arr2.every(item => arr1.includes(item));

이벤트 버스 활용

이벤트를 전송하고 수신하는 방법입니다.

// 이벤트 발송
this.$bus.$emit('data-change', { field: 'value', key: 'uniqueKey' });

// 이벤트 수신
this.$bus.$on('data-received', data => {
  this.fieldName = data.field;
});

// 컴포넌트 파괴 시 리스너 해제
this.$bus.$off('data-received');

프록시를 사용한 변경 감지

객체의 속성이 변경될 때 특정 로직을 실행합니다.

const obj = new Proxy({}, {
  set(target, prop, value) {
    if (['type', 'formId', 'approvalId'].includes(prop) && target[prop] !== value) {
      handleUpdate(value, prop).then(() => target[prop] = value);
    } else {
      target[prop] = value;
    }
    return true;
  }
});

전역 컴포넌트 등록

모든 Vue 인스턴스에서 사용할 수 있도록 컴포넌트를 등록합니다.

import Vue from 'vue';
const registerComponents = [require.context('./components', true, /\.vue$/)];
registerComponents.forEach(context => {
  context.keys().forEach(key => Vue.component(context(key).default.name, context(key).default));
});

트리 구조 처리

다층 트리 구조에서 데이터 필터링 및 선택 가능성을 제어합니다.

function filterTree(data, allowedIds, selectedPath) {
  const filteredData = [];
  data.forEach(item => {
    if (allowedIds.some(idList => idList[item.id])) {
      filteredData.push({ ...item, childList: filterTree(item.childList, allowedIds, selectedPath) });
    } else if (selectedPath === item.id) {
      filteredData.push({ ...item, disabled: true });
    }
  });
  return filteredData;
}

드래그 앤 드롭에서 클릭 이벤트 추가

드래그 중 클릭 이벤트가 작동하지 않는 문제를 해결하기 위한 메서드입니다.

function manualAddComponent(component) {
  // 추가 로직 작성
}

숫자 포맷팅

숫자에 콤마를 추가하여 가독성을 높입니다.

function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

Blob 관련 변환

Blob과 관련된 다양한 변환 작업을 수행합니다.

// Blob -> File
function convertBlobToFile(blob) {
  return new File([blob], 'example.txt', { type: blob.type });
}

// Base64 -> Blob
function base64ToBlob(base64String) {
  const byteString = atob(base64String.split(',')[1]);
  const mimeString = base64String.split(',')[0].match(/:(.*?);/)[1];
  const intArray = Uint8Array.from(byteString, c => c.charCodeAt(0));
  return new Blob([intArray], { type: mimeString });
}

// Blob -> ArrayBuffer
function blobToArrayBuffer(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(blob);
  });
}

// Blob -> Base64
function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(blob);
  });
}

UUID 생성

임의의 UUID를 생성합니다.

function generateUUID() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

AES 암호화 관련 작업

AES 키 생성 및导출 작업을 수행합니다.

async function createAesKey() {
  return await crypto.subtle.generateKey(
    { name: 'AES-GCM', length: 256 },
    true,
    ['encrypt', 'decrypt']
  );
}

async function exportAesKey(key) {
  return await crypto.subtle.exportKey('raw', key);
}

이미지 회전

Base64 형식의 이미지를 지정된 각도로 회전시킵니다.

function rotateImage(base64, angle) {
  return new Promise((resolve, reject) => {
    if (angle % 90 !== 0) return reject('각도는 반드시 90의 배수여야 합니다.');

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.src = base64;
    img.onload = () => {
      const quadrant = Math.floor(angle / 90) % 4;
      canvas.width = canvas.height = Math.max(img.width, img.height);

      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate((angle * Math.PI) / 180);
      ctx.drawImage(img, -img.width / 2, -img.height / 2);

      resolve(canvas.toDataURL());
    };
  });
}

PDF 생성

HTML 노드를 PDF로 변환합니다.

async function htmlToPdf(node) {
  const canvas = await html2canvas(node);
  const pdf = new jsPDF();
  const imgData = canvas.toDataURL('image/jpeg');

  pdf.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  return pdf.output('blob');
}