[TIL] 240816 (최종 프로젝트 전화번호 입력 시 하이픈 자동 생성 기능 구현)

솔·2024년 8월 16일

TIL

목록 보기

131/268

🥞 오늘 한 일

최종 프로젝트
- 모바일 메인 럭키박스 팝업 버튼 넓이 최대로 확장
- 모바일에서 공구템 보러가기 기능 버튼으로 변경
- 게시글 등록 버튼 가려지는 오류 해결
- 공구템 이전 날짜는 등록 못하도록 수정
- 공구템 가격 0원 이하 불가능하도록 수정
- 전화번호 입력 시 하이픈 자동 생성 기능 구현
기술면접 연습

최종 프로젝트

전화번호 입력 시 하이픈 자동 생성 기능 구현

피드백에 전화번호 입력 시 하이픈이 필요한데, 해당 부분에 관한 설명이 부족해서 헷갈린다는 의견이 있었다.
해당 피드백을 통해 전화번호 입력 시 자동으로 하이픈(-)이 생성되는 기능이 있으면 사용자 입장에서 좋겠다고 생각해 구현해봤다. 코드는 아래와 같다.

// InputPhoneValidate.ts
export const InputPhoneValidate = (e: React.ChangeEvent<HTMLInputElement>) => {
  const rawPhoneNumber = e.target.value.replace(/[^0-9]/g, "");
  let formattedPhoneNumber = "";
  if (rawPhoneNumber.length <= 2) {
    formattedPhoneNumber = rawPhoneNumber;
  } else if (rawPhoneNumber.length <= 6) {
    formattedPhoneNumber = `${rawPhoneNumber.slice(
      0,
      3
    )}-${rawPhoneNumber.slice(3)}`;
  } else {
    formattedPhoneNumber = `${rawPhoneNumber.slice(
      0,
      3
    )}-${rawPhoneNumber.slice(3, 7)}-${rawPhoneNumber.slice(7, 11)}`;
  }

  return formattedPhoneNumber;
};

간단히 요약하여 3번째 이후에 하이픈이 한 번, 7번째 이후에 하이픈이 한 번 생기고 휴대폰 전화번호는 11자리이기에 11개까지만 나오게 하는 것으로 제작했다. 이를 통해 사용자들이 굳이 하이픈을 적지 않고도 자동으로 하이픈이 생겨, 헷갈릴 일이 줄어들도록 했다.

자체 평가 의견

평가 점수 및 사유

10점
근 4개월 간 배운 다양한 지식과 기술을 총동원하여 열과 성을 다해 제작하기도 했고, 비교적 빠른 속도로 기본 기능을 구현하여 추가 기능을 여러 차례 개발할 정도로 완성도를 끌어올리는 데에도 집중을 많이 한 프로젝트였다. 모든 프로젝트가 그렇듯 아쉬운 점이 전혀 없지는 않겠지만, 최선을 다했으며 현재의 능력 및 노력을 충분히 보여주는 결과물이라고 자부하기에 10점을 부여했다.

개인 또는 우리 팀이 잘한 점과 아쉬운 점, 느낀 점

이번 프로젝트에서 잘한 점은 비교적 빠른 속도로 의도했던 프로젝트를 구현한 것이다. 이로 인해 기능을 여러 번 더 추가하고 완성도도 높일 시간을 확보할 수 있었다.
그와 동시에 아쉬운 점도 있었다. 개발 과정에서 여러 기능을 추가하고도 시간적 여유가 남았다는 것은, 기획 단계에 더 많은 시간을 투자할 수 있었음을 의미한다. 만약 기획에 하루 이틀이라도 더 집중했다면, 처음부터 완성도가 더 높은 프로젝트를 만들 수 있지 않았을까 하는 아쉬움이 남는다.
때문에 너무 빠르게 일을 진행하려다 보면 그때그때 해야 하는 중요한 것들을 놓치거나 불만족스럽게 처리할 수 있기에, 속도만 생각하기보다는 프로젝트의 각 단계에 맞춰 충분한 시간을 투자할 필요가 있다는 점을 느끼게 된 프로젝트였다.

기술면접 연습

리액트의 Strict 모드는 왜 필요할까요?

개발과정에서 발생할 수 있는 잠재적인 문제를 해결할 수 있기 떄문입니다. 예를 들어 잘못된 훅 사용이나 props 전달 등에 대해 경고를 줘서 해결할 수 있도록 돕습니다. 대표적으로는 useEffect 의 마운트가 2번 실행되는 효과가 있습니다.

SPA에 대해 설명해주세요.

SPA는 싱글 페이지 어플리케이션의 약자로, 리액트나 뷰의 기반이 되는 기술입니다. SPA의 장점은 페이지를 이동할 때 새로고침이 되지 않는다는 점이고, 클라이언트 사이드 렌더링을 사용해 서버의 부담을 줄이고 로딩 속도를 개선할 수 있습니다. 다만 단점으로는 SEO에 취약하고 초기 로딩이 느리다는 점이 있습니다. 그래서 요즘은 SSR과 CSR의 장점만 가져와 동시에 사용할 수 있는 Next.js 프레임워크가 인기입니다.

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주세요.

둘의 차이점은 어디에서 렌더링이 일어나는가인데, 우선 클라이언트 사이드 렌더링은 서버로부터 html, 자바스크립트 파일을 받고난 후 클라이언트가 직접 렌더링하는 방식입니다. 페이지 이동 속도가 빠르고 서버의 부담을 줄일 수 있다는 장점이 있습니다. 서버 사이드 렌더링은 서버에서 미리 렌더링을 한 후 완성된 페이지를 클라이언트에게 전송하는 기법입니다. 장점으로는 SEO에 유리합니다. 완성된 페이지를 다운 받아오기 때문에 검색 엔진 크롤링 도구가 완성된 페이지를 받아 크롤링을 실행하기 때문입니다.