Basic 김현제 sprint3#40
Open
ranflir wants to merge 24 commits intocodeit-sprint-fullstack:basicfrom
Hidden character warning
The head ref may contain hidden characters: "basic-\uae40\ud604\uc81c-sprint3"
Open
Conversation
wseungjin
approved these changes
Dec 29, 2025
| } | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'GTM-NXNMB8PH'); |
| return emailRegex.test(email); | ||
| } | ||
|
|
||
| function validateEmail() { |
Collaborator
There was a problem hiding this comment.
checkEmail 이런식으로 하고 validateEmail 함수를 따로 가져가도 좋을꺼 같네요
뭐 솔직히 크게 문제되지는 않는 수준인데 함수를 더 쪼개는 연습을 해보시면 좋을거 같아요.
| passwordInput.value === passwordConfirmInput.value && | ||
| passwordConfirmInput.value !== ''; | ||
|
|
||
| // 추가: 이메일이 중복되지 않았는지 확인하는 조건 |
Collaborator
There was a problem hiding this comment.
주석이 항상 필요하진 않습니다. 변수명에 좀 신경쓰는 방향으로 중복되지 않게 고민해보세요.
주석도 유지보수의 대상이 될 수 있다는 점을 참고하면서 코드를 짜주세요.
| const isLoginPage = !document.querySelector('#passwordConfirmation'); | ||
|
|
||
| // 기본적으로는 이메일과 비밀번호만 체크 (로그인 페이지 기준) | ||
| let isAllValid = isEmailValid && isPasswordValid; |
Collaborator
There was a problem hiding this comment.
let이 편하긴 할 수 있는데 최대한 let을 안쓰는 방향으로 연습해 봐도 좋을거같아요.
| const emailInput = document.querySelector('#email'); | ||
|
|
||
| function isValidEmail(email) { | ||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
||
| if (passwordConfirmInput) { | ||
| passwordConfirmInput.addEventListener('focusout', validatePasswordConfirm); | ||
| passwordConfirmInput.addEventListener('input', checkButtonState); |
Collaborator
There was a problem hiding this comment.
파일이 충분히 큰거 같아요 좀 쪼개는 고민을 해봤어도 좋을꺼 같습니다~
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
요구사항
기본
로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '사용 중인 이메일입니다'라는 메시지를 alert로 표시합니다.
입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다.
심화
주요 변경사항
입력 유효성 검사(Validation): 정규표현식을 이용한 이메일 형식 체크 및 8자 이상의 비밀번호 길이 검증을 구현했습니다.
실시간 에러 피드백: focusout 이벤트를 사용하여 사용자가 입력을 마치자마자 즉시 빨간색 테두리와 에러 메시지를 보여주는 UI 로직을 완성했습니다.
데이터 인증(Authentication): USER_DATA 상수를 활용하여 실제 등록된 사용자인지 확인하는 로그인 로직을 구현했습니다.
회원가입 심화 로직: * 비밀번호와 비밀번호 확인 칸이 일치하는지 대조하는 로직을 추가했습니다.
이메일 중복 체크: 가입하려는 이메일이 이미 존재하는지 some() 메서드로 확인하여 실시간으로 경고를 띄웠습니다.
버튼 상태 제어: 모든 조건(형식, 중복, 일치)이 만족될 때만 버튼이 활성화되도록 disabled 속성을 동적으로 제어했습니다.
스크린샷
멘토에게