나를 제외한 천재들

[JS] 소수점 존재여부 확인하기

나를 제외한 천재들 — Mon, 10 Jul 2023 02:46:28 +0900

코드

function hasDecimal(number) {
  return number % 1 !== 0;
}

hasDecimal(123);
// false
hasDecimal(123.45);
// true

number % 1은 숫자를 1로 나눈 나머지를 계산하는데, 정수가 아니면 0이 아닌 값을 반환하는 점을 이용한 코드입니다.

나머지 예시

자바스크립트에서는 문자열에 대해서 나머지 연산자를 사용해면 똑같은 0의 결과가 나오게 됩니다.

오직 숫자만 판별하기

function hasDecimal(number) {
  return typeof number === 'number' && number % 1 !== 0;
}

hasDecimal('123.45');
// false
hasDecimal(123.45);
// true

숫자가 아닌(문자열, boolean...) 경우를 판별하기 위해서 typeof 연산자를 이용해서 'number' 타입을 판별해 줍니다.

참고자료

https://stackoverflow.com/questions/2304052/check-if-a-number-has-a-decimal-place-is-a-whole-number

Check if a number has a decimal place/is a whole number

I am looking for an easy way in JavaScript to check if a number has a decimal place in it (in order to determine if it is an integer). For instance, 23 -> OK 5 -> OK 3.5 -> not OK 34.345...

stackoverflow.com

[JS] 영어 첫글자만 대문자로 바꾸기

나를 제외한 천재들 — Thu, 22 Jun 2023 03:15:04 +0900

코드예제

See the Pen &lt;a href="https://codepen.io/hyukson/pen/GRwjjqe"&gt; Untitled&lt;/a&gt; by hyukson (&lt;a href="https://codepen.io/hyukson"&gt;@hyukson&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

코드

function toCapitalize(str) {
  return str.replace(/\b\w/g, (match) => match.toUpperCase());
}

// : 사용예시
toCapitalize('hello world');
// 'Hello World'

코드풀이

'ABC'.replace(/\b\w/g, '');
// 'BC'

\b (word boundary) 단어의 시작 또는 끝에서 일치 항목 위치를 감지합니다.
\w (word character) 한글, 영어, 숫자등의 문자를 의미합니다.

두 정규식을 같이 사용해 주면 첫 번째에 위치한 [문자]를 의미합니다.

'hello world'.replace(/\b\w/g, (match) => match.toUpperCase());
// 'Hello World'

띄어쓰기, 특수문자 등으로 구분된 첫 번째 문자를 모두 감지해 줍니다.
String.toUpperCase() 메서드를 이용해서 감지한 첫 번째 문자를 대문자로 변경해 줍니다.

제일 첫번째 단어만 대문자로 변경하길 원한다면, 정규식에서 g(global)을 제거해주시면 됩니다. [ /\b\w/, ... ]

[JS] 길게 클릭(롱클릭) 이벤트 만들기

나를 제외한 천재들 — Thu, 8 Jun 2023 03:28:05 +0900

특정 요소를 정한 시간만큼 누르고 있는 행동을 Long-Click 또는 Long-Press라고 합니다.

예제코드

See the Pen Long Click by hyukson (@hyukson) on CodePen.

코드

const onlongclick = ($target, duration, callback) => {
  $target.onmousedown = () => {
    const timer = setTimeout(callback, duration);
  
    $target.onmouseup = () => {
      clearTimeout(timer);
    };
  };  
}

마우스로 해당 타깃을 누르는 시점을 mousedown 이벤트로 감지해 주고 특정 시간만의 setTimeout 함수를 실행해 줍니다.
만약 특정시간이 지나기 전에 마우스 클릭을 멈춘 시점을 mouseup 이벤트로 감지해 줍니다.
시간이 모두 지날 때까지 mouseup 이벤트 감지가 안되면, callback 함수가 호출되고 아닐 시에는 해당 타이머를 종료시킵니다.

// 함수 사용예시
const $target = document.querySelector('.long-click');

onlongclick($target, 300, () => {
  alert('Long Click');
});

위 코드처럼 특정요소와 duration(끝내는 시간), callback 함수를 인자 값으로 넘겨서 사용할 수 있습니다.

모바일 호환 문제

const onlongclick = ($target, duration, callback) => {
  $target.onmousedown = () => {
    const timer = setTimeout(callback, duration);
  
    $target.onmouseup = () => {
      clearTimeout(timer);
    };
  };  
  
  $target.ontouchstart = () => {
    const timer = setTimeout(callback, duration);
  
    $target.ontouchend = () => {
      clearTimeout(timer);
    };
  };  
}

mousedown, mouseup은 PC환경에서 사용되는 이벤트이며, 모바일에서는 touchstart, touchend 이벤트를 사용해줘야 합니다.

모바일 환경에서는 마우스 포인터 대신에 터치라는 개념을 이용해서 클릭을 합니다.

[JS] 접속한 브라우저 체크하기

나를 제외한 천재들 — Mon, 8 May 2023 04:41:35 +0900

예시코드

See the Pen Untitled by hyukson (@hyukson) on CodePen.

전체 코드

function getBrowser() {
  const browsers = [
    'Chrome', 'Opera',
    'WebTV', 'Whale',
    'Beonex', 'Chimera',
    'NetPositive', 'Phoenix',
    'Firefox', 'Safari',
    'SkipStone', 'Netscape', 'Mozilla',
  ];

  const userAgent = window.navigator.userAgent.toLowerCase();

  if (userAgent.includes("edg")) {
    return "Edge";
  }

  if (userAgent.includes("trident") || userAgent.includes("msie")) {
    return "Internet Explorer";
  }

  return browsers.find((browser) => userAgent.includes(browser.toLowerCase())) || 'Other';
}

getBrowser();
// Chrome

코드 풀이

// 브라우저 모음
const browsers = [
  'Chrome', 'Opera',
  'WebTV', 'Whale',
  'Beonex', 'Chimera',
  'NetPositive', 'Phoenix',
  'Firefox', 'Safari',
  'SkipStone', 'Netscape',
  'Mozilla',
];

자주 이용되는 브라우저 데이터를 배열에 담아 미리 정의해 줍니다.

const userAgent = window.navigator.userAgent.toLowerCase();

navigator.userAgent 정보에는 현재 접속한 브라우저에 대한 정보가 담겨있습니다.

해당 정보에서 'Chrome'과 같은 특정한 단어가 포함되어 있는지를 찾는 방식을 사용해 줍니다.

if (userAgent.includes("edg")) {
  return "Edge";
}

if (userAgent.includes("trident") || userAgent.includes("msie")) {
  return "Internet Explorer";
}

미리 선언해 둔 배열을 사용하기 전에, 에지와 익스플로러는 userAgent의 명칭과 다름으로 예외적으로 처리해줘야 합니다.

return browsers.find((browser) => userAgent.includes(browser.toLowerCase())) || 'Other';

브라우저를 모아둔 배열에서 포함되어 있는 브라우저를 찾으면 해당 값을 반환해 주고, 찾지 못하면 'Other'을 반환해 줍니다.

[JS] 숫자를 한글로 표시하기

나를 제외한 천재들 — Mon, 24 Apr 2023 03:08:43 +0900

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub.

github.com

'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다.

formatNumber(123456789);
// 1억 2345만 6789

formatNumberAll(123456789);
// 일억 이천삼백사십오만 육천칠백팔십구

예제 코드

See the Pen formatNumber by hyukson (@hyukson) on CodePen.

4자리 대상 (전체코드)

const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

  return result;
}

// 4자리씩 숫자로 변환
function formatNumber(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      const unit = thousandUnits[index] ?? "";

      if (!Number(item)) {
        return acc;
      }

      return `${Number(item)}${unit} ${acc}`;
    }, "")
    .trim();
}

모든 숫자 대상 (전체코드)

const numberUnits = ["", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];
const tenUnits = ["", "십", "백", "천"];
const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

// 모든 숫자 바꾸기
function formatNumberAll(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      if (!Number(item)) {
        return acc;
      } 
    
      let numberUnit = "";

      const zeroNum = item.padStart(4, "0");

      for (let i = 0; i < 4; i++) {
        const number = Number(zeroNum[i]);

        if (number) {
          const unit = tenUnits[3 - i];

          numberUnit += `${unit && number === 1 ? "" : numberUnits[number]}${unit}`;
        }
      }
    
      const thousandUnit = thousandUnits[index] ?? "";

      return `${numberUnit}${thousandUnit} ${acc}`;
    }, "")
    .trim();
}

코드풀이

// 배열 쪼개기
function chunkAtEnd(value = "", n = 1) {
  const result = [];

  for (let end = value.length; end > 0; end -= n) {
    result.push(value.substring(Math.max(0, end - n), end));
  }

  return result;
}

먼저 숫자를 한글로 바꾸기 위해서는 4자리씩 나눠주는 작업이 필요합니다.

chunkAtEnd('12345678', 4);
// ['5678', '1234']

chunkAtEnd 함수를 제작하여 뒤에서부터 4자리씩 나눠줍니다.

const thousandUnits = ["", "만", "억", "조", "경", "해"];

// 4자리씩 숫자로 변환
function formatNumber(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      const unit = thousandUnits[index] ?? "";

      if (!Number(item)) {
        return acc;
      }

      return `${Number(item)}${unit} ${acc}`;
    }, "")
    .trim();
}

chunkAtEnd() 함수로 4자리씩 나눔에 숫자에 차례대로 단위를 붙여줍니다.

const unit = thousandUnits[index] ?? "";

if (!Number(item)) {
  return acc;
}

return `${Number(item)}${unit} ${acc}`;

4자리씩 숫자를 미리 나누었기 때문에 '', '만', '억', '조'... 단위가 될 것입니다.

값이 0일 때는 뒤에 단위를 붙여주지 않습니다.

모든 숫자 대상

const numberUnits = ["", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];
const tenUnits = ["", "십", "백", "천"];
const thousandUnits = ["", "만", "억", "조", "경", "해"];

모든 숫자를 한글로 대체해야 하기에 한글 텍스트 배열을 미리 정의해 둡니다.

// 모든 숫자 바꾸기
function formatNumberAll(number) {
  return chunkAtEnd(String(number), 4)
    .reduce((acc, item, index) => {
      if (!Number(item)) {
        return acc;
      } 
    
      const zeroNum = item.padStart(4, "0");
      let numberUnit = "";

      for (let i = 0; i < 4; i++) {
        const number = Number(zeroNum[i]);

        if (number) {
          const unit = tenUnits[3 - i];

          numberUnit += `${
            unit && number === 1 ? "" : numberUnits[number]
          }${unit}`;
        }
      }
    
      const thousandUnit = thousandUnits[index] ?? "";

      return `${numberUnit}${thousandUnit} ${acc}`;
    }, "")
    .trim();
}

4자리씩 나눈 숫자를 모두 한글로 바꾸기 위해서 다시 한번 반복문을 돌려줍니다.

const zeroNum = item.padStart(4, "0");
let numberUnit = "";

for (let i = 0; i < 4; i++) {
  const number = Number(zeroNum[i]);

  if (number) {
    const unit = tenUnits[3 - i];

    numberUnit += `${
      unit && number === 1 ? "" : numberUnits[number]
    }${unit}`;
  }
}

4개의 숫자를 잘라서 numberUnits 배열에 담긴 index에 맞게 한글을 매칭해 줍니다.

padStart() 메서드를 통해서 무조건 4자리 숫자로 형식을 맞춰줍니다.

const thousandUnit = thousandUnits[index] ?? "";

return `${numberUnit}${thousandUnit} ${acc}`;

각 숫자에 맞게 한글로 바꿔주고, 문자뒤에 알맞은 단위를 붙여주는 작업을 반복해 줍니다.

[JS] 검색어 자동완성 기능

나를 제외한 천재들 — Mon, 17 Apr 2023 03:35:06 +0900

위와 같은 자동완성 기능은 우리가 흔히 접할 수 있는 UI 요소입니다.

※ 초성검색 적용 버전 코드도 있습니다.

예제 코드

See the Pen JS Autocomplete by hyukson (@hyukson) on CodePen.

HTML 태그 사용하기

<input type="text" list="color-list">

<datalist id="color-list">
  <option value="빨간색">
  <option value="파란색">
  <option value="노란색">
  <option value="검정색">
</datalist>

HTML에는 Input 자동완성 기능을 이용할 수 있도록 해주는, datalist 태그와 list 속성이 존재합니다.

하지만, 다양한 이벤트 설정이 어렵고 커스텀이 힘들다는 단점을 보완하기 위해서 자바스크립트로 구현해 보았습니다.

코드 풀이

<!-- 검색어 입력 폼 -->
<input type="text" id="search">
<!-- 자동완성 단어 리스트 -->
<div class="autocomplete"></div>

먼저 검색어를 입력받을 Input 요소와 자동완성을 시켜줄 리스트 요소를 하나 생성해 줍니다.

/* active 클래스를 가진 요소에 대해 */
.autocomplete > div.active {
  background: #333;
  color: #eee;
}

선택된 요소에(active 클래스를 가진 요소) 선택 표시를 해주기 위해서 CSS 스타일을 추가해 줍니다.

// 검색어 리스트
const dataList = [ "빨간색", "파란색", "노란색", "검정색" ];

// 검색 입력 요소
const $search = document.querySelector("#search");
// 검색어 리스트 요소
const $autoComplete = document.querySelector(".autocomplete");

// 현재 가르키고 있는 검색어 순번
let nowIndex = 0;

자동완성을 구현하기 위해서 필요 데이터를 선언해 줍니다.

자동완성에 사용될 검색 단어 리스트
입력 요소가 검색어를 보여줄 리스트 요소
리스트에서 커서를 가르쳐줄 현재 검색어 순번

// 단어 입력이 완료되었을 때
$search.onkeyup = (event) => {
  const value = $search.value.trim();

  // 리스트 필터링
  const matchDataList = value
    ? dataList.filter((label) => label.includes(value))
    : [];

  switch (event.keyCode) {
    // UP KEY
    case 38:
      nowIndex = Math.max(nowIndex - 1, 0);
      break;

    // DOWN KEY
    case 40:
      nowIndex = Math.min(nowIndex + 1, matchDataList.length - 1);
      break;

    // ENTER KEY
    case 13:
      document.querySelector("#search").value = matchDataList[nowIndex] || "";
      // 초기화
      nowIndex = 0;
      matchDataList.length = 0;
      break;

    // 그외 다시 초기화
    default:
      nowIndex = 0;
      break;
  }
  
  // 리스트 보여주기
  showList(matchDataList, value, nowIndex);
};

keyup 이벤트를 통해서 입력값이 변했을 때 또는 Up Down Enter 키를 감지해 줍니다.

자동완성 된 검색어를 선택하는 용도로 Up, Down, Enter키를 감지해 줍니다.

// 검색어 입력값
const value = $search.value.trim();

// 리스트 필터링
const matchDataList = value
  ? dataList.filter((label) => label.includes(value))
  : [];

검색어 데이터를 가져와주고 검색어에 해당하는 리스트로 필터링해 줍니다.

 switch (event.keyCode) {
    // UP KEY
    case 38:
      nowIndex = Math.max(nowIndex - 1, 0);
      break;

    // DOWN KEY
    case 40:
      nowIndex = Math.min(nowIndex + 1, matchDataList.length - 1);
      break;

    // ENTER KEY
    case 13:
      document.querySelector("#search").value = matchDataList[nowIndex] || "";

      // 초기화
      nowIndex = 0;
      matchDataList.length = 0;
      break;
      
    // 그외 입력은 초기화
    default:
      nowIndex = 0;
      break;
  }

이제 키보드 이벤트에서 위쪽 화살표 키 또는 아래쪽 화살표 키를 눌렀음이 판별되면 아래와 같은 동작을 수행해 줍니다.

Up - nowIndex - 1 수식을 적용하지만 0보다 작아진다면 0으로 지정
Down - nowIndex + 1 수식을 적용하지만 보여줄 리스트 개수를 넘으면 안 됩니다.

    // ENTER KEY
    case 13:
      document.querySelector("#search").value = matchDataList[nowIndex] || "";

      // 초기화
      nowIndex = 0;
      matchDataList.length = 0;
      break;

또한 Enter키를 눌렀을 때는 선택한 검색어로 대체되도록 matchDataList배열에서 선택한 단어를 지정해 대체해 주고 기존 데이터는 초기화해 줍니다.

// 리스트 보여주기
showList(matchDataList, value, nowIndex);

모든 작업이 끝나면 보여줄 리스트와 검색어, 현재 이동한 위치 인덱스를 인자값으로 보내줍니다.

const showList = (data, value, nowIndex) => {
  // 정규식으로 변환
  const regex = new RegExp(`(${value})`, "g");
  
  $autoComplete.innerHTML = data
    .map(
      (label, index) => `
        <div class='${nowIndex === index ? "active" : ""}'>
          ${label.replace(regex, "<mark>$1</mark>")}
        </div>
      `
    )
    .join("");
};

마지막으로 필터링된 데이터를 표시해 주는 작업만 남았습니다.

반복문을 돌려 현재 index가 nowIndex와 같으면 "active" 클래스를 부여해서 선택되었음을 표시해 줍니다.

'빨간색'.replace(/(빨)/g, '<mark>$1</mark>');
// <mark>빨</mark>간색

그리고 label을 표시해 주는 과정에서 변환시켜 준 정규식을 사용하면 특정 부분에 마커 표시를 해줄 수 있습니다.

초성검색 적용 예시 코드

See the Pen JS Autocomplete By ChoSung by hyukson (@hyukson) on CodePen.

초성검색 적용

[JS] 초성검색 구현하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'ha

gurtn.tistory.com

위 포스트를 참고하여 'hangul-util' 라이브러리 또는 공유드린 모든 코드가 존재하는 상태여야 합니다.

초성검색을 위한 코드가 준비되었다면, 변경할 코드는 총 두 군데가 존재합니다.

// 자동완성 필터링
const matchDataList = value
  ? dataList.filter((label) => includeByCho(value, label))
  : [];

먼저 keyup 이벤트를 적용시킨 코드에서 자동완성 필터링 코드를 includes() 대신에 incldueByCho() 함수로 대체해 줍니다.

const showList = (data, value, nowIndex) => {
  // 초성 정규식으로 변환
  const regex = makeRegexByCho(value);

그리고 두 번째로 정규식으로 바꿔주는 부분을 makeRegexByCho() 함수로 대체시켜 주면 초성검색을 적용시킨 자동완성 기능을 만들 수 있습니다.

[JS] 초성검색 구현하기

나를 제외한 천재들 — Wed, 12 Apr 2023 04:04:26 +0900

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub.

github.com

'hangul-util' 코드와 '한글 초성, 중성, 종성 구하기' 포스트를 기반으로 작성된 글입니다.

includeByCho('ㄱ', '귤')
// true

includeByCho('ㅅ과', '사과')
// true

코드 예시

See the Pen includeByCho by hyukson (@hyukson) on CodePen.

코드

const CHO_HANGUL = [
  'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ',
  'ㄹ', 'ㅁ', 'ㅂ','ㅃ', 'ㅅ',
  'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ',
  'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ',
];

const HANGUL_START_CHARCODE = "가".charCodeAt();

const CHO_PERIOD = Math.floor("까".charCodeAt() - "가".charCodeAt());
const JUNG_PERIOD = Math.floor("개".charCodeAt() - "가".charCodeAt());

function combine(cho, jung, jong) {
  return String.fromCharCode(
    HANGUL_START_CHARCODE + cho * CHO_PERIOD + jung * JUNG_PERIOD + jong
  );
}

function makeRegexByCho(search = "") {
  const regex = CHO_HANGUL.reduce(
    (acc, cho, index) =>
      acc.replace(
        new RegExp(cho, "g"),
        `[${combine(index, 0, 0)}-${combine(index + 1, 0, -1)}]`
      ),
    search
  );

  return new RegExp(`(${regex})`, "g");
}

function includeByCho(search, targetWord) {
  return makeRegexByCho(search).test(targetWord);
}

includeByCho('가ㅂ', '가방');
// true

includeByCho('ㅅ방', '가방');
// false

includeByCho('ㅂ', '가방');
// true

코드 풀이

// 초성배열
const CHO_HANGUL = [
  'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ',
  'ㄹ', 'ㅁ', 'ㅂ','ㅃ', 'ㅅ',
  'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ',
  'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ',
];

// 한글 시작 유니코드
const HANGUL_START_CHARCODE = "가".charCodeAt();

// 초성, 종성 주기
const CHO_PERIOD = Math.floor("까".charCodeAt() - "가".charCodeAt());
const JUNG_PERIOD = Math.floor("개".charCodeAt() - "가".charCodeAt());

// 한글 결합 함수
function combine(cho, jung, jong) {
  return String.fromCharCode(
    HANGUL_START_CHARCODE + cho * CHO_PERIOD + jung * JUNG_PERIOD + jong
  );
}

초성검색을 구현하기 위한 최소한의 정보와 함수를 선언해 줍니다.

// 초성검색
function makeRegexByCho(search = "") {
  const regex = CHO_HANGUL.reduce(
    (acc, cho, index) =>
      acc.replace(
        new RegExp(cho, "g"),
        `[${combine(index, 0, 0)}-${combine(index + 1, 0, -1)}]` // [시작-끝] -> [가-깋]
      ),
    search
  );

  return new RegExp(`(${regex})`, "g");
}

makeRegexByCho('ㄱ');
// /[가-깋]/

초성검색을 위해서는 'ㅅㄱ'를 '/[사-싷][가-깋]/' 형태의 정규식을 생성해 주는 작업이 필요합니다.

각 초성의 시작 글자과 끝은 정해져 있으며, 예시로 초성 ‘ㄱ’ 은 (가~깋)까지의 모든 범위에 해당하며, /[가-깋]/ 정규식으로 탐색할 수 있습니다.

makeRegexByCho() 상세풀이

'ㄱ밥'.replace(/ㄱ/g, '[가-깋]');
// '[가-깋]밥'

'김ㅂ'.replace(/ㅂ/g, '[바-빟]');
// '김[바-빟]'

'ㅅ방ㅅ'.replace(/ㅅ/g, '[사-싷]');
// '[사-싷]방[사-싷]'

replace() 메서드를 이용하면, 특정 초성을 모두 /[글자 시작 - 글자 끝]/ 정규식으로 바꿀 수 있습니다.

const regex = CHO_HANGUL.reduce(
  (acc, cho, index) =>
    acc.replace(
      new RegExp(cho, "g"),
      `[${combine(index, 0, 0)}-${combine(index + 1, 0, -1)}]`
    ),
  search
);

return new RegExp(`(${regex})`, "g");

reduce() 메서드를 이용해서 초기값을 검색어로 지정해 주고, 초성배열(CHO_HANGUL)을 순회하여 ㄱ~ㅎ까지의 모든 초성을 검색어에서 찾아 문자조합 범위 정규식( /[시작-끝]/ )으로 변환시켜 줍니다.

combine() 함수로 다음초성에서 - 1은 초성 끝 글자. (’다’ - 1 → ‘닣’)

// 초성검색 (검색어, 비교할 단어)
function includeByCho(search, targetWord) {
  return makeRegexByCho(search).test(targetWord);
}

includeByCho('ㄱ', '귤');
// true

정규식을 이용해서 문자가 조건에 일치한 지 검증하는 과정만이 남았습니다. 이는 구현된 정규식에 regex.test() 메서드를 사용한다면, 초성검색 기능을 완성할 수 있습니다.

참고자료

https://gurtn.tistory.com/207

[JS] 한글 초성, 중성, 종성 구하기

gurtn.tistory.com

[JS] 배열 순서 바꾸기 (맞교환)

나를 제외한 천재들 — Tue, 11 Apr 2023 03:56:02 +0900

splice() 메서드에 대해서

// Array.splice(시작위치, 삭제할 아이템 개수, 추가할 아이템)

const array = [1, 2, 3];

array.splice(0, 1);
// [1]

array.splice(0, 0, 5);
// []

console.log(array);
// [5, 2, 3]

splice() 메서드의 두 번째 인자는 삭제할 개수입니다. (1은 fromIndex 위치의 value 값)
두 번째 인자의 값이 0일 시, value 값이 제거되지 않습니다.
세 번째 인자 값에는 배열에 추가할 요소입니다. (없을 시 제거만 진행)

Array.splice() 메서드는 원본배열에 직접적인 관여를 합니다. (참조)

위치 이동하기

function moveValue(array, fromIndex, toIndex) {
  const item = array.splice(fromIndex, 1)[0];
  array.splice(toIndex, 0, item);
}

fromIndex의 위치의 값을 제거해 주고, toIndex위치에 새로운 값을 추가해 주는 방식입니다.

const array = [0, '!', 2, 3, 4];

moveValue(array, 1, 3);

console.log(array);
// [0, 2, 3, '!', 4]

맞교환 (서로 이동)

function switchValues(arr, index1, index2) {
  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
}

배열에서 index1, index2 값을 추출하고 구조 분해 할당 구문을 사용하여 두 인덱스의 값을 역순으로 새 배열에 할당해 줍니다.

function switchValues(arr, index1, index2) {
  const tmp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = tmp;
}

동일한 기능을 하는 코드이지만, 구조 분해 할당 구문을 사용하지 않고 구현한 코드입니다.

const array = [0, '!', 2, 3, '?'];

switchValues(array, 1, 4);

console.log(array);
// [0, '?', 2, 3, '!']

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

developer.mozilla.org

[JS] 한글 초성, 중성, 종성 구하기

나를 제외한 천재들 — Mon, 10 Apr 2023 03:37:12 +0900

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub.

github.com

'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다.

divideHangul('사과')
// ['ㅅ', 'ㅏ', 'ㄱ', 'ㅗ', 'ㅏ']

divideHangul("값싼");
// ['ㄱ', 'ㅏ', 'ㅂ', 'ㅅ', 'ㅆ', 'ㅏ', 'ㄴ']

코드 예시

See the Pen Untitled by hyukson (@hyukson) on CodePen.

(전체코드 67줄)

const CHO_HANGUL = [
  'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ',
  'ㄹ', 'ㅁ', 'ㅂ','ㅃ', 'ㅅ',
  'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ',
  'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ',
];
const JUNG_HANGUL = [
  'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 
  'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 
  'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 
  'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ',
];
const JONG_HANGUL = [
  '', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 
  'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 
  'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 
  'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ','ㅎ',
];

const CHO_PERIOD = Math.floor("까".charCodeAt(0) - "가".charCodeAt(0)); // 588 ( 28 * 21 )
const JUNG_PERIOD = Math.floor("개".charCodeAt(0) - "가".charCodeAt(0)); // 28

const HANGUL_START_CHARCODE = "가".charCodeAt(0);
const HANGUL_END_CHARCODE = "힣".charCodeAt(0);

function isHangul(charCode) {
  return HANGUL_START_CHARCODE <= charCode && charCode <= HANGUL_END_CHARCODE;
}

function divideHangul(letter) {
  const letterCode = letter.charCodeAt(0);

  if (!isHangul(letterCode)) {
    return letter;
  }

  const charCode = letterCode - HANGUL_START_CHARCODE;

  const choIndex = Math.floor(charCode / CHO_PERIOD);
  const jungIndex = Math.floor((charCode % CHO_PERIOD) / JUNG_PERIOD);
  const jongIndex = charCode % JUNG_PERIOD;

  return {
    cho: CHO_HANGUL[choIndex],
    jung: JUNG_HANGUL[jungIndex],
    jong: JONG_HANGUL[jongIndex],
  };
}

function combine(cho, jung, jong) {
  const hangulCode =
    HANGUL_START_CHARCODE + cho * CHO_PERIOD + jung * JUNG_PERIOD + jong;

  if (!isHangul(hangulCode)) {
    return "";
  }

  return String.fromCharCode(hangulCode);
}

function combineHangul(cho = "", jung = "", jong = "") {
  const choIndex = CHO_HANGUL.indexOf(cho);
  const jungIndex = JUNG_HANGUL.indexOf(jung);
  const jongIndex = JONG_HANGUL.indexOf(jong);

  return combine(choIndex, jungIndex, jongIndex);
}

코드 풀이

한글의 초성(19), 중성(21), 종성(28) 조합의 배열을 미리 정의해 줍니다.

// 초성(19개)
const CHO_HANGUL = [
  'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ',
  'ㄹ', 'ㅁ', 'ㅂ','ㅃ', 'ㅅ',
  'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ',
  'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ',
];
// 중성(21개)
const JUNG_HANGUL = [
  'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 
  'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 
  'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 
  'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ',
];
// 종성(28개)
const JONG_HANGUL = [
  '', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 
  'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 
  'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 
  'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ','ㅎ',
];

유니코드 한글은 44032부터 초성 19개, 중성 21개, 종성 28개로 이루어지고 이를 조합한 11,172개의 문자가 존재합니다.

먼저 미리 초성, 중성, 종성으로 구성된 배열을 만드는 이유는 유니코드만으로는 초성, 중성, 종성을 구분하기 어렵기 때문입니다.

유니코드는 초성, 중성 순서가 아닌 자음, 모음 순서로 구성되어 있기 때문입니다. (ㄱ, ㄲ, ㄴ) X, (ㄱ, ㄲ, ㄳ) O

(유니코드 확인해 보기)

const charCode = 'ㄱ'.charCodeAt(); // 12593

// 원하는 데이터(초성) [ ㄱ, ㄲ, ㄴ, ㄷ, ㄸ ]
// 실제 데이터(종성) [ ㄱ, ㄲ, ㄳ, ㄴ, ㄵ ]

String.fromCharCode(charCode); 
// ㄱ

String.fromCharCode(charCode + 1); 
// ㄲ

String.fromCharCode(charCode + 2);
// ㄳ

String.fromCharCode(charCode + 3); 
// ㄴ

String.fromCharCode(charCode + 4);
// ㄵ

const CHO_PERIOD = Math.floor('까'.charCodeAt(0) - '가'.charCodeAt(0)); // 588 ( 28 * 21 )
const JUNG_PERIOD = Math.floor('개'.charCodeAt(0) - '가'.charCodeAt(0)); // 28

이제 글자를 분리하기 위해서, 한글 유니코드의 패턴을 먼저 알아야 합니다.

1. 초성 규칙

초성 위치는 첫 조합 문자 ‘가’의 위치부터 589 간격마다 다음 초성으로 조합한 문자가 위치합니다. (가 + 589 → 나)

2. 중성 규칙

중성은 각 초성 조합에 29개의 모음 값이 존재합니다. 초성 조합이 바뀔 때마다 다시 처음부터 반복되기 때문에 초성 값을 빼줘야 합니다.

3. 종성 규칙

종성은 ‘ㄱ’의 위치부터 ‘ㅎ’까지, 종성이 없는 경우를 포함해 총 28개 값이 존재합니다. (초성은 19개)

한글 검증 코드

const HANGUL_START_CHARCODE = '가'.charCodeAt(0);
const HANGUL_END_CHARCODE = '힣'.charCodeAt(0);

// 조합 된 글자인지 체크 (가 ~ 힣 사이)
function isHangul(charCode) { 
  return HANGUL_START_CHARCODE <= charCode && charCode <= HANGUL_END_CHARCODE;
}

이제 제작할 분리, 조합 함수에서 사용할 isHangul 함수는 ‘가’(첫 글자) ~ ‘힣’(끝글자) 범위 안에 존재하는지 체크하는 함수입니다.

‘ㄱ’와 ‘가’의 유니코드 시작 위치가 전혀 다르고, 초성구간은 위 수식규칙이 다르기에 예외처리를 따로 해줘야 합니다.

글자 분리

function divideHangul(letter) {
  const letterCode = letter.charCodeAt(0);

  if (!isHangul(letterCode)) {
    return letter;
  }

  const charCode = letterCode - HANGUL_START_CHARCODE;

  const choIndex = Math.floor(charCode / CHO_PERIOD);
  const jungIndex = Math.floor((charCode % CHO_PERIOD) / JUNG_PERIOD);
  const jongIndex = charCode % JUNG_PERIOD;

  return {
    cho: CHO_HANGUL[choIndex],
    jung: JUNG_HANGUL[jungIndex],
    jong: JONG_HANGUL[jongIndex],
  };
}

console.log(divideHangul("김"));
// { "cho": "ㄱ", "jung": "ㅣ", "jong": "ㅁ" }

console.log(divideHangul("ㄱ"));
// ㄱ

미리 만들어둔 각 조합의 배열에서 문자를 구하기 위한 Index를 구해줘야 합니다.

1. 초성

초성은 589의 간격으로 초성 조합이 바뀝니다. 그러므로 588을 나눠준 값으로 순번을 구해줍니다. (588 나누기)

2. 중성

중성은 초성 조합이 바뀔 때마다 29개의 모음이 존재하니, 초성 위치를 제외한 상태에서 28을 나눠 순번을 구해줍니다. (28 나누기)

3. 종성

종성은 단순히 ‘ㄱ’와 ‘ㅎ’(28개) 위치 사이의 값이므로, 순번을 28의 간격의 나머지로 구해줄 수 있습니다.

글자 결합

// 44032(가) + ((초성 × 21) + 중성) × 28 + 종성
function combine(cho, jung, jong) {
  const hangulCode = HANGUL_START_CHARCODE + cho * CHO_PERIOD + jung * JUNG_PERIOD + jong;
	
  if (!isHangul(hangulCode)) {
    return '';
  }

  return String.fromCharCode(hangulCode);
}

console.log(combine(0, 20, 16));
// 김

console.log(combine(-1, 20, 16));
// ''

위에서 초성, 중성, 종성을 구한 방식을 반대로 한 수식으로 위치를 구해주면 문자를 합칠 수 있습니다.

(초성의 순번 * 초성 주기) + (중성의 순번 * 중성의 주기) + 종성 순번 의 수식을 ‘가’의 위치에 더해주면 합쳐진 문자의 위치를 구할 수 있습니다.

function combineHangul(cho = '', jung = '', jong = '') {
  const choIndex = CHO_HANGUL.indexOf(cho);
  const jungIndex = JUNG_HANGUL.indexOf(jung);
  const jongIndex = JONG_HANGUL.indexOf(jong);

  return combine(choIndex, jungIndex, jongIndex);
}

const hangul = { cho: 'ㄱ', jung: 'ㅣ', jong: 'ㅁ' };
// const hangul = divideHangul('김');

console.log(combineHangul(hangul.cho, hangul.jung, hangul.jong));
// 김

위에서 미리 선언해 둔 초성, 중성, 종성 배열을 이용해서 순번을 각각 찾아서 assemble() 함수에 넘겨주면, Index가 아닌 문자 결합 기능을 구현할 수 있습니다.

단어 분해, 결합

// 단어 분해
const divideLetter = "수박"
  .split("")
  .map((letter) => divideHangul(letter));

console.log(divideLetter);
/* 
  [ 
    { "cho": "ㅅ", "jung": "ㅜ", "jong": "" },
    { "cho": "ㅂ", "jung": "ㅏ", "jong": "ㄱ" }
  ]
*/

// 단어 결합
const combineLetter = divideLetter
  .map((hangul) => combineHangul(hangul.cho, hangul.jung, hangul.jong))
  .join("");

console.log(combineLetter);
// 수박

위에서 제작한 함수들은 모두 ‘한 글자’만 파싱 되도록 구현됐습니다. 단어 또는 문장을 파싱 하기 위해서는 문자를 쪼개서 하나씩 바꿔주는 방법을 사용해 줍니다.

[JS] Form Submit 동작 막기 (ft. Button Submit)

나를 제외한 천재들 — Fri, 10 Mar 2023 02:49:58 +0900

주로 submit 동작에는 Form 데이터를 서버에 전송하고, <a href=””>와 같이 페이지 이동이 발생합니다.

예제 코드

See the Pen Stop form Submission by hyukson (@hyukson) on CodePen.

HTML 코드 (Basic)

<form id="form">
  <input type="text" name="name" id="name" />

  <button>로그인</button>
</form>

1. 모든 submit 동작 막기 (JavaScript)

const $form = document.querySelecotr('form');

$form.addEventListener("submit", (event) => {
  // 동작(이벤트)을 실행하지 못하게 막는 메서드입니다.
  event.preventDefault();

  console.log(event.target);
});

“event.preventDefault()”는 브라우저에 동작하는 이벤트를 실행하지 못하게 막아주는 메서드입니다.

해당 메서드로 submit 이벤트 감지는 되지만, Form을 전송하는 등의 동작은 멈추게 됩니다.

2. button submit 동작만 막기 (HTML)

<button type="button">로그인</button>

button의 기본 type은 “submit”입니다. 폼 태그 안에 존재하는 버튼은 클릭 시 폼 데이터를 전송하는 시작점 역할을 가집니다. (Enter 등...)

하지만 해당 방법은 “Enter”와 같은 기타 submit 동작은 방지하지 못합니다.

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Event.preventDefault() - Web APIs | MDN

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

developer.mozilla.org

[JS] 객체 value 값으로 정렬 시키기

나를 제외한 천재들 — Thu, 9 Mar 2023 03:32:18 +0900

객체를 value 값을 기준으로 sort() 시켜 줄 수 있게 데이터를 변환시켜 주는 과정이 필요합니다.

코드

const fruits = {
  Apple: 4000,
  Banana: 10000,
  Cherry: 800,
  Kiwi: 7000,
};

const object = Object.fromEntries(
  Object.entries(fruits).sort((a, b) => a[1] - b[1])
);

console.log(object);
// { "Apple": 4000, "Banana": 10000, "Cherry": 800, "Kiwi": 7000 }

sort() 메서드를 이용하기 위해서 배열로 변환시킨 후, 다시 객체로 만들어 주는 방법을 거쳐줍니다.

코드 풀이

const fruits = {
  Apple: 4000,
  Banana: 10000,
};

// 객체 -> 배열로 [key, value]
const entries = Object.entries(fruits)
// [ ['Apple', 4000], ['Banana', 10000] ];


// 1. 
const object = Object.fromEntries(entries);

// 2.
const object = array.reduce((acc, value, index) => {
  return { ...acc, [value[0]]: value[1] };
}, {});

위와 같이 sort() 메서드를 사용하기 위해서 풀어준 배열 데이터를 다시 객체로 만들어주는 방법을 사용해 원래 형식으로 돌려줍니다.

key 값을 기준으로 정렬

const name = {
  홍씨: 4000,
  김씨: 10000,
  창씨: 800,
  박씨: 7000,
};

const object = Object.fromEntries(
  // 첫번째 값은 Key, 두번째 값은 Value
  Object.entries(name).sort((a, b) => a[0] > b[0] ? 1 : -1)
);

console.log(object);
// { "김씨": 10000, "박씨": 7000, "창씨": 800, "홍씨": 4000 }

key 값을 기준으로 정렬하기 위해서는 첫번째 값(key)을 기준으로 비교해주는 코드로 정렬 시켜줍니다.

참고자료

https://gurtn.tistory.com/204

[JS] 배열을 객체로 변환 (Array to Object)

Object.fromEntries() 메서드 const entries = [ ['first', 'apple'], ['second', 7], ]; const object = Object.fromEntries(entries); console.log(object); // {'first': 'apple', 'second': 7} 다음과 같이 key-value 형식으로 갖추어진 배열은 Object

gurtn.tistory.com

[JS] 배열을 객체로 변환 (Array to Object)

나를 제외한 천재들 — Wed, 8 Mar 2023 03:06:07 +0900

Object.fromEntries() 메서드

const entries = [
  ['first', 'apple'],
  ['second', 7],
];

const object = Object.fromEntries(entries);

console.log(object);
// {'first': 'apple', 'second': 7}

다음과 같이 key-value 형식으로 갖추어진 배열은 Object.fromEntries() 메서드를 사용하면 객체로 변환하여 반환해 줍니다.

forEach(), reduce() 메서드

const array = ['apple', 'banana', 'mango'];

// 1.
const object = {};

array.forEach((value, index) => {
  object[index] = value;
});

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

위와 같이 key-value 형식이 아닌 value 값만 존재한다면 임시의 객체를 하나 선언해 주고, 반복문을 통해서 객체를 채워나가는 식으로 변환해 줄 수 있습니다.

// 2.
const object = array.reduce((acc, value, index) =>
  ({ ...acc, [index]: value })
, {});

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

Array.reduce() 메서드를 사용하면, 동일한 위 기능 코드를 축약할 수 있습니다.

응용 코드

const array = ['apple', 'banana', 'mango'];

const object = Object.fromEntries(
  array.map((value, index) => [index, value])
);

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

위에서 소개한 방식인 map() 메서드로 key-value 형식으로 만들어주고 Object.fromEntries()로 변환시켜 줍니다.

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.fromEntries() - JavaScript | MDN

The Object.fromEntries() static method transforms a list of key-value pairs into an object.

developer.mozilla.org

[JS] 특정 영역 밖을 클릭 했을 때 감지하기

나를 제외한 천재들 — Tue, 7 Mar 2023 03:30:46 +0900

예제코드

See the Pen JS OutsideClick by hyukson (@hyukson) on CodePen.

코드

class useOutsideClick {
  ref = null;
  onClickOutside = null;
  
  constructor(ref, onClickOutside) {
    this.ref = ref;
    this.onClickOutside = onClickOutside;

    document.addEventListener('mouseup', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    if (this.ref && !this.ref?.contains?.(event.target)) {
      this.onClickOutside(this);
    }
  }

  removeClickListener = () => {
    document.removeEventListener('mouseup', this.handleClickOutside);
  }
}

초기에는 특정 요소와 외부 영역을 클릭했을 때 실행할 callback 함수가 필요로 합니다.

Node.contains() 메서드는 노드 자체, 직계 자식(childrens) 중 하나이거나, 자식의 직계 자식 등의 여부를 판단해 줍니다. 즉 클릭한 타깃이 초기에 지정한 요소가 맞는지를 판단해 주는 코드입니다.

만약 ref 요소와 일치하지 않으면, 외부 요소를 클릭했다 판단하고 callback을 호출해 줍니다.

const $aside = document.querySelector('aside');

const outsideClick = new useOutsideClick($aside, () => {
  console.log('Click!');
});

이제 useOutsideClick 클래스를 인스턴스화시켜 주고, 요소와 클릭 콜백 함수를 지정해 줍니다.

[React] custom hook

const useOutsideClick = ({ onClickOutside }) => {
  const ref = useRef(null);

  const handleClickOutside = useCallback(
    (event) => {
      const inside = ref.current?.contains?.(event.target);
      if (ref.current && !inside) {
        onClickOutside();
      }
    },
    [onClickOutside, ref]
  );

  useEffect(() => {
    document.addEventListener("mouseup", handleClickOutside);

    return () => {
      document.removeEventListener("mouseup", handleClickOutside);
    };
  }, [handleClick]);

  return ref;
};

위 코드를 React 코드에 맞게 변형시킨 코드입니다. ref.current에 요소를 지정해 주면 요소 외부 영역을 클릭을 감지하고, 콜백 함수를 호출합니다.

const App = () => {
  const outsideRef = useOutsideClick(() => console.log('Click!'));

  return <div>
    <div ref={outsideRef}></div>
  </div>;
};

이제 useOutsideClick()으로 외부 영역 클릭을 감지할 수 있게 됩니다.

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

Node.contains() - Web APIs | MDN

The contains() method of the Node interface returns a boolean value indicating whether a node is a descendant of a given node, that is the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.

developer.mozilla.org

[JS] 배열 초기화 시키기 (빈 배열)

나를 제외한 천재들 — Mon, 6 Mar 2023 02:43:14 +0900

3가지 방법 모두, 원본 배열에서 값을 제거하는 참조 방식을 사용합니다.

length 속성

const array = [1, 2, 3, 4, 5];

array.length = 0;

배열의 길이를 수정하면 해당 길이만큼 배열의 크기가 바꿔지며 0으로 지정하면 배열은 초기화됩니다.

splice() 메서드

const array = [1, 2, 3, 4, 5];

array.splice(0); // 2번째 인자가 없으면 모든 값을 제거

splice(0)을 사용하면 처음부터 끝까지 원본 배열에서 잘라 반환하기에 초기화를 시켜줄 수 있습니다.

pop() 메서드

const array = [1, 2, 3, 4, 5];

while(array.length) array.pop();

pop() 메서드는 배열의 마지막에 존재하는 요소를 제거한 뒤 반환해 주는 메서드입니다.

※ 배열의 길이만큼 pop() 메서드로 하나씩 제거해 주면 초기화되는 방식입니다.

하지만 length 방식보다 배열의 길이가 클수록 시간이 많이 걸리는 단점이 존재합니다.

참고자료

https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript

How do I empty an array in JavaScript?

Is there a way to empty an array and if so possibly with .remove()? For instance, A = [1,2,3,4]; How can I empty that?

stackoverflow.com

[JS] Textarea 높이 자동 조절

나를 제외한 천재들 — Fri, 3 Mar 2023 01:04:08 +0900

예제 코드

See the Pen Textarea Auto Height by hyukson (@hyukson) on CodePen.

코드

<textarea id="textarea"></textarea>

높이를 조절할 textarea 요소를 준비해줍니다.

textarea {
  width: 240px;
  height: 30px;
}

textarea의 기본 Height를 지정해주고, 이 크기는 JavaScript 코드에서도 사용하게 됩니다.

const DEFAULT_HEIGHT = 30; // textarea 기본 height

const $textarea = document.querySelector('#textarea');

CSS에서 지정한 Height를 'DEFAULT_HEIGHT' 변수에 저장시켜줍니다.
document.querySelector() 선택자로 textarea 요소를 가져와줍니다.

// Textarea 자동 높이 조절
$textarea.oninput = (event) => {
  const $target = event.target;

  $target.style.height = 0;
  $target.style.height = DEFAULT_HEIGHT + $target.scrollHeight + 'px';
};

oninput 이벤트로 입력 되는 시점을 감지해줍니다.
이때, 해당 textarea의 height를 0으로 변경해주고 scrollHeight 속성으로 스크롤을 포함한 요소의 높이를 적용해줍니다.

먼저 height를 초기화 해주지 않으면, scrollHeight 속성이 기존 스타일 높이까지 누적되어 적용되게 됩니다.

[JS] 객체에 특정 KEY값이 존재하는지 확인하기

나를 제외한 천재들 — Thu, 2 Mar 2023 01:44:41 +0900

includes() 사용

const obj = {a: false, b: true, c: null};

Object.keys(obj).includes('a');
// true

Object.keys(obj).includes('abc');
// false

Object.keys() 메서드로 객체의 모든 키값을 담은 배열을 생성해 주고, includes() 메서드로 해당 키가 존재하는지 판별해 줍니다.

in 연산자 사용

const obj = {a: false, b: true, c: null};

'c' in obj
// true

'abc' in obj
// false

in 연산자를 사용하면 간단한 코드로 key가 존재하는지 간단하게 확인할 수 있습니다.

obj.prototype.test = false;

'test' in obj
// true

다만, 프로퍼티도 같이 체크해 버린다는 문제점이 존재합니다. 해결을 위해서는 includes() 방법 또는 아래 방법을 사용해야 합니다.

hasOwnProperty 메서드 사용

const obj = {a: false, b: true, c: null};

obj.hasOwnProperty('a');
// true

obj.hasOwnProperty('abc');
// false

hasOwnProperty 메서드는 스스로 정의한 프로퍼티에 한해서 특정 키의 소유 여부를 반환해 줍니다.

obj.prototype.test = true;

obj.hasOwnProperty('test');
// false

해당 메서드를 사용하면 직접적인 속성만을 검사할 수 있기에 in 연산자에서 발생한 프로퍼티도 체크하는 문제도 해결 가능합니다.

참고자료

https://stackoverflow.com/questions/455338/how-do-i-check-if-an-object-has-a-key-in-javascript

How do I check if an object has a key in JavaScript?

Which is the right thing to do? if (myObj['key'] == undefined) or if (myObj['key'] == null) or if (myObj['key'])

stackoverflow.com

https://www.freecodecamp.org/news/how-to-check-if-an-object-has-a-key-in-javascript/

JavaScript Key in Object – How to Check if an Object has a Key in JS

Objects in JavaScript are non-primitive data types that hold an unordered collection of key-value pairs. As you can see in the image above, the key is the property, and each object value must have a key. When interacting with objects, situations might aris

www.freecodecamp.org

[JS] forEach(), map() break 시키기

나를 제외한 천재들 — Thu, 2 Mar 2023 01:33:32 +0900

일반적인 방법으로는 forEach(), map()를 break 시킬 수 없습니다.

코드

try {
  [1, 2, 3, 4, 5, 6, 7].forEach((value) => {
    console.log(value);
    if (value === 2) {
      throw value;
    }
  });
} catch (e) {
  console.log("Stop! " + e);
}

forEach, map 메서드에서는 break를 걸 수 없습니다.
“return false”를 사용하라는 방법이 소개되곤 반복이 멈추지는 않습니다.
forEach, map 메서드에서는 try, catch 문법에서 강제로 에러를 일으켜 루프문을 벗어나게 하는 방법을 사용합니다.

some, every 메서드 사용하기

some(), every() 메서드는 반환값이 조건에 충족하지 못하면, 그 즉시 반복을 중지하는 구조를 가진 메서드입니다.

some 메서드는 하나라도 true가 반환되면 반복을 중지합니다.
every 메서드는 하나라도 false가 반환되면 반복을 중지합니다

forEach() 메서드와 some(), every() 메서드의 사용방법이 다른 이유는 해당 메서드를 코드로 구현하면 아래와 같이 구현되기 때문입니다.

function some(array, callback) {
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      return true;
    }
  }

  return false;
}
some([0, 0, 1, 0, 0], (value) => value);
// false

function every(array, callback) {
  for (let i = 0; i < array.length; i++) {
    if (!callback(array[i], i, array)) {
      return false;
    }
  }

  return true;
}
every([1, 2, 0, 2, 1], (value) => value);
// false

break 문을 사용해야 할 상황에는 되도록 for loop를 사용하도록 합시다.

참고자료

https://davidwalsh.name/javascript-array-tricks-3

Break a forEach Loop with JavaScript

I've written a number of blog posts about JavaScript tricks: Promise tricks, type conversion tricks, spread tricks, and a host of other JavaScript tricks.

davidwalsh.name

[JS] 소수점 계산 오차 해결

나를 제외한 천재들 — Tue, 7 Feb 2023 01:49:45 +0900

오류 상황

원인

컴퓨터에서 계산을 할 때는 10진수 대신에 0과 1만을 사용하는 2진수로 계산합니다.

0과 1만을 사용하여 계산하기에 10 진수를 2진수로 바꾸는 변환과정이 필요합니다.
이때 컴퓨터 메모리에 존재하는 한계로 인해서 연산 중 발생한 무한소수의 중간을 잘라서 유한 소수로 저장해 버립니다.
이 과정에서 미세한 오차가 발생하는 것입니다.

첫 번째 방법

Number((0.2 + 0.4).toFixed(1))
// 0.6

Math.round((0.2 + 0.4) * 10) / 10;
// 0.6

Number.toFixed(n) → 소수점 n자리까지 반올림
Math.round((a + b) * 10) / 10 → 소수점 첫째 자리까지 반올림

toFixed() 메서드는 문자열로 반환되기에 Number로 감싸서 숫자형으로 바꿔줍니다.

두 번째 방법

(0.2 * 10 + 0.4 * 10) / 10;
// 0.6

10의 거듭제곱을 곱해서 소수를 정수로 만들어 계산 후, 다시 나눠주는 방법입니다.

소수점 연산에 문제가 있으니 정수로 만들어 계산해 주는 방법입니다.

코드

// 1. toFxied 사용
function decimalPlus(a, b, n = 1) {
  return Number((a + b).toFixed(n));
}

// 2. 정수로 계산
function decimalPlus(a, b, n = 1) {
  const unit = Math.pow(10, n);

  return (a * unit + b * unit) / unit;
}

decimalPlus(0.02, 0.04, 2);
// 0.06

위에서 소개한 방법으로 다음과 같이 함수로 제작하여 사용할 수 있습니다.

참고자료

https://joonpyo-hong.tistory.com/entry/JS-소수점-계산-오류-해결하는-법-부동-소수점

[JS] 소수점 계산 오류 해결법 (부동 소수점)

자바스크립트(javaScript)의 소수점 연산에서 오류가 발생했다. var a = 0.1; var b = 0.2; console.log(a + b); // 0.30000000000000004 0.3을 예상했지만 0.30000000000000004가 출력됬다. 원인 자바스크립트(javaScript)뿐만

joonpyo-hong.tistory.com

https://joooing.tistory.com/entry/Javascript-%EC%86%8C%EC%88%98%EC%A0%90floating-point-%EA%B3%84%EC%82%B0-%EC%98%A4%EB%A5%98

Javascript 소수점 오류 원인, 해결방안

자바스크립트에서 소수점 숫자 연산을 하면, 생각지도 못한 오류가 발생한다. 아래처럼 콘솔창에 0.1 + 0.2를 입력하면, 0.3이 아니라 0.30000000000000004 가 나오는 걸 확인해볼 수 있다. 이렇게 소수점

joooing.tistory.com

[JS] 코드 실행 지연 시키기 (delay)

나를 제외한 천재들 — Mon, 6 Feb 2023 01:36:09 +0900

흔히 알려진 시간을 지연시키는 방법으로는 setTimeout() 함수가 있습니다.

문제점

function delayTest() {
  console.log("__코드 시작__");

  setTimeout(() => {
    // 5초 후 실행
    console.log("실행! 1");

    setTimeout(() => {
      // 3+5초 후 실행
      console.log("실행! 2");
    }, 5000);
  }, 3000);
}

가장 쉽게 시간을 지연시킬 수 있지만, 다음과 같은 상황에서는 사용하기에 어려움이 존재합니다.

중첩해서 5초 후에 코드 실행과 3초 후에 코드 실행이 되어야 하는 상황입니다.
위 코드와 같이 setTimeout callback 안에 setTimeout을 넣어줘야 하는 문제점이 발생합니다.
계속 함수가 늘어나게 되면, 가독성에 문제가 생깁니다.

코드

function delay(ms = 1000) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function delayTest() {
  console.log("__코드 시작__");

  // 3초 지연
  await delay(3000);

  // 3초 후 실행
  console.log("실행! 1");

  // 5초 지연
  await delay(5000);

  // 3+5초 후 실행
  console.log("실행! 2");
}

javascript에 존재하는 Promise 개념과 async/await 문법을 이용해서 지연을 시킬 수 있습니다.

await 키워드를 사용할 함수 앞에 async 키워드를 작성해 줍니다.
delay 함수 앞에 await 키워드를 붙여주는 것이 끝입니다.
await 키워드가 붙은 함수(delay)가 반환될 때까지 해당 지점에서 멈추게 될 것입니다.

[HTML] 제곱, 화학식 표현하기

나를 제외한 천재들 — Thu, 2 Feb 2023 01:48:58 +0900

코드 예제

See the Pen HTML sup, sub Tag by hyukson (@hyukson) on CodePen.

위에 붙여서 표현하는 , 태그 아래에 붙여서 나타나는 태그가 존재합니다.

코드

x<sup>2</sup> =64

5<sup>th</sup>

 태그를 사용해면 일반 텍스트보다 작은 글자가 위에 표시됩니다.

x<sub>1</sub> ... x<sub>2</sub>

5<s>n+2</sub>

H<sub>2</sub>
O<sub>2</sub>
H<sub>2</sub>O

 태그를 사용해면 일반 텍스트보다 작은 글자가 아래에 표시됩니다.

타이포그래피적인 이유에 맞춰서만 사용해야 하며, 그 외는 vertical-align: (super, sub) 속성으로 대신할 수 있습니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/sup

: 위 첨자 요소 - HTML: Hypertext Markup Language | MDN

HTML 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다. 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub

: 아래 첨자 요소 - HTML: Hypertext Markup Language | MDN

HTML 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

developer.mozilla.org

[JS] 눈 내리는 효과 만들기

나를 제외한 천재들 — Wed, 1 Feb 2023 00:56:01 +0900

완성 코드

See the Pen Canvas Snow by hyukson (@hyukson) on CodePen.

전체코드(보기)

const $canvas = document.querySelector("canvas");
const ctx = $canvas.getContext("2d");

const getRandomRadius = () => Math.random() * 1 + 0.5;
const getRandomSpeed = () => Math.random() * 0.3 + 0.1;
const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)];

const Snow = {
  data: [],
  canvasWidth: $canvas.clientWidth,
  canvasHeight: $canvas.clientHeight,

  init() {
    Snow.make();
    Snow.loop();
  },

  loop() {
    Snow.move();
    Snow.draw();

    window.requestAnimationFrame(Snow.loop);
  },

  make() {
    const data = [];

    // 랜덤한 데이터 200개 생성
    for (let i = 0; i < 200; i++) {
      const x = Math.random() * Snow.canvasWidth;
      const y = Math.random() * Snow.canvasHeight;

      const size = getRandomRadius();
      const speed = getRandomSpeed();
      const dir = getRandomDir();

      data.push({ x, y, size, speed, dir });
    }

    // Snow 객체에 데이터 저장
    Snow.data = data;
  },

  move() {
    Snow.data = Snow.data.map((item) => {
      // 방향에 맞게 이동
      item.x += item.dir * item.speed;
      item.y += item.speed;

      // 캔버스를 벗어났는지 판단
      const isMinOverPositionX = -item.size > item.x;
      const isMaxOverPositionX = item.x > Snow.canvasWidth;
      const isOverPositionY = item.y > Snow.canvasHeight;

      // 벗어나면 반대방향, 맨 위로
      if (isMinOverPositionX || isMaxOverPositionX) {
        item.dir *= -1;
      }
      if (isOverPositionY) {
        item.y = -item.size;
      }

      return item;
    });
  },

  draw() {
    ctx.clearRect(0, 0, Snow.canvasWidth, Snow.canvasHeight);

    ctx.fillStyle = "#0f1018";
    ctx.fillRect(0, 0, Snow.canvasWidth, Snow.canvasHeight);

    Snow.data.forEach((item) => {
      ctx.beginPath();
      ctx.fillStyle = "rgba(255, 255, 255, .6)";
      ctx.arc(item.x, item.y, item.size, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    });
  },
};

Snow.init();

window.onresize = () => {
  Snow.canvasWidth = $canvas.clientWidth;
  Snow.canvasHeight = $canvas.clientHeight;

  Snow.make();
};

코드 풀이

<canvas width="460" height="460" />

먼저 내리는 눈을 그려줄 캔버스 요소를 만들어줍니다. (예시로 460 사이즈 지정)

const $canvas = document.querySelector("canvas");
const ctx = $canvas.getContext("2d");

그려줄 캔버스 DOM을 찾아서 변수에 저장해 줍니다.

// 크기
const getRandomRadius = () => Math.random() * 1 + 0.5;
// 속도
const getRandomSpeed = () => Math.random() * 0.3 + 0.1;
// 방향
const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)];

눈의 크기, 움직이는 속도, 방향을 랜덤 하게 가져오는 함수를 미리 선언해줍니다.

const Snow = {
  data: [],
  canvasWidth: $canvas.clientWidth,
  canvasHeight: $canvas.clientHeight,

  init() {
  },

  loop() {
  },

  make() {
  },

  move() {
  },

  draw() {
  },
};

눈이 내리는 효과를 만들기 위해서 필요한 함수 총 5개와 캔버스 크기를 미리 세팅해 줍니다.

make() {
  const data = [];

  // 랜덤한 데이터 200개 생성
  for (let i = 0; i < 200; i++) {
    const x = Math.random() * Snow.canvasWidth;
    const y = Math.random() * Snow.canvasHeight;

    const size = getRandomRadius();
    const speed = getRandomSpeed();
    const dir = getRandomDir();

    data.push({ x, y, size, speed, dir });
  }

  // Snow 객체에 데이터 저장
  Snow.data = data;
},

make() 함수는 눈 데이터를 만드는 함수입니다.
반복문을 돌려 시작 x, y 위치와 위에서 선언한 함수(크기, 속도, 방향)로 데이터를 만들어줍니다. ( 총 200개 )

move() {
  Snow.data = Snow.data.map((item) => {
    // 방향에 맞게 이동
    item.x += item.dir * item.speed;
    item.y += item.speed;

    // 캔버스를 벗어났는지 판단
    const isMinOverPositionX = -item.size > item.x;
    const isMaxOverPositionX = item.x > Snow.canvasWidth;
    const isOverPositionY = item.y > Snow.canvasHeight;

    // 벗어나면 반대방향, 맨 위로
    if (isMinOverPositionX || isMaxOverPositionX) {
      item.dir *= -1;
    }
    if (isOverPositionY) {
      item.y = -item.size;
    }

    return item;
  });
},

데이터 반복문을 돌려서 각 아이템마다 가진 speed 만큼 더해서 누산 시켜줍니다.
이때 현재 x, y 위치 값이 캔버스를 벗어나면 반대방향으로 바꿔주거나 맨 위로 올려주는 조건을 거칩니다.
이후 Snow.Loop()가 반복되면서 speed 만큼 더해진 데이터를 다시 그려주게 됩니다.

draw() {
  ctx.clearRect(0, 0, Snow.canvasWidth, Snow.canvasHeight);

  ctx.fillStyle = "#0f1018";
  ctx.fillRect(0, 0, Snow.canvasWidth, Snow.canvasHeight);

  Snow.data.forEach((item) => {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255, 255, 255, .6)";
    ctx.arc(item.x, item.y, item.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  });
},

이전에 그려진 캔버스를 지워주고, 검은 배경으로 채워줍니다.
move로 이동된 모든 눈 데이터를 ctx.arc() 메서드를 이용해서 원으로 그려줍니다.

ctx.arc( x, y, radius, startAngle, endAngle ) 인자를 필요로 하며, Math.PI * 2는 원의 총둘레입니다

loop() {
  // 눈을 이동시킨 후, 그리기
  Snow.move();
  Snow.draw();
	
  // Snow.loop() 함수를 계속 재귀함
  window.requestAnimationFrame(Snow.loop);
},

필요한 함수를 다 제작했으니, 마지막으로 window.requestAnimationFrame()를 이용해서 재귀를 돌려줍니다.
눈 데이터를 이동시켜 준 후, 그려주는 순서로 함수를 호출해 줍니다.

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame() - Web API | MDN

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의

developer.mozilla.org

const Snow = {
  data: [],

  init() {
    Snow.make();
    Snow.loop();
  },
	
  ....
}

// 눈 그리기 시작
Snow.init();

마지막으로 처음에 세팅해 주는 Snow.init()에 데이터를 만들어주는 함수와 루프를 시작하는 함수를 호출해 줍니다.
Snow.init() 코드로 실행해 주면 동작하게 됩니다.

창 크기에 맞추기

window.onresize = () => {
  Snow.canvasWidth = $canvas.clientWidth;
  Snow.canvasHeight = $canvas.clientHeight;

  Snow.make();
};

창 크기가 변할 때마다, 캔버스 가로사이즈를 창 가로사이즈로 대체해 줍니다. 그 후 바뀐 크기에 맞는 눈 데이터를 생성해 줍니다.

[JS] 개인정보 마스킹 처리 (이름, 전화번호, 주민번호, 이메일, 계좌번호..)

나를 제외한 천재들 — Fri, 27 Jan 2023 02:07:45 +0900

정규식으로 마스킹하는 방법이 존재하지만, 익스플로러에서 호환성 문제로 동작하지 않는 이슈가 존재합니다.

이름

function maskingName(name) {
  if (name.length <= 2) {
    return name.replace(name.substring(0, 1), "*");
  }

  return (
    name[0] +
    "*".repeat(name.substring(1, name.length - 1).length) +
    name[name.length - 1]
  );
}

maskingName("홍길동");
// mask - 홍*동

maskingName("김길");
// mask - *길

1~2글자는 첫 문자를 *로 바꿔주고 3글자부터는 가운데 글자를 *로 바꿔주는 코드입니다. replace() 메서드 대신에 repeat() 메서드를 사용해 주었습니다.

전화번호

function maskingPhoneNumber(phoneNumber) {
  const values = phoneNumber.split("-");

  values[1] = "*".repeat(values[1].length);

  return values.join("-");
}

maskingPhoneNumber("010-1111-2222");
// mask - 010-****-2222

전화번호의 하이픈을 기준으로 쪼개서, 가운데를 *로 바꿔주는 코드입니다. 전화번호에 하이픈을 넣어주는 코드는 아래 포스팅을 참고해 주세요!.

https://gurtn.tistory.com/86

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 같은 상황에서 (2, 3) - (3, 4) - (4) 자리에 숫자를 그룹 지어 묶어줍니다. replac

gurtn.tistory.com

이메일

function maskingEmail(email) {
  const mask = "*".repeat(email.split("@")[0].length - 1);

  return email[0] + mask + email.slice(mask.length + 1, email.length);
}

maskingEmail("asd123456@naver.com");
// mask - a********@naver.com

mask 문자를 만들 때 맨 앞글자를 제외시킨 숫자만큼 마스킹 처리를 해주고 남은 문자들을 합쳐서 반환해 줍니다.

주민등록번호

function maskingRrn(number) {
  return number.substring(0, number.length - 6) + "******";
}

maskingRrn("000203-1234567");
// mask - 000203-1******

대부분의 주민번호 형식은 YYMMDD-GHIJKLX으로 6자리-7자리로 구성되어 있습니다. 뒷자리 6자리가 워낙 중요하기에 *로 대체해 줍니다.

계좌번호

function maskingAccountNumber(accountNumber) {
  const mask = "*".repeat(accountNumber.split("-").at(-1).length);

  return accountNumber.substring(0, accountNumber.length - mask.length) + mask;
}

maskingAccountNumber("022-01-1111");
// 022-01-****

은행마다 계좌번호 형태가 다릅니다. 마스킹 작업을 수월하게 하기 위해서는 하이픈이 들어간 계좌번호여야 합니다.

[JS] 시작일과 종료일 사이 모든 날짜 구하기

나를 제외한 천재들 — Thu, 26 Jan 2023 01:38:04 +0900

시작일(YYYY-MM-DD) ~ 종료일(YYYY-MM-DD) 사이의 모든 [시, 일, 월, 년] 단위의 배열을 만들 수 있습니다.

See the Pen Untitled by hyukson (@hyukson) on CodePen.

코드

const getDateRange = (startDate, endDate) => {
  const start = new Date(startDate);
  const end = new Date(endDate);

  const result = [];

  while (start <= end) {
    result.push(start.toISOString().split('T')[0]);
    start.setDate(start.getDate() + 1);
  }

  return result;
}

시작일과 종료일을 받아주고, 시작일이 종료일을 넘을 때까지 하루를 계속 더해주면서 날짜를 구해주는 방식입니다.

시간, 일, 월, 년도 단위 배열 만들기

const start = new Date();

// 현재 시간
start.setHours(date.getHours() + 1);
// 현재 일
start.setDate(date.getDate() + 1);
// 현재 월
start.setMonth(date.getMonth() + 1)
// 현재 년도
start.setFullYear(date.getFullYear() + 1);

위에서 예시로 사용한 하루를 더하는 코드에서는 setDate(), getDate() 메서드를 사용하였습니다. 이를 다른 메서드로 대체하면 하루단위가 아닌 월, 년 간격의 날짜를 구할 수도 있습니다.

  // ...

  while (start <= end) {
    result.push(start.toISOString().split('T')[0]);
    // 예시 - 1시간 단위의 모든 날짜
    // ex) start.setHours(start.getHours() + 1);
  }
  
  ...
 }

setDate(getDate() + 1) 코드는 하루를 더 해줄 수 있는 코드이고, 해당 코드를 바꾸면, 다른 날짜 기준으로 더해줄 수 있습니다.

단, 시간 단위로 구해줄 때는 포맷해 주는 부분을 날짜와 시간도 같이 포함시켜 줘야 변화를 확인할 수 있습니다.

[JS] 뒤로가기 막기, 뒤로가기(이전페이지) 링크 만들기

나를 제외한 천재들 — Wed, 25 Jan 2023 01:35:53 +0900

사용자가 방문한 모든 URL을 포함하는 객체로는 history라는 JavaScript 객체가 존재합니다.

뒤로가기 링크 제작

history.back();
// 이전페이지로 이동

History 객체에는 사용자가 방문한 모든 URL을 스택 방식으로 쌓아놓습니다. 이를 위에 코드로 사용하면 Array.pop() 같은 효과가 나오게 됩니다.

history.go(-1)
// 이전페이지로 이동

history.go(-2)
// 이번페이지 -2번 클릭한 것과 동일한 동작

가장 뒤에 있는 URL을 빼는 메서드가 존재한다면, 특정 URL을 지정하는 메서드도 존재합니다. history.go() 메서드는 인자로 전달하는 수만큼 페이지를 이동합니다.

뒤로가기 막기

// 스택 추가
history.pushState(null, null, location.href); 

// 뒤로라기 이벤트감지 -> 현재페이지로 이동
window.onpopstate = function() { 
	history.go(1); 
}

히스토리 스택에 현재 페이지의 URL을 추가한 뒤, 뒤로가기를 할 경우 현재 페이지로 이동시켜서 뒤로가기를 막는 방법입니다.

예제코드

<button id="back">뒤로가기</button>
<button id="stop">뒤로가기 막기</button>

document.querySelector('#back').onclick = function() {
  history.back();
}

document.querySelector('#stop').onclick = function() {
  history.pushState(null, null, location.href); 
  window.onpopstate = function(event) { 
	history.go(1); 
  };
}

[CSS] 스크롤바 없애기(숨기기)

나를 제외한 천재들 — Fri, 23 Dec 2022 02:01:19 +0900

파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다.

예제 코드

See the Pen Scrollbar hide by hyukson (@hyukson) on CodePen.

코드

/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.scroll::-webkit-scrollbar {
  display: none;
}

영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다.

.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며, 스크롤바를 숨기기 위해서는 다음과 같은 코드를 작성해야 합니다.

스크롤 기능 없애기

.scroll {
  overflow: hidden;
}

overflow: hidden 속성을 해당 요소의 영역을 벗어나는 자식들을 보이지 않도록 해주는 속성입니다. 영역을 초과할 일이 없으니 스크롤바도 생기지 않고, 기능도 사라지게 됩니다.

[JS] 중복없는 특정 범위의 랜덤 숫자 배열

나를 제외한 천재들 — Thu, 22 Dec 2022 01:06:18 +0900

코드 예제

See the Pen Lotto Number by hyukson (@hyukson) on CodePen.

Set 객체

function getRandomNumber(max, min = 1) {
  return Math.floor(Math.random() * max) + min;
}

function getUniqueNumberList(count, max, min = 1) {
  const list = new Set();

  while (count > list.size) {
    list.add(getRandomNumber(max, min));
  }

  return [...list];
}

getUniqueNumberList(3, 10);
// [4, 7, 9]

Set 객체를 활용하면 중복된 값을 제거할 수 있습니다. 매번 중복된 값을 뽑아서 Set 객체에는 단 하나의 동일한 값만 존재하게 됩니다.

max, min 값으로 랜덤으로 뽑을 숫자 범위를 지정해주고 배열 길이만큼 Set 객체가 채워질 때까지 반복해 줍니다.

indexOf 활용

function getRandomNumber(max, min = 1) {
  return Math.floor(Math.random() * max) + min;
}

function isUniqueNumber(list, number) {
  return list.indexOf(number) === -1;
}

function getUniqueNumberList(count, max, min = 1) {
  const list = [];

  while (count > list.length) {
    const randomNumber = getRandomNumber(max, min);

    if (isUniqueNumber(list, randomNumber)) {
      list.push(randomNumber);
    }
  }

  return list;
}

getUniqueNumberList(3, 10);
// [1, 6, 7]

위와 같은 방식으로 구현되었지만, 다른 부분으로는 indexOf 메서드를 사용해서 중복 여부를 판단한다는 점입니다.

하지만 아무래도 배열로 숫자를 관리하다 보니 값이 너무 커지면 속도가 현저히 떨어진다는 문제점이 있습니다.

[JS] Element 크기 변화 감지 (ResizeObserver)

나를 제외한 천재들 — Wed, 21 Dec 2022 01:22:26 +0900

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다.

ResizeObserver API

const $target = document.querySelector('div');

const observer = new ResizeObserver((entries) => {
  // 관찰 중인 배열 형식의 객체 리스트
  entries.forEach((entry) => {
    ...
  });
});

// 크기변화를 관찰할 요소지정
observer.observe($target);

Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정보를 전달합니다.

Callback

const observer = new ResizeObserver((entries, observer) => {
  // 관찰 중인 배열 형식의 객체 리스트
  entries.forEach((entry) => {
    ...
  });
});

observe 메서드로 등록한 요소의 크기가 변할 때, ResizeObserver Callback 함수에 값이 담겨옵니다.

Entries
- 관찰되고 있는 ResizeObserverEntry 데이터 리스트를 반환
Observer
- 콜백 함수가 호출되는 ResizeObserver의 참조 객체

Entry Object

Entries - 객체 리스트의 각 Entry 객체는 아래와 같이 구성되어 있습니다.

contentBoxSize
- 관찰된 요소의 테두리 상자 크기 객체 (content)
borderBoxSize
- 관찰된 요소의 테두리 상자 크기 객체 (content + padding + border)
contentRect
- 위 두 BoxSize보다 많은 정보를 담고 있는 객체입니다. 하지만 그에 따른 웹 호환성 문제로 작동하지 않을 수도 있습니다. (BoxSize)
devicePixelContentBoxSize
- 관찰된 요소의 테두리 상자 크기 객체
target
- 관찰되는 대상 요소(Element, SVGElement)

unobserver()

observer.unobserver($target);

특정 대상에 대한 크기 관찰을 해제할 수 있습니다.

disconnect()

observer.disconnect();

모든 대상을 대상으로 크기 관찰이 해제됩니다.

예시 코드

See the Pen Div Resize + ResizeObserver by hyukson (@hyukson) on CodePen.

See the Pen Sidebar + ResizeObserver by hyukson (@hyukson) on CodePen.

[JS] 키보드 단축키 만들기

나를 제외한 천재들 — Fri, 9 Dec 2022 01:17:30 +0900

keydown Event에 담겨오는 다양한 키 정보를 이용해서 단축키를 생성할 수 있습니다.

예제 코드

See the Pen JS hotkey by hyukson (@hyukson) on CodePen.

코드

document.addEventListener('keydown', (event) => {
  event.preventDefault();
  
  // keyCode
  if (event.keyCode === 67 && event.shiftKey) {
    alert('Shift + C 단축키');
    return false;
  }
  
  // key
  if (event.key === 'v' && event.altKey && event.ctrlKey) {
    alert('Ctrl + V + ALT 단축키');
    return false;
  }
  
  // code
  if (event.code === 'KeyD' && event.altKey) {
    alert('ALT + D 단축키');
    return false;
  }
});

event.preventDefault() 메서드는 기존에 존재하는 단축키(Ctrl + C - 복사하기)를 막을 수 있습니다.

단축키를 지정하는 방법으로는 keydown event가 실행될 때, keyCode, key, code, altKey, shiftKey... 등의 값을 이용해서 단축키를 만들 수 있습니다.

event ( keyCode, key, code )

keyCode
- 대소문자 영향은 받지 않는다. ('C' -> 67, 'c' -> 67)
- 한영 변환에 따른 keyCode 값이 다르다.
- 원하는 키를 찾기 위해서 별도의 찾는 과정이 필요하다.
key
- 대소문자 영향을 받는다. ('S', 's')
- Shift를 누른 상태의 단축키를 만들려면 's'가 아닌 'S'로 비교해야 한다!
code
- key 배열의 값을 가져오기에 대소문자, 한영 변환 영향이 없다.
- 숫자와 같이 규칙이 없어서, 필요 키의 코드를 찾는 과정이 필요하다.

각 조건문에 return false; 코드를 추가해서 다른 단축키와 중복으로 겹치는 사태를 막았지만, 만약 여러 단축키를 동시에 가능하게 만들려면, 저 구문을 제거하시면 됩니다.

keycode 리스트

http://gcctech.org/csc/javascript/javascript_keycodes.htm

JavaScript Keycodes

JavaScript KeyCode In every browser there are three possible kinds of client-side events triggered when a keyboard key is pressed or released: keydown event keypress event keyup event The keydown event occurs when the keyboard key is pressed, and it is fol

gcctech.org

[JS] Sort(), 다중 조건 정렬

나를 제외한 천재들 — Mon, 21 Nov 2022 00:16:26 +0900

단일 조건

const data = [
  { age: 19, name: '김씨' }, 
  { age: 25, name: '박씨' }, 
  { age: 18, name: '김씨' }, 
  { age: 19, name: '나씨' },
];

data.sort((a, b) => a.age - b.age);

해당 데이터에서 정렬을 시켜주면, age(나이)가 같은 값은 정렬이 되지 않습니다. 이를 해결하기 위해선 다중 조건으로 정렬을 해줘야 합니다.

다중 조건

const data = [
  { age: 19, name: '김씨' }, 
  { age: 25, name: '박씨' }, 
  { age: 18, name: '김씨' }, 
  { age: 19, name: '나씨' },
];

data.sort((a, b) => a.age - b.age || a.name.localeCompare(b.name));

age(나이) 값이 같은 경우에는 이름순으로 정렬하는 코드, 즉 다중 조건으로 정렬시키는 코드입니다.

앞부분 조건이 음수, 양수가 아닌 0(서로 같다)의 결과가 나오게 되면 OR연산자에 의해서 두 번째 조건으로 판단하게 됩니다.

코드 풀이

data.sort((a, b) => 첫번째 조건 || 두번째 조건);
// 0, 음수, 양수

0, 음수, 양수의 값이 나오는 조건만을 이용해서 정렬을 시킬 수 있다면 다음과 같은 코드로 구현할 수 있습니다.

console.log(-1 || 'test');
// -1

console.log(0 || 'test');
// 'test'

OR 연산자는 앞부분이 참일 경우, 앞부분을 그 외에는 뒷부분을 반환해주는 연산자입니다.

참고자료

https://gurtn.tistory.com/184

[JS] 문자열 배열 정렬 (영어,한글)

자바스크립트에는 배열 데이터를 정렬시켜주는 sort 메서드가 존재합니다. Array.sort() 메서드 const data = ['a가가', '나나', 'ac', '가가', 'aa']; data.sort(); console.log(data); // ['aa', 'ac', 'a가가', '가가', '나나

gurtn.tistory.com

[JS] getWeek(), 특정 날짜가 몇주차인지 구하기

나를 제외한 천재들 — Sun, 20 Nov 2022 23:47:41 +0900

코드

const getWeek = (date) => {
  const currentDate = date.getDate();
  const firstDay = new Date(date.setDate(1)).getDay();

  return Math.ceil((currentDate + firstDay) / 7);
};

const week = getWeek(new Date("2022-11-11"));
console.log(week + "주차");
// 2주차

2022-11-11와 같은 Date 객체를 넘길 시, 해당 날짜가 위치한 주차를 구해서 반환해주는 함수입니다.

코드 풀이

const date = new Date('2022-11-11');

const currentDate = date.getDate();
// 11
const day = date.getDay();
// 5

Date.getDate()
- 해당 메서드는 주어진 날짜의 일을 반환합니다.
Date.getDay()
- 해당 메서드는 주어진 날짜의 요일 정보를 반환합니다.

const 당일 = date.getDate()
const 첫요일 = new Date(date.setDate(1)).getDay();

Math.ceil((당일 + 첫요일) / 7)

1주 차, 2주 차 등의 주차를 구하는 수식에는 첫 요일 정보가 추가로 필요로 합니다.

요일 계산을 안 할시 아래와 같이 오차가 생기게 됩니다.

다음 달력의 11월 시작은 화요일입니다. 이를 무시하고 날짜를 구하게 되면 2일씩 날짜가 당겨지게 됩니다.

[JS] HEX, RGB 색상코드 변환하기

나를 제외한 천재들 — Sun, 20 Nov 2022 23:32:47 +0900

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다.

완성 코드

See the Pen RGB to HEX by hyukson (@hyukson) on CodePen.

HEX
- 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다.
RGB (red, green, blue)
- 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다.

예시 → 255, 255, 255 = ( FFFFFF )

코드

const getHEX = (RGB) => {  
  const colors = RGB.split(",");
  
  return colors
    .map(color => Number(color)
    .toString(16)
    .padStart(2, '0'))
    .join('');
}

const HEX = getHEX('255,255,255');
// ffffff

RGB 값을 넣으면 HEX 색상 코드가 반환되는 함수입니다. 콤마를 기준으로 문자를 나누고 toString() 메서드를 이용해서 16진수로 바꿔줍니다.

const getRGB = (HEX) => {
  return HEX.match(/.{2}/g)?.map(replacer => parseInt(replacer, 16) || 0);
}

const RGB = getRGB('FFFFFF');
// [255, 255, 255]

HEX 값을 넣으면 RGB 색생을 담은 배열이 반환되는 함수입니다. 최대 숫자인 255의 16진수(FF)를 탐지하여 parseInt() 메서드를 이용해서 16진수를 10진수로 바꿔줍니다.

[JS] 문자열 배열 정렬 (영어,한글)

나를 제외한 천재들 — Thu, 20 Oct 2022 02:49:10 +0900

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub.

github.com

'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다.

sortByASC(['멜론', '귤', '참외']);
// [ '귤', '멜론', '참외' ]

sortByGroups(["대리", "사원", "사장", "회장", "부장"], groups);
// [ '회장', '사장', '부장', '대리', '사원' ]

Array.sort() 메서드

const data = ['a가가', '나나', 'ac', '가가', 'aa'];

data.sort();

console.log(data);
// ['aa', 'ac', 'a가가', '가가', '나나']

기본적으로 sort 메서드는 인자 값(compareFunction)을 생략하게 되면 유니코드 값에 따라 오름차순 정렬됩니다.

비교 연산자 사용하기

'가나가' > '가나나' // false
'b' > 'a' // true

자바스크립트에서는 비교 연산자를 이용해서 문자열을 비교할 수 있습니다. 이를 이용해서 서로의 문자열을 비교하여 정렬시켜줍니다.

// 오름차순 (ASC)
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) => a > b ? 1 : -1);

// 내림차순 (DESC)
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) => a > b ? -1 : 1);

localeCompare 메서드 사용하기

// 오름차순
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) ⇒ a.localeCompare(b));
// 내림차순
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) ⇒ b.localeCompare(a));

localeCompare 메서드는 문자열의 사전상 순서에서 해당 문자가 뒤에 있는지 앞에 있는지 또는 같은지를 판단하여 1, 0, -1의 반환 값을 주는 메서드입니다.

sort 메서드는 0과 음수, 양수의 반환 값을 필요로 하기에 localeCompare() 메서드로 쉽게 구현할 수 있습니다.

객체 배열 정렬

const data = [{ name: '노란색' }, { name: '초록색' }, { name: '검정색' }];

// 비교연산자
[...data].sort((a, b) => a.name > b.name ? 1 : -1);

// localeCompare 메서드
[...data].sort((a, b) => a.name.localeCompare(b.name));

객체로 구성된 배열을 정렬시키는 방법은 정렬을 시켜주는 기준을 객체의 Value 값으로 잡아서 비교해줍니다.

특정값 정렬 기준 만들기

// 정렬 기준
const orderBy = ['회장', '사장', '부장', '과장', '사원'];

const data = ['사장', '사원', '회장', '부장', '과장', '사원'];

data.sort((a, b) => orderBy.indexOf(a) - orderBy.indexOf(b));
// [ "회장", "사장", "부장", "과장", "사원", "사원" ]

직급 순과 같이, 가나다순 정렬이 아닌 특정한 정렬의 기준을 만들어서 정렬시켜줄 수 있습니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

String.prototype.localeCompare() - JavaScript | MDN

The localeCompare() method returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.

developer.mozilla.org

[JS] SVG 다운로드 (내보내기), PNG로 변환

나를 제외한 천재들 — Tue, 6 Sep 2022 14:09:39 +0900

SVG 다운로드

const $svg = document.querySelector("svg");

const data = new XMLSerializer().serializeToString($svg);
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

const $link = document.createElement("a");
  
$link.download = "export.svg";
$link.href = URL.createObjectURL(blob);
  
$link.click();

SVG의 텍스트 데이터를 추출해 Blob 객체를 만들어주고 URL.createObjectURL 메서드를 이용한 다운로드 URL을 사용해 다운로드하는 코드입니다.

코드 풀이

// svg의 텍스트 데이터 추출
const data = new XMLSerializer().serializeToString($svg);

// 다운로드를 위한 blob 객체 생성
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

svg를 다운로드하기 위해서는 svg의 텍스트 데이터를 가져와야 합니다. 이때 XMLSerializer.serializeToString() 메서드를 사용하면 svg의 텍스트 데이터를 추출할 수 있습니다.

그 후 다운로드 용 URL을 만들기 위해서 필요한 Blob 객체를 생성해줍니다. 생성된 Blob 객체를 이용하여 url을 생성해주고, a태그의 download 속성을 이용해서 다운로드해줍니다.

const $link = document.createElement("a");
  
// 다운로드 될 파일명
$link.download = "export.svg";
$link.href = URL.createObjectURL(blob);
  
$link.click();

생성한 Blob 객체를 이용해 다운로드가 가능한 URL을 생성해주고, a태그의 download 속성을 이용해서 다운로드시켜줍니다.

예시 코드

See the Pen Untitled by hyukson (@hyukson) on CodePen.

SVG를 PNG로 변환

const $svg = document.querySelector("svg");

const data = new XMLSerializer().serializeToString($svg);
const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

const $canvas = document.createElement("canvas");

const {width, height} = $svg.getBoundingClientRect();

$canvas.width = width; 
$canvas.height = height;

const ctx = $canvas.getContext('2d');

const img = new Image();

img.onload = (e) => {
    ctx.drawImage(e.target, 0, 0);

    const $link = document.createElement("a");

    $link.download = "image.png";
    $link.href = $canvas.toDataURL("image/png");

    $link.click();
};

img.src = URL.createObjectURL(blob);

해당 방식은 SVG 다운로드 코드를 응용한 코드로, CanvasRenderingContext2D.drawImage 메서드를 이용해서 캔버스에 svg를 그려주고 toDataURL로 다운로드하는 코드입니다.

See the Pen SVG Download to PNG by hyukson (@hyukson) on CodePen.

도움받은 자료

https://codepen.io/aster_mnch/pen/qBVKoNP

Download SVG

...

codepen.io

https://qiita.com/aster-mnch/items/d89f1d1be43d89a6fe70

SVG イメージを JavaScript から保存する方法 - Qiita

GitHub に Mermaid がサポートされるようになったので、マークダウン中にいい感じのグラフを描画できるようになりましたね。しかし、 Mermaid で作成される画像は SVG 形式なので、ブラウザから

qiita.com

[CSS] 스크롤에 따라 움직이는 배경 이미지

나를 제외한 천재들 — Tue, 6 Sep 2022 11:35:04 +0900

코드

background-attachment: fixed;
/* background-image에만 적용 */

background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다.

- scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다.

- fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다.

예제 코드

See the Pen CSS Background Image attachment by hyukson (@hyukson) on CodePen.

<div class="color"></div>
<div class="image"></div>
<div class="color"></div>

배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다.

div {
  width: 100%;
  height: 100vh;
  position: relative;
}

.image {
  background: 
    url(https://cdn.pixabay.com/photo/2022/08/23/06/55/village-7405160_960_720.jpg) 
    no-repeat;
  background-attachment: fixed;
}

.color {
  background: #000;
}

이미지를 넣어줄 클래스에 background 속성을 이용해서 이미지를 넣어주고, background-attachment 속성을 이용해서 fixed 시켜줍니다.

도움받은 자료

https://developer.mozilla.org/ko/docs/Web/CSS/background-attachment

background-attachment - CSS: Cascading Style Sheets | MDN

CSS background-attachment 속성은 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

developer.mozilla.org

[CSS] 텍스트 세로로 표시하기

나를 제외한 천재들 — Sun, 4 Sep 2022 00:12:20 +0900

텍스트를 세로로 타이핑하는 방법으로 쉬운 방법인 CSS에 존재하는 writing-mode 속성을 소개하겠습니다.

코드

/* 세로로 왼쪽 -> 오른쪽 */
writing-mode: vertical-lr;

/* 세로로 오른쪽 -> 왼쪽 */ 
writing-mode: vertical-rl;

/* 영어는 추가로 사용해야함 */
text-orientation: upright;

CSS의 writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있습니다.

vertical-lr - 왼쪽에서 오른쪽
vertical-rl - 오른쪽에서 왼쪽

하지만 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시됩니다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하는 방법이 있습니다.

예제 코드

See the Pen Vertical Text by hyukson (@hyukson) on CodePen.

도움받은 자료

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions

텍스트 표시 방향 제어하기 - Web 개발 학습하기 | MDN

CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

writing-mode - CSS: Cascading Style Sheets | MDN

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

developer.mozilla.org

[JS] 룰렛 구현하기

나를 제외한 천재들 — Mon, 29 Aug 2022 03:37:36 +0900

JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다.

코드

See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen.

코드 풀이

const $c = document.querySelector("canvas");
const ctx = $c.getContext(`2d`);

// 룰렛에 들어갈 항목
const product = [
  "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살",
];

// 각 항목에 해당하는 색상
const colors = [
  "#dc0936", "#e6471d", "#f7a416", 
  "#efe61f ", "#60b236", "#209b6c", 
  "#169ed8", "#3f297e", "#87207b", 
  "#be107f", "#e7167b"
];

먼저 룰렛을 그려줄 Canvas 요소와 룰렛에 추가할 상품 목록과 해당하는 색상 배열을 정의해줍니다.

const newMake = () => {
    const [cw, ch] = [$c.width / 2, $c.height / 2];
  	const arc = (2 * Math.PI) / product.length;
  
    // 룰렛 배경 그리기
    for (let i = 0; i < product.length; i++) {
        ctx.beginPath();
        ctx.fillStyle = colors[i % colors.length];
        ctx.moveTo(cw, ch);
        ctx.arc(cw, ch, cw - 2, arc * i - Math.PI / 2, arc * (i + 1) - Math.PI / 2);
        ctx.fill();
        ctx.closePath();
    }

    ...

newMake 함수를 정의해주고, 그려줄 캔버스의 중점 위치를 구해야 합니다. 그러기 위해서는 Canvas의 Width, Height 절반의 값을 통해서 얻을 수 있습니다.

그리고 룰렛에 그릴 항목의 수에 따른 항목의 크기 값을 구해줍니다. 해당 값을 통해 동그란 룰렛에 각 영역을 그리는 방법은 arc 메서드를 이용하는 방법입니다.

arc 메서드를 호출하기 전에, 색칠할 색상을 변경해주고, 그려줄 펜의 위치를 중점 위치로 옮겨주는 작업을 먼저 해줍니다.

// x, y -> 중점, radius -> 반지름(x와 같은 값)
ctx.arc(x, y, radius, startAngle, endAngle);

// ctx.arc(cw, ch, cw, arc * (i - 1), arc * i);

해당 메서드에서 핵심은 startAngle, endAngle 인자입니다. 항목 개수로 나눈 크기를 이용해서 (i - 1) ~ i 지점까지 만의 원을 그리는 코드를 작성해줍니다.

    ...
    
    ctx.textAlign = "center"
    
    // 그려진 배경 위에 텍스트 그리기
    for (let i = 0; i < product.length; i++) {
      const angle = arc * i + arc / 2 - Math.PI / 2;

      ctx.save();
      
      ctx.translate(
        cw + Math.cos(angle) * (cw - 50),
        ch + Math.sin(angle) * (ch - 50),
      );
      ctx.rotate(angle + Math.PI / 2);
	
      // 항목명에 띄어쓰기가 있을 시 줄바꿈
      product[i].split(" ").forEach((text, j) => {
        ctx.fillText(text, 0, 30 * j);
      });

      ctx.restore();
    }
}

save, restore 메서드를 이용해서 속성 값이 적용된 캔버스의 설정 값(이미지 X)을 저장하고 가져올 수 있습니다. translate, rotate로 인해 변형된 콘텍스트 설정 값을 초기값으로 되돌려 주는 작업을 통해서 텍스트를 그려줍니다.

// 룰렛 돌리기
const rotate = () => {
	// 룰렛 당첨 결정
    const ran = Math.floor(Math.random() * product.length);
	
    const arc = 360 / product.length;
    const rotate = (360 - arc * (ran + 1) + 3600) + (arc / 3);
    
    $c.style.transform = `rotate(${rotate}deg)`;
    
    return ran;
};

// 함수 호출
const getResult = rotate();

setTimeout(() => alert(product[getResult]), 2000);

Math.random() 메서드를 통해서 랜덤 한 난수를 얻을 수 있습니다. 해당 수에 항목의 개수를 곱해주면 랜덤 한 당첨 결과를 얻을 수 있습니다.

랜덤 한 결과 값에 영역의 크기를 곱해서 룰렛의 위치를 맞추어주고, 360도를 10번 돌라는 의미의 3600을 추가로 더해줍니다. 추가로 오차범위를 조정하기 위해서 (arc / 3)의 수식을 추가로 사용하였습니다.

canvas {
  transition: 2s;
}

마지막으로 CSS 코드로 canvas에 transition 속성을 2초 정도로 지정해주면, 완성입니다.

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

CanvasRenderingContext2D.arc() - Web APIs | MDN

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.

developer.mozilla.org

[JS] 프로그래머스 두 큐 합 같게 만들기

나를 제외한 천재들 — Thu, 25 Aug 2022 16:50:42 +0900

출처

https://school.programmers.co.kr/learn/courses/30/lessons/118667

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

문제

길이가 같은 두 개의 큐를 나타내는 정수 배열 queue1, queue2가 매개변수로 주어집니다.

각 큐의 원소 합을 같게 만들기 위해 필요한 작업의 최소 횟수를 return 하도록 solution 함수를 완성해주세요. 단, 어떤 방법으로도 각 큐의 원소 합을 같게 만들 수 없는 경우, -1을 return 해주세요.

제한사항

1 ≤ queue1의 길이 = queue2의 길이 ≤ 300,000
1 ≤ queue1의 원소, queue2의 원소 ≤ 10 ^ 9
주의: 언어에 따라 합 계산 과정 중 산술 오버플로우 발생 가능성이 있으므로 long type 고려가 필요합니다.

풀이

배열로 큐를 구현하려 시도하니, 너무 많은 메서드 사용과, 연산으로 인해 시간 초과가 발생했습니다.

이럴 때 사용한 방법으로 알고리즘 문제에 자주 등장하는 투 포인터(다중 포인터) 알고리즘 방식을 사용하면 다른 원소를 가리키는 다중의 포인터를 조작하면서 원하는 값을 얻을 수 있습니다.

해당 방식을 사용하여 구현하게 되면, 실제로 배열에서 값을 빼고, 넣는 것이 아니기에 불필요한 연산이 줄어들게 됩니다.

최대 반복 횟수(queue1 길이 * 3) 만큼 돌려주면서, 한쪽 큐의 총합이 목표치보다 높을 시에는 queue1의 pointer 값를 높여주고, 값이 작으면 queue2의 pointer 값을 높여주면서 해당 값을 빼고, 넣는 효과를 통해 총합의 값을 조절해줍니다.

코드

function solution(queue1, queue2) {
    let sumQ1 = sum(queue1),
        sumQ2 = sum(queue2);
    
    let pointer1 = 0, 
        pointer2 = queue1.length;
    
    const target = (sumQ1 + sumQ2) / 2;
    const queue = [...queue1, ...queue2];
    
    const end = queue1.length * 3;
    
    for (let count = 0; count < end; count++) {
        if (sumQ1 === target) {
            return count;
        }
        
        if (sumQ1 > target) {
            sumQ1 -= queue[pointer1++];
        } else {
            sumQ1 += queue[pointer2++];
        }
    }
    
    return -1;
}

const sum = (arr) => arr.reduce((acc, v) => acc + v, 0);

[JS] 프로그래머스 성격 유형 검사하기

나를 제외한 천재들 — Thu, 25 Aug 2022 13:21:00 +0900

출처

https://school.programmers.co.kr/learn/courses/30/lessons/118666

프로그래머스

programmers.co.kr

문제

매우 동의나 매우 비동의 선택지를 선택하면 3점을 얻습니다.
동의나 비동의 선택지를 선택하면 2점을 얻습니다.
약간 동의나 약간 비동의 선택지를 선택하면 1점을 얻습니다.
모르겠음 선택지를 선택하면 점수를 얻지 않습니다.

검사 결과는 모든 질문의 성격 유형 점수를 더하여 각 지표에서 더 높은 점수를 받은 성격 유형이 검사자의 성격 유형이라고 판단합니다. 단, 하나의 지표에서 각 성격 유형 점수가 같으면, 두 성격 유형 중 사전 순으로 빠른 성격 유형을 검사자의 성격 유형이라고 판단합니다.

질문마다 판단하는 지표를 담은 1차원 문자열 배열 survey와 검사자가 각 질문마다 선택한 선택지를 담은 1차원 정수 배열 choices가 매개변수로 주어집니다. 이때, 검사자의 성격 유형 검사 결과를 지표 번호 순서대로 return 하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ survey의 길이 ( = n) ≤ 1,000
- survey의 원소는 "RT", "TR", "FC", "CF", "MJ", "JM", "AN", "NA" 중 하나입니다.
- survey[i]의 첫 번째 캐릭터는 i+1번 질문의 비동의 관련 선택지를 선택하면 받는 성격 유형을 의미합니다.
- survey[i]의 두 번째 캐릭터는 i+1번 질문의 동의 관련 선택지를 선택하면 받는 성격 유형을 의미합니다.
choices의 길이 = survey의 길이
- choices[i]는 검사자가 선택한 i+1번째 질문의 선택지를 의미합니다.
- 1 ≤ choices의 원소 ≤ 7

1	매우 비동의
2	비동의
3	약간 비동의
4	모르겠음
5	약간 동의
6	동의
7	매우 동의

풀이

choices의 값이 3보다 크면 동의, 작으면 비동의라고 생각하고 풀이하면 쉬운 문제입니다.

각 성격 유형 케이스를 만들어주고, 점수가 3보다 크면 비동의 캐릭터에 점수를 주고, 작을 시 동의 캐릭터에 점수를 줍니다. 모든 선택지에 점수를 부여한 후, 캐릭터에게 부여된 점수가 더 큰 캐릭터를 반환해줍니다.

코드

function solution(survey, choices) {
    const MBTI = {};
    const types = ["RT","CF","JM","AN"];
    
    types.forEach((type) =>
        type.split('').forEach((char) => MBTI[char] = 0)
    )
    
    choices.forEach((choice, index) => {
        const [disagree, agree] = survey[index];
        
        MBTI[choice > 4 ? agree : disagree] += Math.abs(choice - 4);
    });

    return types.map(([a, b]) => MBTI[b] > MBTI[a] ? b : a).join("");
}

[JS] 캔버스(Canvas) 이미지 다운로드

나를 제외한 천재들 — Sat, 20 Aug 2022 21:00:06 +0900

A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다.

예제 코드

See the Pen drawing by hyukson (@hyukson) on CodePen.

코드

// 다운로드할 캔버스
const $canvas = document.querySelector("canvas");

// A DOM 생성
const $link = document.createElement("a");

$link.download = "파일명.png";
$link.href = $canvas.toDataURL("image/png");

// element에 마우스 클릭
$link.click();

document.createElement 메서드로 가상의 A DOM 요소를 생성해줍니다. 해당 a태그에 download 속성을 부여함으로써, 링크 이동 대신에 다운로드 기능을 이용할 수 있습니다.

도움받은 자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

<a> - HTML: Hypertext Markup Language | MDN

HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click

HTMLElement.click() - Web API | MDN

HTMLElement.click() 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.

developer.mozilla.org

[CSS] z-index에 딜레이 적용시키기

나를 제외한 천재들 — Wed, 3 Aug 2022 15:41:24 +0900

코드

See the Pen CSS z-index Delay by hyukson (@hyukson) on CodePen.

코드 풀이

.zIndexDelay {
  animation: zIndex .5s step-end forwards; 
}

@keyframes zIndexDelay {
  to { 
    z-index: 5; 
  }
}

animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다.

JavaScript 사용하여 구현하기

.zIndex {
  z-index: 22;
}

CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다.

setTimeout(() => {
  요소.classList.add("zIndex");
}, 1000);

JS의 setTimeout 함수로 딜레이를 준 후 클래스를 추가해 z-index를 적용시켜줍니다.

[JS] 마우스 이동 방향 판단하기

나를 제외한 천재들 — Fri, 29 Jul 2022 20:56:20 +0900

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다.

코드

See the Pen mouse movement direction by hyukson (@hyukson) on CodePen.

코드 풀이

// 이벤트 생성
window.addEventListener("mousemove", getMouseDirection);

마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다.

let prevX = 0, prevY = 0; // 이전에 있던 좌표 

function getMouseDirection(event) {
  const xDir = prevX <= e.pageX ? "right" : "left";
  const yDir = prevY <= e.pageY ? "down" : "up";
  
  prevX = e.pageX;
  prevY = e.pageY;
  
  console.log(xDir + "-" + yDir);
}

마우스 좌표값의 대소를 비교하기 위해서는 현재 좌표 이전에 위치해 있었던 좌표 값을 저장하고 현재 값과 비교해줘야합니다. 저장된 값과 현재의 마우스 좌표 값을 비교하여 방향을 판단해줍니다.

현재 값이 이전 값보다 작으면, 왼쪽 또는 위쪽으로 이동했다고 볼 수 있습니다.
반대로 값이 크다면, 오른쪽 또는 아래쪽으로 이동했다고 볼 수 있습니다.

[JS] 배열을 n개씩 나누어 묶기(Chunk)

나를 제외한 천재들 — Mon, 25 Jul 2022 21:38:10 +0900

1차원 배열을 n개씩 묶어서 정한 개수만큼 2차원 배열로 바꿔서 반환시켜 주는 함수를 제작해 보았습니다.

코드

function chunk(data = [], size = 1) {
  const arr = [];
    
  for (let i = 0; i < data.length; i += size) {
    arr.push(data.slice(i, i + size));
  }

  return arr;
}

// chunk([1, 2, 3, 4], 2) -> [ [1,2], [3,4] ]

chunk 함수의 매게 변수로 자를 원본 배열과 개수(n)를 받아줍니다.

Array.slice 메서드를 이용해서 i번째부터 ( i + 나눌개수 ) 만큼의 배열 값을 가져와 새로운 배열에 담아줍니다.

해당 방식으로 데이터가 모두 Chunk 되면 새로운 배열을 반환해줍니다.

코드 예시

const item = [1, 2, 3, 4];

chunk(item, 2);
// [ [1,2], [3,4] ]

chunk(item, 1);
// [ [1], [2], [3], [4] ]

[티스토리] Codepen 코드블럭 적용 시키기

나를 제외한 천재들 — Thu, 21 Jul 2022 12:20:27 +0900

코드펜은 HTML, CSS, JS를 작성하고 결과를 실시간으로 확인할 수 있는 유용한 코딩 사이트입니다. 또한 제작한 코드를 공유하는 데에도 유용하기에 많은 코딩 블로그가 애용하는 코딩 사이트이기도 합니다.

https://codepen.io/

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

간단 요약

계정 필요, 가입, 로그인
Pen 생성 후 코드 작성
Save 버튼 클릭 후 Embed 버튼 클릭
설정 후에 HTML 코드를 복사
티스토리 글 작성 페이지에서 글 작성 모드를 HTML로 바꾸고 원하는 위치에 붙여 넣기

회원 가입하기

블로그에 Codepen 코드를 올리기 위해서는 계정이 필요하며, twitter, facebook, github 등의 계정이 존재할 시 간편하게 가입과 로그인이 가능합니다.

회원가입

Codepen에 로그인하기

간단한 sns 로그인을 이용하거나 가입한 아이디를 이용해서 로그인을 해줍니다.

로그인

새로운 Pen 생성

Codepen에서는 하나의 작품을 Pen라고 정의하고 있습니다. 왼쪽 상단에 존재하는 Pen 탭을 클릭해 새로운 작품을 생성해줍니다.

새로운 Pen 생성

그러면 HTML, CSS, JavaScript를 작성할 수 있는 화면이 나오게 됩니다.

각 언어 영역에 알맞은 코드를 입력할 시, 아래에 보이는 결과창에 보이게 됩니다.

결과

티스토리에 코드 적용시키기

왼쪽에 존재하는 텍스트를 바꿈으로 제목을 바꿀 수 있습니다.

지금까지의 진행상황을 저장하기 위해서는 상단에 존재하는 Save 버튼을 클릭해 서버에 저장시킬 수 있습니다.

코드 저장 방법

코드 저장이 완료되었다면, 오른쪽 하단에 존재하는 Embed 버튼을 클릭해 코드를 공유할 수 있습니다.

Embed 버튼 클릭

아래와 같은 창이 나오면 공유하기 전 마지막으로 다양한 설정을 할 수 있습니다. Theme에서 Light와 Dark를 설정함으로 메인 색상을 변경할 수도 있고, 그 외에 기본으로 보여줄 코드 탭을 설정할 수도 있습니다.

또한 하단에 존재하는 회색 바를 드래그하여 높이를 조절할 수도 있습니다.

Embed this pen

설정 후 오른쪽 하단에 존재하는 HTML (Recommended) 탭에서 Copy code버튼을 클릭해 복사해줍니다.

코드를 복사한 후 티스토리의 글 작성 페이지로 가줍니다. 상단에 존재하는 기본 모드 탭을 클릭 후 모드를 HTML으로 바꿔줍니다.

빨간색 박스처럼 Codepen 블럭을 넣고 싶은 부분에 붙여 넣기 해줍니다.

HTML에 적용

붙여 넣기 한 후 다시 기본 모드로 돌아오면 아래와 같은 이미지처럼 생긴 박스가 추가된 다면 Codepen 코드 추가에 성공하신 겁니다.

적용 예시

복사한 Codepen 코드만 존재한다면 티스토리가 아닌 사이트에서도 원하는 위치에 붙여 넣기 하여서 이용이 가능합니다.

[JS] 좌표로 요소(element) 가져오기

나를 제외한 천재들 — Tue, 19 Jul 2022 09:36:20 +0900

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다.

const element = document.elementFromPoint(x, y);

창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다.

여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다.
해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다.
해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다.
pointer-events 속성이 none으로 설정된 요소는 무시됩니다.

예시 코드

mousemove 이벤트를 이용하여 움직인 마우스 좌표 값에 존재하는 요소를 감지하여 보여줍니다.

See the Pen elementFromPoint Example by hyukson (@hyukson) on CodePen.

다수의 element 찾기

여러개의 요소를 찾기 위해서는 elementsFromPoint 함수를 사용하면 됩니다.

elementFromPoint와 다른 점은 최상위 요소부터 차례대로 창 기준 좌표에 존재하는 요소들이 정렬되어 반환되는 함수입니다.

const element = document.elementsFromPoint(x, y);

[JS] 드래그 이동이 가능한 draggable 요소 만들기

나를 제외한 천재들 — Mon, 18 Jul 2022 21:29:43 +0900

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다.

draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다.

코드

See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen.

코드 풀이

<div class="mover">drag</div>

먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다.

let isPress = false,   // 마우스를 눌렀을 때
    prevPosX = 0,      // 이전에 위치한 X값
    prevPosY = 0;      // 이전에 위치한 Y값
    
const $target = document.querySelector(".mover");

// 드래그 구현에 필요한 이벤트
$target.onmousedown = start;
$target.onmouseup = end;

// 요소의 상위 요소 (임시로 window)
window.onmousemove = move;

드래그 기능을 구현하기 위해서는 mousedown, mousemove, mouseup 이벤트를 사용해야 합니다.

mousedown - 이벤트가 적용된 요소 위에서 마우스 왼쪽 버튼을 누를 때 발생합니다.
mousemove - 이벤트가 적용된 요소위에서 마우스를 움직일 때 발생합니다.
mouseup - 마우스 버튼 누르고 있다가 뗄 때 발생합니다.

JS에서는 일반 요소의 drag 여부를 판단할 수 없습니다. 그러므로 드래그의 조건인 마우스 클릭과 움직임 이벤트로 드래그를 구현해야 합니다.

// mousedown
function start(e) {
  prevPosX = e.clientX;
  prevPosY = e.clientY;

  isPress = true;
}

요소 위에서 마우스 왼쪽 버튼을 클릭할 시 발생되는 mousedown 이벤트로 함수를 호출해줍니다. 요소가 위치한 좌표를 얻어서 변수에 저장해주고, 마우스 버튼 누름 여부를 저장해줍니다.

// mousemove
function move(e) {
  if (!isPress) {
    return;
  }
  
  // 이전 좌표와 현재 좌표 차이값
  const posX = prevPosX - e.clientX; 
  const posY = prevPosY - e.clientY; 
  
  // 현재 좌표가 이전 좌표로 바뀜
  prevPosX = e.clientX; 
  prevPosY = e.clientY; 
  
  // left, top으로 이동
  $target.style.left = ($target.offsetLeft - posX) + "px";
  $target.style.top = ($target.offsetTop - posY) + "px";
}

요소 위에서 마우스를 움직이면 이벤트가 발생되는 mousemove 이벤트는 "드래그"가 아닌 "움직임"을 감지합니다.

그러므로 드래그의 충족 조건인 왼쪽 마우스 버튼 클릭 여부를 체크해줘야 합니다.

마우스 클릭 여부가 체크되었다면, 이제 마우스를 움직인 만큼 요소를 이동시켜야 합니다. 요소를 이동시키는 방법은 이전에 위치했던 좌표에서 현재 마우스를 움직인 좌표를 뺌으로 차이 값을 구해주고, top과 left 속성으로 이동시켜줍니다.

// mouseup
function end() {
  isPress = false;
}

마우스를 땔 시, move 함수의 코드가 실행되지 않도록 다시 isPress 변수 값을 false로 바꿔서 마우스 버튼을 땠다는 것을 알 수 있도록 해줍니다.

[CSS] 떨리는 효과 구현하기

나를 제외한 천재들 — Thu, 7 Jul 2022 18:56:50 +0900

별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다.

코드

See the Pen Vibration Animation Box by hyukson (@hyukson) on CodePen.

코드 풀이

<div class="box vibration"></div>

떨림 효과를 줄 박스 요소를 하나 만들어줍니다.

.box {
  width: 150px;
  height: 150px;
  background: #febf00;
}

.box.vibration {
  animation: vibration 0.1s infinite;
}

박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다.

@keyframes vibration {
  from {
    transform: rotate(1deg);
  }
  to {
    transform: rotate(-1deg);
  }
}

transform: rotate 속성을 이용한 미세한 회전을 0.1초 간격의 반복 애니메이션으로 마치 진동이 울리는 것과 같은 흔들리는 효과를 구현하였습니다.

JS를 사용한 응용

자바스크립트를 사용해서 박스를 클릭할 때, 짧게 동작되는 움직이는 애니메이션 기능을 구현해보았습니다.

<div class="box" onclick="vibration(this)"></div>

"박스를 클릭할 때"를 판단하기 위해서 onclick 이벤트를 넣어서 박스 요소를 생성해주었습니다.

const vibration = (target) => {
  target.classList.add("vibration");

  setTimeout(function() {
    target.classList.remove("vibration");
  }, 400);
}

클래스를 추가, 제거할 수 있는 add, remove 메서드를 이용해서, 클릭 시 vibration 클래스를 추가해주고 setTimeout 함수로 0.4초 딜레이를 줍니다. 그 후 해당 요소에 존재하는 vibration 클래스를 지워줌으로 진동 효과를 멈춰줍니다.

[JS] 브라우저 크기 변경에 반응하는 이벤트

나를 제외한 천재들 — Mon, 4 Jul 2022 21:05:13 +0900

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다.

// 1.
window.addEventListener(`resize`, function() {
  
});

// 2.
window.onresize = function() {
	
}

변경된 사이즈 가져오기

window.onresize = function() {
  const width = window.innerWidth;
  const height = window.innerHeight;	
  
  console.log(width);
  console.log(height);
}

윈도우 창의 현재 가로, 세로 사이즈 정보는 wndow.innerWidth, window.innerHeight 속성에 담겨있습니다.

이벤트가 실행될 때마다 달라지는 크기를 확인할 수 있습니다.

React에서 resize 이벤트 다루기

useEffect(()=> {
  const windowResize = () => {
    console.log("resize");
  }

  window.addEventListener(`resize`, windowResize);
 
  return () => {
     window.removeEventListener(`resize`, windowResize);
   }
}, []);

리액트에서는 useEffect 안에 addEventListenr 함수를 넣어놔도 계속해서 바인딩이 되는 문제가 발생합니다.

이를 방지하기 위해서 새로운 바인딩이 발생되기 전에 기존의 리스너를 제거해줘야 합니다.

[JS] 자동으로 글자 적는 타이핑 효과 구현하기

나를 제외한 천재들 — Wed, 29 Jun 2022 13:09:32 +0900

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다.

예시 코드

See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen.

위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요!

무한반복 막기

// 지우는 효과
if (letters[i + 1]) remove();

코드 풀이

<h1 class="text"></h1>

텍스트가 입력될 요소를 하나 생성해줍니다.

// 텍스트 요소
const $text = document.querySelector(".text");

// 입력될 글자 모음
const letters = ["HTML", "CSS", "JavaScript"];

// 글자 입력 속도
const speed = 100;

// 현재 지정된 글자
let i = 0;

타이핑 효과를 구현하기 위해서 필요한 기본 요소 및 설정 값들을 선언해줍니다.

// 딜레이 기능 ( 마이크로초 )
function wait(ms) {
  return new Promise(res => setTimeout(res, ms))
}

텍스트가 작성되는 속도나 작성되고 텍스트가 멈추는 시간을 구현하기 위해서 setTimeout 함수로 딜레이를 주고, Promise를 이용해서 딜레이 기능을 주는 함수를 구현해주었습니다.

// 타이핑 기능   ( wait 기능을 위한 async, await )
const typing = async () => {
  const letter = letters[i].split("");
  
  while (letter.length) {
    // 글자 작성 속도 조절
    await wait(speed);
    $text.innerHTML += letter.shift(); 
  }
  
  // 작성 된 후 잠시 멈추기
  await wait(800);
  
  // 다음에 작성될 글자가 있을 시 지우는 효과 실행
  if (letters[i + 1]) remove();
}

작성할 글자를 모아둔 배열에서 i번째 글자를 가져와 문자열을 배열로 나눠줍니다.

모든 문자가 텍스트 요소에 추가되면 종료되는 while 문을 작성해줍니다. 배열로 나눈 입력될 문자에서 shfit 메서드를 이용해서 배열의 제일 앞에 있는 값을 뽑아줍니다.

$text.innerHTML 속성을 이용해서 딜레이와 하나씩 추가되는 기능을 통해 타이핑되는 효과를 구현하였습니다.

wait 함수를 이용해서 while 안에서 딜레이 시간이 생기게 만들어 줍니다.

  ...

  // 작성 된 후 잠시 멈추기
  await wait(800);
  
  // 다음에 작성될 글자가 있을 시 지우는 효과 실행
  if (letters[i + 1]) remove();
}

while문이 종료된 후 바로 지우는 효과가 실행되면, 텍스트를 읽을 시간이 없어집니다. 다시 한번 wait 함수를 이용해서 다음 코드 실행에 딜레이를 줍니다.

이제 타이핑 기능을 통해서 글자가 작성되었으니 지우는 효과를 만들어야 합니다. 글자를 지우면 그 자리를 다른 글씨가 대체해야 하므로, 다음에 작성될 텍스트가 있을 때 지우는 효과를 실행하도록 조건문을 걸어주었습니다.

// 글자를 지우는 효과
const remove = async () => {
  const letter = letters[i].split("");
  
  while (letter.length) {
    await wait(speed);
    
    letter.pop();
    $text.innerHTML = letter.join(""); 
  }
  
  // 다음 순서의 글자로 변경
  i++;
  // 다시 타이핑 시작
  typing();
}

글자를 지우는 효과 또한 타이핑 기능과 비슷합니다. 타이핑 기능과의 차이점으로는 글자를 innerHTML를 이용해서 추가시키는 것이 아닌 대체해주어야 합니다.

다시 한번 letter 변수에 작성될 글자를 가져와 선언해줍니다. 이번엔 pop 메서드를 이용해서 뒷 문자를 뽑아 버려 주고, 남은 글자들을 다시 문자열로 합친 뒤에 뒷 글자가 사라진 문자로 글자를 대체시켜줍니다.

커서 기능 구현

.text::after {
  content: '';
  margin-left: .6rem;
  border-right: 2px solid #777;
  animation: cursor .9s infinite steps(2);
}

@keyframes cursor {
  from { border-right: 2px solid #222; }
  to { border-right: 2px solid #777; }
}

border-right 속성을 이용해서 타이핑되는 요소 오른쪽에 막대기를 생성해줍니다. animation 속성과 @keyframes을 이용해 border 색상이 바뀌는 애니메이션 효과를 제작해줍니다.

줄바꿈 타이핑

See the Pen Letter Typing(Line Break) Effect by hyukson (@hyukson) on CodePen.

// 줄바꿈을 위한 <br> 치환
const changeLineBreak = (letter) => {
  return letter.map(text => text === "\n" ? "<br>" : text);
}

// 기존에서 변경된 코드
const typing = async () => {  
  // 기존코드에서 개행치환코드 추가
  const letter = changeLineBreak(letters[i].split(""));
  
  ...

줄바꿈 타이핑을 구현하기 전에 HTML DIV상에서 개행 문자로 줄바꿈이 불가능하며, " " 태그를 이용해서 줄바꿈 시켜줘야 합니다.

개행 문자를 "<br" 태그로 바꿔주는 코드를 추가해줌으로써 간단하게 구현할 수 있습니다.

[JS] 클립보드에 특정 텍스트 복사하기

나를 제외한 천재들 — Wed, 22 Jun 2022 23:03:19 +0900

코드블럭 오른쪽 상단바에 존재하는 "복사 아이콘"을 클릭해보세요!

"Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다.

코드

클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽게 구현할 수 있습니다.

document.execCommand("copy") - 클립 보드에 텍스트 복사 기능
document.execCommand("cut") - 클립 보드에 텍스트 잘라내기 기능
document.execCommand("paste") - 클립 보드에 이미 존재하는 내용을 붙여넣기 기능

해당 기능은 input, textarea와 같은 입력창에 입력된 값 중 선택(드래그)된 상태인 텍스트에 적용되는 기능입니다.

const copy = (text) => {
  // 임시의 textarea 생성
  const $textarea = document.createElement("textarea");

  // body 요소에 존재해야 복사가 진행됨
  document.body.appendChild($textarea);
  
  // 복사할 특정 텍스트를 임시의 textarea에 넣어주고 모두 셀렉션 상태
  $textarea.value = text;
  $textarea.select();
  
  // 복사 후 textarea 지우기
  document.execCommand('copy');
  document.body.removeChild($textarea);
}

copy("복사 테스트");

먼저 텍스트를 삽입할 임시의 textarea 요소를 생성해줍니다. 그 후 원하는 텍스트 값을 임시의 textarea에 삽입 해준 뒤에 삽입한 모든 텍스트를 선택(복사를 하기 위해서 드래그) 시켜줍니다.

위에서 소개한 document.execCommand("copy") 기능을 이용하여 셀렉션 된 텍스트들을 복사시켜주고 임시의 textarea 요소는 제거해줍니다.

간단 요약으로 아래와 같이 진행됩니다.

텍스트를 입력할 임시의 입력창(textarea) 생성
입력창에 텍스트를 입력하고 선택(드래그)시켜 복사 준비
execCommand("copy")로 텍스트 복사
생성한 임시의 입력창 제거

익스플로러 환경에서 복사

const copy = (text) => {
  window.clipboardData.setData("text", text);
} 

copy("IE 복사 테스트");

익스플로러 환경에서 복사 기능을 구동하기 위해서는 IE 환경에서만 존재하는 window.clipboardData.setData() 메서드를 사용하여야 합니다.

[JS] 글 작성 경과 시간 표시 (방금전, 몇분전, 몇시간전, 몇일전, 몇달전, 몇년전)

나를 제외한 천재들 — Fri, 17 Jun 2022 01:12:43 +0900

유명 SNS 게시물을 보면 작성 날짜 항목에 "방금 전", "몇분 전", "몇시간 전", "몇일 전"에 작성됨, 과 같은 형식으로 표현하는 것을 볼 수 있습니다.

See the Pen Untitled by hyukson (@hyukson) on CodePen.

코드

function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date();

  const diff = (end - start) / 1000;
  
  const times = [
    { name: '년', milliSeconds: 60 * 60 * 24 * 365 },
    { name: '개월', milliSeconds: 60 * 60 * 24 * 30 },
    { name: '일', milliSeconds: 60 * 60 * 24 },
    { name: '시간', milliSeconds: 60 * 60 },
    { name: '분', milliSeconds: 60 },
  ];

  for (const value of times) {
    const betweenTime = Math.floor(diff / value.milliSeconds);

    if (betweenTime > 0) {
      return `${betweenTime}${value.name} 전`;
    }
  }
  return '방금 전';
}

elapsedTime('2022-11-15');

코드 풀이

function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date(); // 현재 날짜
  
  const diff = (end - start) / 1000; // 경과 시간 구하기 (밀리초 기본으로 빼주기)

경과시간을 구하기 위해서는 비교할 날짜와 현재 날짜가 필요로 합니다. 그러므로 함수 파라미터 값으로 비교할 날짜 정보를 받아와 줍니다. 그다음 현재 날짜와 비교할 날짜 사이의 경과 시간 값을 구해줍니다.

const times = [
  { name: '년', milliSeconds: 60 * 60 * 24 * 365 },
  { name: '개월', milliSeconds: 60 * 60 * 24 * 30 },
  { name: '일', milliSeconds: 60 * 60 * 24 },
  { name: '시간', milliSeconds: 60 * 60 },
  { name: '분', milliSeconds: 60 },
];

// 아래 코드를 위해서는 (년 ~ 분) 순서여야함

이제 "몇분 전", "며칠 전" 등과 같은 시간을 표시하기 위해서 배열에 차례대로 시간 명칭과 해당하는 밀리초 값을 구분 지어 작성해주고

아래 반복문 코드를 위해서 대소 관계를 비교하기 위해서 [년도 ~ 분] 순서로 코드를 작성해줍니다.

// 년 단위부터 알맞는 단위 찾기
for (const value of times) {
  const betweenTime = Math.floor(diff / value.milliSeconds);
  
  // 큰 단위는 0보다 작은 소수점 값이 나옴
  if (betweenTime > 0) {
    return `${betweenTime}${value.time} 전`;
  }
}

// 모든 단위가 맞지 않을 시
return "방금 전";

경과시간에 밀리초 값을 나눠서 비교 값을 구해줄 수 있습니다. 해당 단위 밀리초 값보다 경과시간이 적을 시, 0보다 작은 소수점 값이 나오게 됩니다. ( 1분 / 1년 ) => 0.0000019...

구해준 값이 0보다 작을 시, 다음 작은 단위로 넘어가서 다시 비교해주고 정수 값이 나오게 되면, 구한 비교 값에 시간 명칭을 붙여서 반환해줍니다. 마지막 분단위에서도 결과가 나오지 않는다면 더 이상 비교가 불가능하다고 판단하고 "방금 전"이라는 문자를 반환해줍니다.

Intl.RelativeTimeFormat 사용하기

function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date();

  const diff = (end - start) / 1000;

  const formatter = new Intl.RelativeTimeFormat('ko', {
    numeric: 'auto',
  });

  const times = [
    { name: 'year', milliSeconds: 60 * 60 * 24 * 365 },
    { name: 'month', milliSeconds: 60 * 60 * 24 * 30 },
    { name: 'day', milliSeconds: 60 * 60 * 24 },
    { name: 'hour', milliSeconds: 60 * 60 },
    { name: 'minute', milliSeconds: 60 },
  ];

  for (const value of times) {
    const betweenTime = Math.floor(diff / value.milliSeconds);

    if (betweenTime > 0) {
      return formatter.format(betweenTime, value.name);
    }
  }
  return '방금 전';
}

elapsedTime('2022-11-15');

Intl.RelativeTimeFormat 객체를 사용해서 현재 시간 기준으로 얼마나 시간이 지났는지 혹은 얼마나 걸릴 것인지 국제화해주는 형식입니다.

formatter.format(1, 'day')
// '내일'
formatter.format(-1, 'day')
// '어제'
formatter.format(0, 'day')
// '오늘'
formatter.format(60, 'day')
// '60일 후'

다음과 같이 '1일 전', '2일 전'과 같이 형식이 아닌 최대한 문자를 사용해서 '오늘', '어제'와 같은 형식을 받을 수 있습니다.

참고자료

https://gurtn.tistory.com/113

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24));..

gurtn.tistory.com