질문할 것 (답변완료)
- allergy 옵션 문제
<div className="allergy">
<span className="necessary">알러지 옵션</span>
{allergyData.map((allergy, idx) => {
return (
<div key={id}
<input
type="checkbox"
id={allergy.allergy_id}
name="allergy"
value={allergy.allergy_id}
onChange={handleAllergy}
// 기존에 원래 handleInput함수를 썼었는데 allergy는 값이 여러개가 담겨야 하기때문에
// 다른데에서 쓰인 handleInput함수를 쓸수가 없어서 새로 만듬.
// 근데 값이 담기긴하는데 전에 없던 이메일 유효성 검사에서 쓰인 .includes가 에러가 남.
// 그리고 체크를 취소해도 값이 계속 담김.
// .includes로 이메인 검사하는게 원래 틀린건지? 정규표현식이 찾아 봐도 없어서 맞는 것 같긴한데..
/>
<label for={allergy.allergy_id} />
{allergy.allergy_name}
</div>✍️ 이메일 체크 할 때 저 include를 포함한 식 대부분 다 씀
그래서 따로 에러 해결해야할 것 같음. 이유가 있을 듯.
-
radio 타입 value 보내기
<div className="maleCheck"> <input type="radio" id="male" name="sex" value="male" // value={sex} // 처음에 다른 것처럼 중괄호 넣어서 했는데 안됐음 근데 따옴표 넣으니까 됐음 // 추측하건데 변하지 않는 값이니까 스트링으로 해줘서 되었던 건지 onClick={handleInput} // onChange={handleInput} // onclick, onChange 둘 다 가능은 하다고 하는데 // onChange는 값이 계속 변하는 걸 다 받는 건데 radio타입은 값이 정해져 있기 // 때문에 직접 값을 지정해준 밸류값을 받아와야하니까 onclick? // 둘 다 가능하다면 뭘 쓰는게 더 맞는 건지 /> <label for="male" /> <div>남성</div> </div>
✍️ radio 값은 변하는 값이 아니라 체크 된 정해진 값을 받기 때문에 문자타입으로 밸류 적어주는 거임
✍️ onClick보다 onChange를 쓸 것 같다고 멘토님이 말씀해주심
div나 span태그라면 onclick을 적용하겠지만 체크를 하긴하지만 input태그 이기때문에 입력창이 있으니까 그 입력창에 따라 바뀌기 떄문에 onChange 적용
- 백틱, 중괄호 문제
<label for={allergy.allergy_id} /><label *for*=”allergy_id” /> <label *for*={`jumi${*allergy*.allergy_id}`} /> 에서 label for는 태근데 자바스크립트 문법으로 정의한 변수를 써야하기 때문에 {}를 쓴 것이다? ✍️ ”jumi”와 `jumi `를 콘솔로 찍어보면 보이는 값은 같지만 데이터 타입은 다름 백틱이 문자열로 만들어 주는 기호가 아니라 문자와 자바스크립트 문법과 관련된 무언가를 쓰고 싶을 때 어떻게 해야할까 하다가 백틱을 사용하면서 둘을 합쳐서 쓸 수 있도록 한 거임. 그니까 구분해 줘야함. - presignup page scss가 망가졌는데 머지하면 괜찮지 않을까해서 안 고쳤는데 어떻게 생각하시는지..?
✍️ scss 클래스네임 고쳐서 처음부터 다 적용하기
- link를 썻지만 a태그에 스타일 걸면 적용 되는이유? 적용은 되는데 개발자도구에서 오류가 엄청 많음
✍️ nav.js에 activeclassname 쓴 거 지우고 확인해보기. 아마지우면 에러 해결 될 듯
그리고 a태그에 스타일 적용 시켜도 잘못된 것 아님! link나 navlink나 다 a태그를 가지고 만든 거기 때문에 노상관!
- 직접 검사, 보내서 검사
const emailVaildCheck = email.includes('@') && email.includes('.com');
const passwordVaildCheck =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const passwordVaildCheck2 =
passwordVaildCheck.test(password) && passwordVaildCheck.test(rePwCheck);
// 각 창에서 onblur로 일일이 검사하는게 나은지 최종버튼을 눌렀을떄
// 페치함수로 메세지에 따라 검사하는게 좋은지
// alert창이 좀 과하게 나오는 것 같긴한데 개선방안?
const goPwCheck = () => {
if (passwordVaildCheck.test(password) === false) {
alert('비밀번호 조건에 맞춰 다시 작성해주세요.');
}
};
----------------------비교----------------------
const signUpCheck = () => {
fetch('http://208.82.62.99:8000/user/signup', {
method: 'POST',
body: JSON.stringify({
name: name,
email: email,
password: password,
nickname: nickname,
phone: phone,
birth: `${year}-${month}-${day}`,
sex: sex,
allergy_id: allergy,
})
.then(res => res.json())
.then(res => {
if (res.message === 'ERROR : INVALID_VALUE (email)') {
alert('이메일 입력 시 @와 .com이 필수로 포함되어야 합니다');
} else if (res.message === 'ERROR : INVALID_VALUE (password)') {
alert(
'비밀번호 입력 시 문자 8자 이상, 소문자, 대문자, 숫자, 특수기호 포함되어야 합니다'
);
} else {
navigate('/main');
}
}),
});
};✍️ 더블체크도 좋지만 보통 프론트 쪽에서 유저가 조건을 만족해서 데이터를 보내게끔 하는게 좋음!
