Color Palette Generator 만들기

Random Color Palette Generaotr

참고한 영상 : https://www.youtube.com/watch?v=H-LvaBNLDSQ&t=609s

export const generateRandomColors = (num: number) => {
  const colors = new Set<string>();

  while (colors.size < num) {
    colors.add(generateRandomColor());
  }

  return Array.from(colors);
};

Set 차료형을 이용해 중복없는 배열을 생성한다는 점이 아주 섹시하다고 볼 수 있다.
코딩테스트 준비가 의외로 실 코딩에 도움이 많이 되는 것 같다.

export const copyToClipboard = (text: string) => {
  const input = document.createElement("input");
  input.textContent = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
};

클립보드에 복사하는 방법에 대해서 자문을 구했는데 조금 특이한 방식이 있어서 적용했다.
작동 원리는 다음과 같다.

 1. 새로운 input DOM 엘리먼트를 생성한다.
 2. textContent 프로퍼티를 사용하여 input에 파라미터로 받은 text를 할당한다.
 3. document.body.appendChild를 사용하여 input를 현재 문서에 추가한다.
 4. input.select()를 사용하여 input를 선택한다.
 5. document.execCommand("copy")를 사용하여 선택된 텍스트를 클립보드에 복사한다.
 6. document.body.removeChild를 사용하여 input를 현재 문서에서 제거한다.

임시 element를 생성해 거기에 특정 값을 넣어놓고 execCommand 메소드를 사용해 클립보드에 복사하는 방식이다.

⭐️

Day codding 이라고 만들어보고 싶은 것들을 만드는 프로젝트를 해보기로 했다.
거창하게 대단한 것을 만들기보다는 하고싶은 코딩을 하는 그런 프로젝트를 많이 한다는 느낌이다.
이전보다 확실히 실력이 조금 늘었다고 느끼는 점은 이제는 배운 기술들을
필요에 따라서 적용할 수 있다는 점? 최근에 학습했던 내용이
아, 이럴 때 활용하면 좋겠구나- 하는게 조금더 빠르게 깨닫는 점?
🥰