[Javascript] 전화번호 포맷팅 하이픈(-)추가 및 제거 함수 만들어봐요!

전화번호에 숨겨진 마법: 하이픈 추가와 제거, JavaScript로 쉽게 해결하기!

안녕! 오늘은 아주 재밌는 주제를 가지고 왔어. 전화번호에 하이픈(-)을 더하거나 빼는 방법을 알려줄 거야. 누구나 한 번쯤 “이 번호를 보기 좋게 포맷하고 싶은데...”라고 생각해본 적 있지? 음, 사실 이건 생각보다 간단한 일이야! 게다가 JavaScript로 하면 금방 해결되지. 자, 이제 내 이야기를 들어볼래?

---

하이픈, 왜 필요할까?

생각해봐! “01012345678”을 보는 것과 “010-1234-5678”을 보는 것, 뭐가 더 편해 보여? 당연히 후자가 눈에 확 들어오지? 특히 친구나 고객에게 전화번호를 알려줄 땐 깔끔하게 정리된 게 훨씬 좋아. 그래서! 하이픈을 추가하는 마법 같은 코드를 준비했어.

---

하이픈 추가하기

첫 번째 미션은 전화번호에 하이픈을 추가하는 거야. 자, 이렇게 하면 돼!

function addHyphen(phoneNumber) {
  return phoneNumber
    .replace(/[^0-9]/g, '') // 숫자만 남기고
    .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); // 하이픈 추가
}

코드 설명:

1. replace(/[^0-9]/g, '')
   혹시 전화번호에 공백이나 다른 문자가 껴 있다면 싹 지워줘. 깔끔해야 시작이 좋아!
2. replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
   여기가 핵심이야. 전화번호를 세 덩이로 쪼갠 다음 사이사이에 하이픈을 넣어주는 거지.

---

예시

console.log(addHyphen('01012345678')); // 010-1234-5678
console.log(addHyphen(' 010 5678 1234 ')); // 010-5678-1234
console.log(addHyphen('010-1111-2222')); // 010-1111-2222

어때? 놀랍지 않아? 여기까지 따라왔다면, 아주 잘하고 있는 거야! 🤗

---

하이픈 제거하기

이제 두 번째 미션! 하이픈을 싹 없애는 법을 알려줄게. 반대로 생각하면 더 쉽겠지?

function removeHyphen(phoneNumber) {
  return phoneNumber.replace(/-/g, ''); // 하이픈만 없애기
}

코드 설명:

• replace(/-/g, '')
  하이픈을 찾아서 싹 지워버려! 깔끔하고 단순하지?

---

예시

console.log(removeHyphen('010-1234-5678')); // 01012345678
console.log(removeHyphen('010-5678-1234')); // 01056781234

이건 정말 간단하지? 하지만 실생활에서 얼마나 유용한지 몰라. 특히 백엔드로 데이터를 보낼 땐 하이픈 없는 번호를 요구할 때가 많거든.

---

하이픈을 활용한 꿀팁 💡

여기서 잠깐! 하이픈을 추가하거나 제거하는 걸로 끝낼 순 없잖아? 재밌는 활용법을 알려줄게.

1. 사용자 입력 유효성 검사
   사용자가 입력한 전화번호를 정리해서 DB에 넣으면 아주 깔끔해.
2. SMS 보내기 전에 정리
   전화번호 포맷이 잘못돼 있으면 메시지가 안 갈 수도 있어. 그러니 미리 정리하는 습관을 들이자.
3. UI/UX 개선
   번호가 잘 정리된 상태로 보이면 사용자도 더 편리하게 느껴.

---

마무리하며...

전화번호의 하이픈 추가와 제거, 정말 간단하지? 사실 이런 작은 디테일들이 모여서 훌륭한 서비스를 만드는 거야. 그러니 작은 부분도 놓치지 말자!

자, 이제 네 차례야! 이 코드를 복사해서 직접 써보고, 친구들한테도 자랑해 봐. “나 JavaScript로 이런 것도 할 줄 안다?” 하면 친구들이 깜짝 놀랄지도 몰라! 😄

그럼, 다음에 더 재밌는 주제로 돌아올게. 안녕~!