야근시렁

1. 빈값 체크 하기 (Null, Undefined)

form 작성할때 필수값 체크할때 무조건 필요해요. 단순히 value가 비어있을때 체크해도 되지만 확실하게 null값, undefined 값을 같이 비교해주면 완벽하게 비교할 수 있습니다.

function isEmpty(value) {
    return value === null || value === undefined || value === '';
}

// 사용 예시
console.log(isEmpty(null));  // true
console.log(isEmpty(''));    // true
console.log(isEmpty(0));     // false
console.log(isEmpty([]));    // false

2. 숫자인지 체크 

보통 input에 number 로 타입을 지정하면 대부분 체크가 되긴하지만 "e" 입력했을때 입력되는거 아시나요? ㅎㅎ 1e+6 이라고 입력했을때 수학적인 측면에서 1000000 을 뜻하기 때문에 e는 숫자체크를 해도 입력이됩니다. 이를 온전히 차단하고자 유효성 체크를 해주면 좋습니다.

function isNumeric(value) {
    return !isNaN(value) && typeof value === 'number';
}

// 사용 예시
console.log(isNumeric(123));    // true
console.log(isNumeric('123'));  // false
console.log(isNumeric(NaN));    // false
console.log(isNumeric(3.14));   // true

3. 이메일 타입 체크 

이 또한 input의 타입을 email로 체크해주면 웬만하면 체크해주긴 합니다만, 간혹 스크립트로 체크해야할 때가 있습니다. 

주로 정규식을 사용해서 체크합니다.

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// 사용 예시
console.log(isValidEmail('test@example.com'));  // true
console.log(isValidEmail('test@.com'));         // false
console.log(isValidEmail('test@example'));      // false

4. 전화번호 타입 체크 

한국에서 많이 사용하는 전화번호 체크입니다. 나라마다 번화번호 수가 다르니 한국한해서 사용 가능하지만, 진짜 많이 사용하는 유효성 체크 문법입니다. 역시 유효성 체크로 간단하게 할 수 있습니다.

function isValidPhoneNumber(phone) {
    const phoneRegex = /^01[016789]-\d{3,4}-\d{4}$/;
    return phoneRegex.test(phone);
}

// 사용 예시
console.log(isValidPhoneNumber('010-1234-5678'));  // true
console.log(isValidPhoneNumber('02-1234-5678'));   // false
console.log(isValidPhoneNumber('01012345678'));    // false

5. 한국 원화 타입 함수 

이건 유효성이라기 보다는 타입 변환이라고 보는게 더 맞겠네요. 그런데 이것도 진짜 많이 씁니다. 매번 귀찮게 찾아서 썼는데 이번기회에 저장해 놓고 걍 복붙해서 쓰려고요. 간단하게 만약 10000 일때 10,000 이렇게 표시해 주도록 해주는 겁니다.

function formatCurrencyKRW(amount) {
    let num = Number(amount); // "10000"일때 10000 로 변환
    if (isNaN(num)) { // 만약 "참새"같은 글자인 경우에는 return 
        return 'Invalid number';
    }
    return num.toLocaleString('ko-KR') + ' 원';
}

// 사용 예시
console.log(formatCurrencyKRW(1000000));    // "1,000,000 원"
console.log(formatCurrencyKRW('123456789'));// "123,456,789 원"
console.log(formatCurrencyKRW('10000'));    // "10,000 원"
console.log(formatCurrencyKRW('abc'));      // "Invalid number"
console.log(formatCurrencyKRW(NaN));        // "Invalid number"

아무리 AI 로 간단하게 검색해서 사용할 수 있다고 해도,

이렇게 자주 사용하는 유효성 체크를 정리해두면 바로 바로 복붙해서 사용하는게 훨씬 편하기 때문에 올려봅니다. 

import React from "react";
import useCounter from "./useCounter"; // 위에서 만든 useHook 

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(5);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>➕Increase</button>
      <button onClick={decrement}>➖Decrease</button>
      <button onClick={reset}>🔄Reset</button>
    </div>
  );
}

export default CounterComponent;

React에서 Custom Hook은 useState, useEffect, useRef 등의 기본 Hook을 조합하여 재사용 가능한 로직을 만들어 사용할 수 있게 해줍니다.
커스텀 훅의 네이밍 규칙은 "use"로 시작해야 하며, 내부에서 hook을 호출할 수 있습니다.

useHook의 기본구조를 살펴보면 아래와 같습니다.

import { useState, useEffect } from "react";

function useCustomHook() {
  const [state, setState] = useState(null);

  useEffect(() => {
    console.log("Custom Hook Mounted!");

    return () => {
      console.log("Custom Hook Unmounted!");
    };
  }, []);

  return [state, setState];
}

위의 구조를 참고해서 counter hook 을 만들고 호출도 해봅시다.

// 커스텀 useCounter 

import { useState } from "react";
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  const reset = () => setCount(initialValue);
  return { count, increment, decrement, reset };
}
export default useCounter;

이렇게 나만의 custom hook을 사용해서 재사용성을 높이고, 코드 분리를 하여 코드를 최척화 가능합니다. 

저는 모든 플젝에서 많이 사용하고 있습니다. 😉

퀴즈관련된 로직을 만들던 중 한글 초성 맞추기 관련 로직을 찾아보게되었습니다. 

흔히 쓰지 않는 로직이지만 이참에 정리해 두려고 합니다. 

한글의 초성을 추출하기 위해서는 각 한글 문자를 유니코드로 변환한 후, 해당 유니코드에서 특정 값을 빼서 초성의 유니코드를 얻어야 합니다. 그리고 그 유니코드를 다시 문자로 변환하여 초성을 얻을 수 있습니다.

const [extractInput, setExtractInput] = useState("");
const [extractChar, setExtractChar] = useState("");
const getInitials = (e) => {
    setExtractInput(e.target.value);
    const str = e.target.value;
    const cho = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
    let result = "";
    for (let i = 0; i < str.length; i++) {
        const charCode = str.charCodeAt(i);
        if (charCode >= 0xAC00 && charCode <= 0xD7A3) {
            const uni = charCode - 0xAC00;
            const choIdx = Math.floor(uni / (21 * 28));
            result += cho[choIdx];
        } else {
            result += str[i];
        }
    }
    setExtractChar(result);
}

return(
	<div>
        <input type="text" value={extractInput} onChange={getInitials} style={{border: "1px solid lightgrey"}} />
        <br/>
        <span>range value: {extractChar}</span>
    </div>
)

입력된 문자열의 각 문자에 대해 유니코드를 계산하여 초성을 추출하고, 그 결과를 state에 업데이트 해주면됩니다. 

charCode >= 0xAC00 && charCode <= 0xD7A3 이 부분은 한글 유니코드의 범위를 체크하는 조건입니다.

0xAC00은 '가'의 유니코드 값으로, 이는 한글 음절의 시작점이며, 초성이 'ㄱ', 중성이 'ㅏ', 종성이 없는 경우를 나타냅니다.
0xD7A3은 '힣'의 유니코드 값입니다. 이는 한글 음절의 끝점이며, 초성이 'ㅎ', 중성이 'ㅣ', 종성이 'ㅎ'인 경우를 나타냅니다.
즉, charCode >= 0xAC00 && charCode <= 0xD7A3 이 조건은 주어진 문자가 한글 음절인지를 확인합니다. 
이 조건이 true이면, 해당 문자는 '가'부터 '힣' 사이의 한글 음절이라는 것을 알 수 있습니다.

이 범위 내의 문자에 대해서만 초성을 추출하는 로직을 적용합니다. 만약 문자가 이 범위 밖에 있다면, 그 문자는 한글 음절이 아니므로 초성 추출 로직을 적용하지 않고, 원래 문자를 그대로 반환합니다.
만약 한글이 아닌 다른 글자가 들어가는경우 그대로 return 하게 됩니다.