📍 옵션 선택 기능
: type="radio"은 HTML 폼 요소 중 하나로, 라디오 버튼을 생성하는데 사용됩니다. 라디오 버튼은 여러 옵션 중에서 사용자가 하나만 선택할 수 있는 선택지를 제공하는 입력 요소
[예시]
<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="options" value="option3">
<label for="option3">Option 3</label>
여기에서 주요 속성은 다음과 같습니다:- type="radio": 이것은 라디오 버튼을 생성하는 데 사용되는 입력 요소의 유형을 나타냅니다.
- id: 각 라디오 버튼을 식별하는 고유한 ID입니다. 라벨과 연결하는 데 사용됩니다.
- name: 동일한 name 속성을 가진 라디오 버튼은 그룹으로 간주되고, 그 중 하나만 선택할 수 있습니다. 따라서 동일한 name을 가진 라디오 버튼은 하나의 옵션 그룹을 형성합니다.
- value: 각 라디오 버튼의 값입니다. 사용자가 라디오 버튼을 선택하면 해당 값을 서버로 제출하거나 JavaScript에서 처리할 수 있습니다.
- < label > 요소: 라디오 버튼과 연결된 라벨입니다. 이렇게 하면 사용자가 라디오 버튼을 클릭할 때 라벨도 선택됩니다. for 속성은 라디오 버튼의 id와 일치시켜서 라디오 버튼과 라벨을 연결합니다.
라디오 버튼은 여러 옵션 중에서 하나를 선택해야 하는 경우에 사용되며, 예를 들어 성별 선택과 같은 다중 선택지에 유용합니다.
📍 회원가입 기능 구현
token값 저장 (로그인때 필요)
- token : 사용자가 성공적으로 회원가입이 된 후 서버에서 받은 응답의 일부 데이터이며 일반적으로 인증 및 권한 부여 목적으로 사용되고 사용자가 웹사이트 또는 애플리케이션에서 보호된 리소스에 액세스하거나 특정 작업을 할 수 있도록 허용함
[코드]
// 서버에서 받은 응답데이터를 token 필드를 추출하여 token 변수에 저장(데이터는 일반적으로 JSON 형식으로 제공됨)
const { token } = response.data;
// 브라우저의 로컬스토리지에 token값을 저장
// 웹 브라우저에 데이터를 저장하는 방법 중 하나로 setItem 메서드를 사용하여 데이터를 키-값 쌍으로 저장
localStorage.setItem('token', token);//('key값',value값)비동기 처리
- 비동기 처리란 ?
: 어떤 작업이 다른 작업과 병렬로 실행되게 하는 것을 의미, 주로 네트워크 요청, 파일 읽기/쓰기, 타이머 등의 작업에서 사용 - 아래 코드는 Async/Await를 이용해서 구현하였고 비동기 처리를 더 쉽게 사용할 수 있도록 함, 'async' 함수 내에서 'await' 키워드를 사용하여 비동기 작업의 완료를 기다리고 그 결과를 동기적인 코드처럼 처리할 수 있음
[코드]
const handleSignup = async () => {
if (!checkbox) {
window.alert('개인정보 수집 동의란에 체크해주세요');
return;
}
if (!gender) {
window.alert('성별을 선택해주세요');
return;
}
try {
const userData = {
email: email,
nickname: nickname,
gender: gender,
password: password,
};
// await이전의 코드가 실행되는 것을 기다리고 http 요청이 완료되고 응답이 잘 돌아온다면 다음 코드가 진행이됨 -> 동기적인 효과를 줌
await axios.post(`http://3.39.76.109:8080/members`, userData, {
headers: {
'Content-Type': 'application/json',
},
});
// Fetch 사용시
// const response = await fetch(`http://3.39.76.109:8080/members`, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify(userData),
// });
// const data = await response.json();
// const { token } = data;
// localStorage.setItem('token', token);
setNickname('');
setEmail('');
setPassword('');
setCheckbox(false); // 체크박스 초기값을 false로 설정
window.alert('회원가입이 완료되었습니다.');
window.location.href = '/members/login';
} catch (error) {
console.error('Error Signing up', error);
}
};유효성 검사
- 유효성 검사란?
: 데이터가 특정 조건이나 규칙을 만족하는지 확인하는 과정, 주로 입력된 데이터가 올바른 형식이나 규칙을 따르는지 검증하기 위해 사용됨
[코드]
export default function Signuppage() {
... 생략
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [emailerror, setEmailError] = useState('');
const [passwordError, setPasswordError] = useState('');
const handleGenderChange = (e) => {
setGender(e.target.value);
};
// 이메일 유효성 검사
const isEmailValid = (email) => {
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailRegex.test(email);
};
const handleEmagilChange = (e) => {
setEmail(e.target.value);
// 이메일 유효성 검사 방식이 만족하지 못하면 해당 문구가 뜨고 만족하다면 해당 문구는 사라짐
if (!isEmailValid(email)) {
setEmailError('유효한 메일 형식이 아닙니다.');
} else {
setEmailError('');
}
};
... 생략
return (
<SignupPage>
<div className="signup-page-container">
...생략
<div className="signup-form-email">
<InputStyle
type="text"
id="email"
value={email}
placeholder="E-mail"
onChange={handleEmagilChange}
/>
{emailerror && <p className="emailerror-message">{emailerror}</p>}
</div>
...생략
</SignupPage>
);
}
