Weekly TIL - Day 19

⭐️ Today's summary

오늘은 프로젝트 3일차에 할 것과 어려웠던 내용을 다뤄보겠다.

 

회원 정보 수정시에 patch와 put의 차이점

 

yup의 defaultValues로 초기값 세팅 방법

 

yup의 test()를 이용해 비밀번호가 같은지 확인 방법을 다뤄보겠다.

 

⭐️ Problem

정보 수정시에도 update를 많이썼지 patch와 put차이점과 어느때 사용하는지 헷갈렸고,

 

yup을 좀더 내 프로젝트의 필요한 방향으로 사용하고 싶었지만 어려워서 정리해보았다.

 

⭐️ Try

[ patch 사용 코드 ]

const res = await axios.patch(`http://localhost:3001/user/${userInfo.id}`, {
    userName: data.userName,
    phone: data.phone,
});

 

첫번째로 회원정보 수정에서 겪은 문제이다.

 

동작	메서드	URL 예시
목록 가져오기 (전체 조회)	GET	/posts
특정 데이터 조회	GET	/posts/id
데이터 추가	POST	/posts (body에 데이터 전송)
데이터 수정 (전체)	PUT	/posts/id ( 전체 교체 )
데이터 수정 (일부)	PATCH	/posts/id ( 부분 수정 )
데이터 삭제	DELETE	/posts/id

 

정리하면 위의 표와 같이 Patch와 Put의 차이는 전체 교체인가 부분 수정인가가 나뉜다.

 

처음에 Put을 사용했더니 userName과 phone을 body에 데이터를 넣어서 변경 요청을 했는데, 

 

다른 정보인 아이디, 이름, 비밀번호 이런게 다 사라지고 userName과 phone만 남는것을 보고 아차 싶었다.

 

이제 Put과 Patch의 차이를 잘 알게 되었다.

 

---

 

두번째로는 yup을 사용하다보니 react-hook-form이 상태관리까지 해주는 것을 알게되었다.

 

그러다 보니 회원 정보를 변경할때 로그인 정보에서 회원의 이름과 전화번호를 가져와 value={} 넣고

 

값이 변경될때 onChange()를 걸어줘야하는데, 이렇게 하면 state를 사용해 값을 넣어줘야한다.

 

그럴 필요없이 react-hook-form이 내부적으로 상태를 관리하기 때문에 useState, Input에 값을

 

넣지 않고도 useForm에서 다음과 같이 코드를 짜주면 초기값을 자동으로 주입해준다.

 

useForm({
  resolver: yupResolver(schema),
  defaultValues: {
    userName: userInfo.userName,
    phone: userInfo.phone,
  },
});

 

---

[ 유효성 검사 ]

const schema = yup.object().shape({
  currentPw: yup.string().required('현재 비밀번호를 입력하세요.'),

  newPw: yup
    .string()
    .required('새 비밀번호를 입력하세요.')
    .test('현재 비밀번호 새 비밀번호 확인', '현재 비밀번호와 같습니다.', function (value) {
      return value !== this.parent.currentPw;
    })
    .matches(/^(?=.*[a-zA-Z]).{5,}$/, '비밀번호는 영문자를 포함해 5자 이상이어야 합니다.'),

  confirmNewPw: yup
    .string()
    // yup.ref('userPw')는 다른 필드(userPw) 값을 참조
    // 즉, confirmNewPw가 newPw 같은지 검사
    // null은 비어있을 수도 있음을 대비한 처리
    // oneOf([허용할 값 ~~~ ], '에러 메세지')
    .oneOf([yup.ref('newPw'), null], '비밀번호가 일치하지 않습니다.')
    .required('새 비밀번호 확인을 입력하세요.'),
});

 

 

세번째로는 yup의 유효성 검사를 통해 현재 비밀번호와 새로 입력한 비밀번호가 같은지 확인하는 유효성 검사를 넣고싶었다.

 

필드를 검사하는 유효성 검사에 .test()와 .oneOf()가 있는데, 둘다 필드간 비교가 가능하지만 사용 목적이 다르다.

 

oneOf()는 정해진 값들중 하나여야 함을 검증하는 메서드이고, 주로 필드값이 서로 일치하는지 확인할때 사용한다.

여기서 정해진 값은 yup.ref('정해진값')이 된다.

 

test()는 커스텀 검증 조건을 직접 구현할 수 있는데, 여기서는 현재 비밀번호와 새로운 비밀번호가 같을때 에러메시지를

띄우고 다를때는 통과하는 로직을 작성하였다.