Conversation
previous - 상대 경로 current - url 태그 추가 및 절대 경로
1. 이메일 형식 검증 2. 비밀번호 형식 검증 3. 이메일, 비밀번호 검증에 따른 로그인 버튼 활성화
| <form action="#" method="POST" id="signup-form"> | ||
| <div class="email"> | ||
| <label for="email">이메일</label> | ||
| <input type="email" name="email" placeholder="이메일을 입력해주세요"> | ||
| <input type="email" name="email" id="email" placeholder="이메일을 입력해주세요"> | ||
| <p class="error-message" id="email-error-message"></p> | ||
| </div> | ||
| <div class="email"> | ||
| <label for="email">닉네임</label> | ||
| <input type="email" name="email" placeholder="닉네임을 입력해주세요"> | ||
| <div class="nickname"> | ||
| <label for="nickname">닉네임</label> | ||
| <input type="nickname" name="nickname" id="nickname" placeholder="닉네임을 입력해주세요"> | ||
| <p class="error-message" id="nickname-error-message"></p> | ||
| </div> | ||
| <div class="password"> | ||
| <label for="password">비밀번호</label> | ||
| <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요"> | ||
| <div class="hide-icon"> | ||
| <div id="hidden"></div> | ||
| <div class="input-wrap"> | ||
| <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요"> | ||
| <div class="visibility-icon"> | ||
| <div id="visibility"></div> | ||
| </div> | ||
| </div> | ||
| <p class="error-message" id="password-error-message"></p> | ||
| </div> | ||
| <div class="password-confirm"> | ||
| <label for="password-confirm">비밀번호 확인</label> | ||
| <input type="password" id="password-confirm" name="password-confirm" placeholder="비밀번호를 다시 한 번 입력해주세요"> | ||
| <div class="hide-icon"> | ||
| <div id="confirm-hidden"></div> | ||
| <div class="input-wrap"> | ||
| <input type="password" id="password-confirm" name="password-confirm" placeholder="비밀번호를 다시 한 번 입력해주세요"> | ||
| <div class="visibility-icon"> | ||
| <div id="confirm-visibility"></div> | ||
| </div> | ||
| </div> | ||
| <p class="error-message" id="password-confirm-error-message"></p> | ||
| </div> | ||
| <button class="signin-btn">회원가입</button> | ||
| <button class="signup-btn" id="signup-btn" onclick="goOtherPage('login/login.html')" disabled>회원가입</button> |
| <div class="visibility-icon"> | ||
| <div id="confirm-visibility"></div> | ||
| </div> |
There was a problem hiding this comment.
이미지 태그를 써도 되고, 배경 이미지로 해도 둘 다 맞는 방법이라고 생각합니다.
성구님은 image 태그가 아닌 왜 배경 이미지로 하기로 결정을 하셨죠?
There was a problem hiding this comment.
질문 감사합니다. 저도 고민을 많이 했는데 결국 다음과 같은 이유 때문인 것 같아요. 혹시 잘못된 부분있으면 피드백 주시면 감사하겠습니다 :)
-
초기 설정할 때,
눈 모양 아이콘과사선이 그어진 아이콘을 모두 넣어두려 했었고, 이 과정에서 html로 표현하면 두 개의 태그를 사용해야한다고 생각했습니다. -
당시 자바스크립트 진도가 나가지 않은 상태라 css로 구현하려 했고, 이 과정에서
image태그로 구현하면toggle에 있어 통일성이 떨어진다고 생각했습니다. -
이 과정을 이전에는
:active를 통해 구현했으며, 현 과정에서.active클래스를 통해 구현하는 방식으로 바꿨습니다.
3-1.:active를 통해 구현하면 클릭을 누르고 있을 때만 이미지가 바뀌는 문제가 있었습니다.
3-2. 자바스크립트 파일을 생성하고 로직을 추가하는 과정에서.active클래스를 이용하여 배경이미지를 바꾸는 방식으로 구현했습니다.
따라서 현재 image 태그가 아닌 배경 이미지를 통해서 구현하여 레이아웃을 그대로 두고, 배경 이미지만 다시 칠하는 방식을 생각하며 구현하였습니다.
지금 다시 생각해보면 image 태그의 속성 값만 바꿔줘서 렌더링시에 CSSOM을 건드리지 않는게 더 좋은 방식이라고 생각됩니다.
There was a problem hiding this comment.
리턴되는 값을 일치시켜주셔서 handleType의 리턴값으로 통일성있게 사용하고 계시네요. 좋은 아이디어라고 생각합니다 !
| const validation = new signupValidationState(); | ||
| const password = new passwordState(); |
There was a problem hiding this comment.
클래스를 사용해주셨네요~ 구현을 보니까 상속까지 하셨던데
혹시 상속과 클래스를 사용하게 된 배경이 어떻게 될까요?
There was a problem hiding this comment.
리뷰 감사합니다:)
리액트의 useState를 생각하며 비슷한 방식으로 만들어 보고싶었습니다.
함수로 구현하니 내부 값이 변동되지 않는 문제가 있어 클래스를 활용하였고, 로그인과 회원가입 간 state와 메서드가 겹치는 것이 있어 상속을 통해 구현하였습니다.
|
|
||
| const handleErrorMessage = (inputType, errorType) => { | ||
| let errorMessage = ''; | ||
| switch (errorType) { |
There was a problem hiding this comment.
swtich문을 사용할때 default 절도 꼭 함께 사용해주세요. 핸들링되지 않는 case에 대해서 에러메세지를 던지거나 다른 처리를 함으로써 좀 더 안정적인 코드가 됩니다.
There was a problem hiding this comment.
리뷰 감사합니다 :)
다음부턴 default도 고려하여 구현하겠습니다 :)
리뷰를 어떻게 할까 고민하다가 코드 하나하나는 잘 동작해가지고 로직을 작성하시는데는 무리가 없는것으로 판단이 되어서 코드 & 리팩토링을 어떻게 해야하는지에 대해 피드백을 드려야겠다고 생각했습니다. 우선 코드 작성과 관련해서 아시는지 모르겠지만 SOLID 원칙이라는 소프트웨어 개발에 중요한 원칙이 있습니다. 코드작성
handleError({
inputType:'이메일',
btnName: 'signup',
validation,
});
handleError({
inputType:'닉네임',
btnName: 'signup',
validation,
});
handleError({
inputType:'비밀번호',
btnName: 'signup',
validation,
password,
});
handleError({
inputType:'비밀번호 확인',
btnName: 'signup',
validation,
password,
});이 함수가 하는 일을 보시면 아래와 같이 4가지의 일을 합니다.
이럴 경우에는 각각 4가지의 함수로 분리를 하는것을 권장합니다. 리팩토링아마 여기쯤 읽으시면 이제 의문점이 들수도 있고, 처음에 원래 그렇게 했다가 리팩토링을 해서
함수가 많아지는것은 상관없다고 생각합니다. 읽기 쉽고 이해하기 쉬운 함수가 많아지는것은 나쁜 코드나 개발을 잘하거나 못하거나랑 관계가 없습니다.
사실 여기서부터 리팩토링을 시작해야합니다. 중복코드가 내가 정한 기준이상 등장한다면 한단계 추상화를 통해 공통로직을 뽑아내어 중복코드를 제거 할 수 있습니다. 오히려 리팩토링을 해야하는 대상은 마법같이 모든걸 처리하는 함수입니다. 리팩토링을 한 결과는 동작은 똑같은데 읽기 쉬워지고 단순하고 짧은 함수들이 만들어져야합니다. 중복코드는 일정수준의 중복코드는 사실 허용됩니다. 중복코드를 100% 없앨수는 없습니다. 다만 최대한 안 그럴려고 노력 할 뿐입니다. 한번 |
wlgns2223
merged commit ab761a4
into
codeit-bootcamp-frontend:Basic-강성구
요구사항
기본 요구사항
체크리스트 [기본]
로그인
회원가입
체크리스트 [심화]
스크린샷
사이트 주소
멘토에게