이름 마스킹처리하는 알고리즘 , 방법

React나 Vue 같은 프레임워크를 사용한다면, 데이터 렌더링 시점에 마스킹 함수를 적용

 

function VehicleList({ vehicles }) {
  const maskName = (name) => {
    if (!name || name.length === 0) return "";
    if (name.length === 2) return name[0] + "*";
    if (name.length >= 3) return name[0] + "*".repeat(name.length - 2) + name[name.length - 1];
    return name;
  };

  return (
    <table>
      <thead>
        <tr>
          <th>이름</th>
          <th>차량 번호</th>
        </tr>
      </thead>
      <tbody>
        {vehicles.map((vehicle, index) => (
          <tr key={index}>
            <td>{maskName(vehicle.name)}</td>
            <td>{vehicle.number}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 사용 예
const vehicles = [
  { name: "김민구", number: "123가4567" },
  { name: "이순신", number: "789나1012" },
  { name: "김구", number: "345다6789" },
];

 

 

백엔드를 쓰는 게 나을까?

• 보안 문제: 이름 자체가 개인정보이고, 원본 데이터를 클라이언트에 노출시키지 않으려면 백엔드에서 마스킹해서 내려주는 게 안전.
• 일관성: 여러 클라이언트(웹, 모바일 등)에서 동일한 마스킹 규칙을 적용해야 할 때 백엔드에서 처리하면 중복 코드 줄임.

단순히 "표에 표시"하는 거라면, 프론트엔드에서 충분히 처리 가능하고 더 간단하다.

백엔드는 데이터베이스에서 차량 목록을 조회해서 JSON으로 내려주기만 하면 끝.