[Wecode] Westagram - 로그인 페이지 (JavaScript)

link717·2020년 10월 1일
0

Wecode

목록 보기
3/9

🤔 Westagram - 코드 리뷰

지금까지 배운 지식을 바탕으로 Instagram을 clone 해보았다. 아는 내용이 부족해 구현하는데 애를 먹었고, 어느 정도 추가 기능까지 구현하고 나서는 휴 해냈다!라는 마음이 있었는데.... 다른 분들과 로직을 비교해보니 아직 부족한 점이 많아서 몇 가지 아쉬운 점과 이후 개선 내용에 대해 정리하였다. (거북이는 쉬지 않는다...)

. login 화면(Validation)

 조건: id/pw 조건에 맞는 값이 입력됐을 때 로그인 버튼 활성화

1. HTML(form tag 추가 반영)

1차: form tag 없이 작성

2차: 실제 로그인 정보를 서버로 전달했을 때를 염두하고 form tag를 추가 반영

 form: 사용자로부터 정보를 수집할 때 사용하는 매우 좋은 도구
 action이 처리되는 위치와 처리방식을 정의해주어 사용
<form>
  <label for="email"></label>
  <input
    type="email"
    placeholder="전화번호, 사용자 이름 또는 이메일"
    name="email"
    id="email"
  />
  <label for="password"></label>
  <input
    type="password"
    placeholder="비밀번호"
    name="password"
    id="password"
  />
  <button>로그인</button>
</form>

2. JS(code refactoring)

1차 : id, pw 화면 각각 addEventListener 사용하여 비슷한 코드를 중복하여 작성, 특정 문자열 포함 여부 검사를 위해 for문을 사용

2차: id, pw가 담긴 부모 요소(div)에 addEventListener를 사용하여 id/pw input event를 한개의 listener로 처리하면서 문자열 filtering시 for문 대신 includes method 사용

[includes: arr.includes("탐색할 문자열")]
 str, array type에 사용 가능하며 조건에 맞족하면 true 아니면 false를 반환한다.

  const isValid =
    userId.value.length > 0 &&
    userId.value.includes("@") &&
    userPw.value.length > 4;
profile
Turtle Never stop

0개의 댓글