[TIL] 240807 (최종 프로젝트 유효성 검사 재제작 / 모의 면접 2회)

솔·2024년 8월 7일

React TIL useState

TIL

목록 보기

122/268

🥞 오늘 한 일

최종 프로젝트
- 결제 메인 페이지 럭키박스 남은 갯수 표시
- 공구 신청 모달 유효성 검사 input 아래 텍스트로 변경
취업 프로그램 세션
17:00 담당 튜터님 모의 면접
20:20 참여 기업 튜터님 모의 면접
기술면접 연습

기술면접 연습

타입스크립트에서 type과 interface의 차이점은 무엇인가요?

둘 다 커스텀 타입을 정의하는데 사용되지만, interface는 객체의 타입 정의에만 쓰며 잠재적인 오류를 피할 수 있다는 점이 차이점입니다. interface는 같은 이름의 interface를 여러번 선언하면 자동으로 합쳐져 오류를 피할 수 있지만 type은 이런 병합이 불가능합니다. type은 타입 앨리어싱이나 복잡한 타입을 만들 때 사용합니다.

타입스크립트의 제네릭을 사용해본 경험이 있으신가요?

네, 제네릭을 사용하여 여러 코드에 걸쳐 일관성을 높여 재사용성과 유지 보수성, 안정성을 향상시킨 경험이 있었습니다. 사실 useState와 비슷한 개념이라 익숙하게 사용했습니다.

타입스크립트를 사용해보셨나요? 타입스크립트를 사용하며 느낀 장/단점에 대해 설명해주세요.

타입스크립트의 장점은 자바스크립트와 달리 정적 타이핑 기능을 통해 컴파일 시점에 오류를 체크할 수 있고, 자동 완성 기능을 통해 오타로 인한 실수도 줄일 수 있다는 장점이 있었습니다. 단점으로는 초기 세팅이 어렵고 타입 지정 때문에 생산성이 낮아진다는 단점이 있습니다.

기술적 의사결정

유효성 검사 input 아래 텍스트로 변경

기존에 input을 유효성 검사할 때, 틀린 부분을 Notiflix 알럿으로 띄워주는 식으로 진행을 했었는데, 이 부분이 사용자들에게 직관적이지 않을 것 같다는 생각이 들었다. 때문에 기존에 웹을 사용하면서 편리하다고 느꼈던, input 아래에 빨간 글씨로 어떤 오류가 났는지 표시하는 방식으로 코드를 변경했다.
이 때 트러블 슈팅을 겪었는데, 해당 부분에 대해서는 아래에 작성하겠다.

🍽️ 트러블 슈팅

유효성 검사 input 아래 텍스트로 변경

문제

내가 사용한 방식은 우선 error 메세지로 쓰일 것들을 모아둔 객체를 가진 상태를 제작하고, 유효성 검사를 할 때마다 해당하는 메세지를 띄우고 다른 객체 내 요소들은 빈 값으로 만들어 위에서부터 하나하나 검사하는 게 목적이었다.

// GroupApplyModal
const addGroupApplyHandler = async () => {
  setError({
    phoneError: "",
    nameError: "",
    addressError: "",
  });

  if (!name.trim()) {
    setError({
      ...error,
      nameError: "이름을 입력해주세요.",
    });
    return;
  }
  const phoneCheck = /^01([0|1|6|7|8|9])-([0-9]{3,4})-([0-9]{4})$/;
  if (!phoneCheck.test(phone)) {
    setError({
      ...error,
      phoneError: "010-XXXX-XXXX 형식으로 입력해주세요.",
    });
    return;
  }
  // 생략
};

함수가 호출되면 우선 전체 error를 빈 값으로 만든 다음, 순서대로 하나 통과하면 다음 걸로 넘어가는 식으로 검사를 하려고 했다.
그러나 이렇게 할 경우 제대로 동작하지 않았다. setError로 전부 빈 문자열로 만들어주었지만, 그 다음에 검사한 값으로 적용하는 게 한 함수 내에서 또 setError로 적용을 하기 때문에 바로 변경된 error의 값을 가져오지 못하기 때문에 의도한 대로 화면을 구성할 수 없었다. 때문에 변경된 값을 바로 적용하는 방법으로 아래의 방법을 사용했다.

해결

const addGroupApplyHandler = async () => {
  setError({
    phoneError: "",
    nameError: "",
    addressError: "",
  });

  if (!name.trim()) {
    setError((prev) => ({
      ...prev,
      nameError: "이름을 입력해주세요.",
    }));
    return;
  }
  const phoneCheck = /^01([0|1|6|7|8|9])-([0-9]{3,4})-([0-9]{4})$/;
  if (!phoneCheck.test(phone)) {
    setError((prev) => ({
      ...prev,
      phoneError: "010-XXXX-XXXX 형식으로 입력해주세요.",
    }));
    return;
  }
  // 생략
};

바로 prev를 쓰는 방법. 이 방법은 공식 문서에도 있는 방법이다. 한 함수 내에서 똑같은 setState를 사용할 때에도, prev를 통해 값을 가져오면 바로 가져올 수 있다. 이렇게 변경하니 제대로 순서대로 하나씩 오류를 띄울 수 있었다.

🍴 돌아보기

면접을 두 번이나 본 하루였다. 한 번은 담당 튜터님께 본거라 그나마 좀 편안한 분위기 속에서 진행할 수 있었는데, 두 번은 처음 뵙는 참여 기업 튜터님과 진행하기도 했고 말하기 힘든 질문이 좀 있었어서 아쉬웠다... 기술적인 개념을 더 많이 공부해야겠다는 걸 깨달을 수 있었다.
또한 하나의 고민거리가 생긴 날임과 동시에 바로 면접을 봐주신 튜터님들께 여쭤봐서 어느 정도 마음의 정리가 되었다. 캠프 이후의 진행 방향에 관한 부분인데, 목표한 바를 바로 잘 이룰 수 있으면 좋겠다... 뭐라도 일단 해봐야지.
프로젝트에 집중하는 것도 좋지만, 이런 모의 면접이나 나중에 실전 면접에서 나온 질문들은 그 당일에 대답을 하지 못 했더라도 바로바로 대답할 수 있게 만들어야겠다. 때문에 면접 질문들을 정리할 곳이 필요할 것 같은데, 어디에 어떻게 정리할지에 대해서는 고민이 필요할 것 같다.