[Javascript] 로그인 기능 - 글자수제한 구현하기

2022년 12월 12일 작성

오늘은 위코드 1일차이다. 첫 날이라 오리엔테이션과 간단한 프론트엔트 수업을 들었다. 오리엔테이션 때에는 멘토 소개와 향후 일정 안내, 앞으로 있을 수업을 위한 개발 환경 셋팅을 했고,이후에는 프론트엔드 개발자가 하는 일과 학습할 언어에 대해 간략하게 설명을 들었다.

 

오늘의 과제는 '인스타그램 클론코딩하기'이다. 요구하는 기능을 구현하기 위해 사용해야 하는 메소드들은 생각이 났는데, 함수와 메소드를 잘 연결시키는 과정이 헷갈려서 시행착오를 많이 겪었다. 계속 활용을 해서 체득화할 수 있도록 노력해야겠다.

필요 사항

id 와 password 에 입력된 글자가 한 글자 이상일 때, button 비활성화 → 활성화가 되어야 함

구현 방법

1. CSS

• 문제
  버튼에 color: white; background-color: rgb(65, 147, 239);를 적용했더니, 버튼이 비활성화된 상태에서도 글자색과 배경이 적용되어 버튼이 활성화 상태인지, 비활성화 상태인지 구분이 안갔다.
• 해결방법
  .loginBtn:disabled { opacity: 0.6; } 로 버튼이 비활성화일 때 적용할 css를 따로 적어주었다.
  또는 js 로 버튼이 비활성화됐을 때,
  document.getElementById("loginBtn").style.opacity = "0.5"; 투명도가 0.5가 되도록 직접 스타일을 지정해줘도 된다.

2. Javascript

• 문제
  ID 와 Password 에 각각 keyup 이벤트를 추가하고, value의 길이에 따라 버튼이 활성화/비활성화 되도록 만들었다. 그랬더니 Password value의 길이와 상관 없이 ID value의 길이가 1만 되어도 버튼이 활성화되는 문제가 있었다.
• 해결방법
  

  

  
  로그인 버튼을 눌렀을 때 ID와 Password의 길이가 모두 한 글자 이상이여야 버튼이 활성화되는 'clickLogIn'함수를 만들었다. 그리고 ID 창과 Password 가 각각 입력이 될 때마다 이 함수가 실행되도록 했다. 그랬더니 문제가 해결되었다!

3. 삼항연산자

• 삼항연산자는 for문을 대체할 수 있는 아주 편리한 조건문이다.조건문 ? 참일 때 실행문 : 거짓일 때 실행문

	idInput.value.length >= 1 && pwInput.value.length >= 1
    ? (loginBtn.disabled = false)
    : (loginBtn.disabled = true);

• 로그인 기능을 구현할 때 사용한 삼항연산자를 풀이하면 다음과 같다.
  조건문 : idInput.value의 length 와 pwInput.value의 length 모두 가 1보다 같거나 큰가 ?
  참일 때 : 버튼 활성화
  거짓일 때 : 버튼 비활성화
• 삼항연산자를 사용하면 코드를 매우 간결하게 짤 수 있으니 알고리즘 문제를 풀 때 활용하면 좋다!