1. 이미지 경로 이슈
•
이슈: assets 폴더를 src에서 public 으로 이동하면서 상대 경로로 파일 접근이 불가
•
분석: 브라우저에서 public/index.html가 보여지기때문에 경로가 index.html 기준으로 작성되어야 한다.
•
해결: 아래처럼 public을 기준으로 하는 경로로 바꿔준다.
src = {`${process.env.PUBLIC_URL}/assets/basic-profile.png`}
src = {'assets/basic-profile.png'}
src = {'/assets/basic-profile.png'}
src = {'./assets/basic-profile.png'}
JavaScript
복사
2. 렌더링 비동기
function handlePwValid() {
//비밀번호 validation check
const reg = new RegExp('^.*(?=.{8,})(?=.*[0-9])(?=.*[a-zA-Z]).*$');
if (reg.test(pwRef.current.value)) {
setPwMsg('');
} else {
setPwMsg('* 영어, 숫자포함해서 8자 이상 입력해주세요');
}
if (emailMsg === '* 사용 가능한 이메일 입니다.' && pwMsg === '') {
setBtnState('');
} else {
setBtnState('disabled');
}
}
JavaScript
복사
•
이슈: 비밀번호를 입력했을 때, 오류 메시지(pwMsg)가 사라지면서 버튼 상태(btnState)가 동시에 일어나야 하는데, 버튼이 한 단계 다음(입력이 하나 더 있을 때) 작동
•
분석: setPwMsg로 렌더링이 발생되면서 오류 메시지가 사라지지만, pwMsg는 변경되지 않아서 setBtnState가 동작하지 않았다. (비동기)
•
해결: useEffect를 이용하여, 오류 메시지가 변경될 때 버튼 상태를 변경
