유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 2글자만 노출한 뒤 뒷글자는 모두 *로 마스킹해야하는 기능을 구현하여야했다.
🍋 구현 방법
간단하게 닉네임의 길이별로 조건을 걸어주고, 정규표현식을 사용하여 노출하는 글자 이후 문자는 모두 * 로 대체해준다.
나는 3글자 이상의 닉네임이 들어올때에는 2글자 이후의 모든 문자는 *로 대체했고, 2글자 닉네임이 들어올때에는 1글자만 문자만 대체, 1글자의 닉네임이 들어오면 그대로 노출시켰다.
const maskingName = (value) => {
if (value.length === 2) {
return value.replace(/(?<=.{1})./gi, '*');
} else if (value.length > 2) {
return value.replace(/(?<=.{2})./gi, '*');
} else {
return value;
}
};
🍋 결과 화면
maskingName("안녕하세요"); //안녕***
maskingName("안녕"); //안*
maskingName("하"); //하
퍼블리싱된 파일을 보고 백에서 받은 닉네임을 프론트에서 * 처리해서 보여주어야하는줄 알고, 미리 작업했었다가 결국 코드를 지우는 사태를 맞이했다 ㅠㅠ 서버에서 *처리를 하지 않고 보내준다면 네트워크탭에서 그대로 노출이 되므로 *처리를 하는 의미가 없다는것 .. 주니어 개발자는 오늘도 배웁니다 😂
반응형
'Web > JavaScript' 카테고리의 다른 글
javascript | Cookie 설정하기, value 가져오기, 삭제하기 (0) | 2022.07.19 |
---|---|
jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달) (0) | 2022.07.18 |
Javascript | 로그인 기능 구현 (2) | 2021.10.24 |
JavaSctipt | DOM 이란? (1) | 2021.10.24 |
JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법) (0) | 2021.09.06 |