개발 내용
Navbar 기능 추가
next/link사용하여 [홈 / 카테고리 / 좋아요한 상품 / 마이페이지]에 대한 링크 추가- 현재 URL path 확인하여 현재 선택된 메뉴는 진한 텍스트로 표시
- 로그인/회원가입 페이지에는 보이지 않고 로그인 후의 화면에서만 보이도록 구현
- feat: Navbar 추가
로그인 페이지 UI 추가
- 화면 크기가 줄어들면 스마트폰 목업 이미지는 사라지고 로그인 폼만 보이도록 반응형 적용
- 스마트폰 목업 이미지 출처
- feat: 로그인 페이지 UI 추가
로그인 페이지 기능 추가
- 스마트폰 목업 이미지 PC 화면에서만 보이도록 반응형 추가
- 로그인 폼 모두 입력 시에만 로그인 버튼 활성화되도록 적용
- feat(login, signup): 폼 입력 조건 충족 검사
회원가입 페이지 UI 추가
- ERD User Table 참고하여 회원가입 시 백엔드로 넘겨야 하는 값에 대한 폼 추가
- 성별 선택 폼은 input type=’radio’를 사용하여 하나만 선택 가능하도록 하고, 선택된 성별과 선택되지 않은 성별에 대해 css style 달리 적용
- input에 maxLength 추가
- feat: 회원가입 페이지 UI 추가
회원가입 페이지 기능 추가
- 회원가입 폼 올바르게 작성 시에만 회원가입 버튼 활성화되도록 적용
- 이메일 형식 올바른지 검사
- 닉네임 형식 올바른지 검사 : 최소 1글자 이상
- 성별 클릭되었는지 검사
- 생년월일 검사 : 1950년 이후 출생자
&&만 14세 이상 검사 + 유효한 날짜인지 검사 - 비밀번호 형식 올바른지 검사 : 최소 8자리 이상, 최소한 하나의 영문 소문자 / 영문 대문자 / 숫자 / 특수문자(
@$!%*?&) 포함 → 비밀번호 형식 올바르지 않을 시 경고 문구 렌더링 - ‘비밀번호’와 ‘비밀번호 확인’이 동일한지 검사
- 개인정보 수집 동의 추가
- feat(login, signup): 폼 입력 조건 충족 검사
배운 점 & 트러블 슈팅
명시적, 암시적 <label> 태그
<label> : 양식 입력 창의 요소들을 위한 캡션
<input>태그와 함께 사용하는 이유 :<label>태그 영역을 클릭해도<input>태그 반응 -> 사용자의 이용성 향상<label>의for속성과<input>의id속성 연결- 웹 접근성과 관련 : 스크린리더와 같은 통신 기기는
<label>태그를 통해 연결된<input>태그 인식 가능
// 명시적 방식 : label의 for 속성과 input의 id 속성 명시함으로써 연결
<input
type="radio"
name="gender"
id="M"
value="M"
required
/>
<label htmlFor="M">남성</label>
<input
type="radio"
name="gender"
id="F"
value="F"
required
/>
<label htmlFor="F">여성</label>- 명시적 방식 사용하여 개발하였음
cf) 암시적 방식
// 암시적 방식 : label 태그 안에 input 태그 넣기
<label>
이름
<input type="text" id="name" />
</label>[트러블슈팅] : Warning: Invalid DOM property 'for'. Did you mean 'htmlFor'? 에러
=> 해결 : Javascript/Typescript에서 for은 반복의 의미가 있으므로 HTML 상에서는 htmlFor을 사용해야 한다.
useState를 동기적으로 사용하는 법
useState(setState)는 비동기로 동작한다. (성능 향상 위해서)
React의 배치(batch) 처리 : 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶음 (16ms 단위)
-> 동기적으로 처리하는 방법
1. useEffect의 의존성 배열 이용
2. setState의 인자로 함수 사용(이전 값을 받아서 실행) 예) setState(prev => prev + 1)
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
useEffect(() => {
setIsLoginFormValid(email.length > 0 && password.length > 0)
}, [email, password]);useEffect의 의존성 배열을 이용하는 방법으로 개발하였음
[트러블슈팅] : React Hook useEffect has a missing dependency 에러
=> 해결 : useEffect 내부에서 실행된 함수에서 사용되는 변수를 useEffect 의존성 배열 안에 넣어주지 않았기 때문에 발생한 오류
