팀프로젝트 2일차

팀프로젝트를 하면서 TIL에 남겨두고 싶은 것들에 대해 적어본다.

페이지가 가장 밑으로 갔을 때 가장 상단으로 올리는 버튼을 구현하고 싶었다.

function moveTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}

버튼을 눌렀을 때 위와 같은 함수가 실행되도록 했고, 자연스럽게 올라가도록 smooth를 더해주었다.

구현하고 나니 페이지가 가장 밑으로 갔을 때가 아닌 검색창이 보이지 않았을 때부터 버튼을 누를 수 있도록 하는 것이 더 편할 것 같다는 생각이 들었다. 전에 프로젝트를 할 때 팀원 중 한 분이 구현하셨던 기능이었는데 다시 한번 생각해 볼 수 있었다.

function showTopBtn() {
  if (window.scrollY >= 179) moveTop_btn.style.visibility = "visible";
  else moveTop_btn.style.visibility = "hidden";
}

페이지 Y축의 상단값을 나타내는 window.scrollY를 이용하여, 알고자하는 페이지의 콘솔창에서 검색창이 사라졌을 때 값을 찾고 그 값보다 커지면 버튼이 나타나도록 구현해보았다.

아이디,비밀번호 유효성 검사 구현 중 아이디는 input태그에서 maxlength속성을 이용해 글자 수 제한을 할 수 있었는데 비밀번호는 되지 않았다. 알고보니 비밀번호는 type이 number이기 때문에 작동하지 않았던 것이다. 비밀번호의 수를 제한하는 방법은 다음과 같다.

<input 
       type='number' 
       oninput='handleOnInput(this, 10)'
/>

oninput 이벤트가 시작되면 handleOnInput함수가 호출되는데, 첫번째 파라미터로 input element가 전달되고, 두번째 파라미터로 최대 입력 글자 길이(10)가 전달된다.