[곽지훈] sprint 3,4 #159
[곽지훈] sprint 3,4 #159
Conversation
There was a problem hiding this comment.
지훈님 한 번에 두 미션을..! 고생 많으셨습니다 :)
요구 사항을 조금만 더 꼼꼼하게 봐주시면 더욱 좋을 거 같습니다~!!
(tmi)오랜만에 과거 코드를 보니 너무 엉망으로 만들어놨더라구요.. 싹 다 엎을지, 수정할지 한참 머리를 굴렸고, 꽤나 많은 고통을 받으면서 코드를 작성했습니다... 멘탈이 바사사삭 😨😨😨 이번에 짠 코드도 나중에 마이그레이션 할 때 얼마나 바꿔야 할 지 감이 안 오네요 으하하하하 ㅜㅜ
-> 기술 부채를 안고 가는 것은 개발자의 숙명이죠!! 🤣 완벽보단 완성을..! 앞으로 더 달려 가시죠~!
| type="password" | ||
| placeholder="비밀번호를 입력하세요" | ||
| /> | ||
| <img |
There was a problem hiding this comment.
아이콘에 기능이 있다면 버튼으로 감싸주시거나 aria-label 등을 활용해 주시면 접근성에 좋습니다 :)
| height: 0; | ||
| } | ||
|
|
||
| @media (max-width: 1024px) { |
There was a problem hiding this comment.
피그마 요구 사항대로라면 1200이 맞겠네요 🤣
| } | ||
|
|
||
| .main__image__container button { | ||
| .footer__text { |
There was a problem hiding this comment.
order를 사용하셨군요! 👍
조금만 더 신경 써주시면 될 거 같습니다!
| 'toggle-password-check', | ||
| ); | ||
|
|
||
| const email = document.getElementById('email'); |
There was a problem hiding this comment.
변수명은 명확하게 써주시면 좋습니다 :) 해당 변수는 input을 나타내므로 emailInput 등의 이름이 좀 더 명확해 보이네요!
참고로 dom 요소 같은 경우 관습적으로 $을 붙이기도 합니다~!
const $emailInput =document.getElementById('email');
| }); | ||
|
|
||
| email.addEventListener('focusout', () => { | ||
| const val = email.value.trim(); |
There was a problem hiding this comment.
유효성 검사 로직들이 여기저기서 반복되고 있네요! 함수 하나로 묶어 관리해 보는 것도 좋을 거 같습니다 :)
function validateEmail(value) {
if (value.length === 0) {
return '이메일을 입력해주세요.';
} else if (!validateEmail(value)) {
return '잘못된 이메일 형식입니다.';
} else {
return '';
}
}
email.addEventListener('focusout', () => {
const val = email.value.trim();
const error = validateEmail(val);
handleValidation(email, !!error, error, emailError);
}
function validateForm() {
const isEmailValid = validateEmail(email.value) ;
//...
}| ); | ||
| } | ||
|
|
||
| function handleValidation(input, condition, message, errorEl) { |
There was a problem hiding this comment.
파라미터를 줄일 수도 있겠네요! 🤔
function handleValidation(id, error) {
const input= document.getElementById(id);
const errorEl= document.getElementById(`id-${error}`);
if (error) {
input.classList.add('error');
errorEl.textContent = error;
} else {
input.classList.remove('error');
errorEl.textContent = '';
}
}| </div> | ||
| </div> | ||
| <div></div> | ||
| <script> |
There was a problem hiding this comment.
js 파일 따로 만들어 관리하시면 조금 더 깔끔하게 정리할 수 있습니다 :)
특히 login과 겹치는 부분이 많은데, module 을 사용해서 공통 로직을 import 할 수도 있겠죠!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html
2 participants
요구사항
스프린트 미션 3
기본
심화
스프린트 미션 4
기본
심화
주요 변경사항
스크린샷
PC 버전입니다.
테블릿 버전입니다.
모바일 버전입니다.
로그인 검증과 회원가입 검증입니다.
멘토에게