[TIL] 2025-06-18 | 3차 프로젝트 | react | 테스트 관련

[s0ooo0k]

TIL - 2025-06-18

💡 새롭게 배운 것

• 라우팅 관련 흐름

[유저 브라우저]
    ↓ 접근
    /login

[React Router]
    ↓ 렌더링
    <LoginPage />
        ↓ 로그인 버튼 클릭
        axios.post('/api/v1/auth/login', { id, pw })

[서버]
    ↳ /api/v1/auth/login
        → 로그인 처리 (DB 조회 등)
        → 응답 반환 (200 OK + JWT 등)

• Context API

Context를 상태 관리라고 말할 수 있는가에 대한 다양한 의견이 있지만, 현재는 초기에 구현을 위한 단계이므로 간단하게만 이해하고자 한다.
🔗 참고한 블로그 글 : 리액트 Context는 상태 관리 도구가 아니다

• 리액트에서 전역 상태를 관리할 수 있는 내장 기능, 하위 컴포넌트에 값을 전달하기 위해 사용
• 보통 props drilling을 피하기 위한 구조로 활용, 값 전달을 전역적으로 쉽게 하는 구조
• props drilling : 상위 -> 하위 컴포넌트로 가기 위해서 props를 중간 컴포넌트도 계속 받아야 하는 구조

❗ 오늘의 문제 상황 & 🚀 시도 및 해결 과정

** 1. No matching export for default - 다 작성하고 run을 했는데 하얀색 페이지와 함께 나타나는 수많은 오류들 ... **
➡️나는 main.jsx에서 App을 import App from './App.jsx'로 불러 왔는데,
마지막에 export default App; 을 작성하지 않아서 생긴 간단한 문제!!

** 2. 프론트엔드에서 비밀번호 검증 로직을 아래와 같이 작성하였는데,

if (pw !== pwCheck) {
      pwCheckRef.current.setCustomValidity("비밀번호가 일치하지 않습니다.");
      pwCheckRef.current.reportValidity();
      return;
    } else {
      pwCheckRef.current.setCustomValidity("");
    }

한 번 비밀번호 검증이 실패하면, 다음에 다시 맞게 수정해도 계속 비밀번호 검증 실패 에러가 떴다 **
➡️setCustomValidity로 검증하면 처음 값이 계속 남아있음.
따라서 새로 입력될 때마다 메세지도 초기화 해야함.

  const handlePwChange = (e) => {
    setPw(e.target.value);
    pwRef.current.setCustomValidity("");
    // 비밀번호 확인도 같이 초기화
    pwCheckRef.current.setCustomValidity("");
  };
  const handlePwCheckChange = (e) => {
    setPwCheck(e.target.value);
    pwCheckRef.current.setCustomValidity("");
  };

이런 느낌으로 초기화 하기

⭐ 느낀 점

✒️ 데일리 회고

• 추후 테스트 진행 시 관련 키워드 및 자료
  🔗 [인텔리제이에서 테스트 커버리지 확인하기)(https://myste-leee.tistory.com/208)
  문서로 확인하기 -> jacoco