/login
페이지 이동 >>> 로그인 input 데이터 입력1. keyup vs keydown
keyup event와 keydown event의 차이점을 명확히 이해했다. 로그인 유효성 검사시 keydown event를 사용하면 사용자가 입력하는 value가 바로 잡히지 않지만(keydown시 처음에 잡히는 value는 ' '(공백)), keyup event를 사용하면 사용자가 키에서 손을 뗄 때 함수가 돌아가기 때문에 value를 실시간으로 가져올 수 있다.
2. 검색 기능 구현
search 박스 구현시, 검색어가 달라질 때마다 데이터가 계속 쌓여 반복되는 목록이 계속 밑으로 쌓였다. 이를 해결하고 사용자가 검색어를 입력할 때마다 새로운 검색 결과를 보여주기 위해서는 기존의 데이터를 지우는 함수를 먼저 입력해야 하는 것을 알게 되었다.
3. 모달창 구현 방법
modal창(navbar의 프로필 버튼 누르면 나오는 메뉴창) 구현시 modal창 외의 부분을 클릭하면 modal창이 닫혀야 하는데, 이를 구현하기 위해서는 새로운 div, 즉 layover창이 뒷 배경으로 함께 뜨게 만들어야 한다는 것을 알게 되었다. layover창은 modal창 과 같은 depth, 그렇지만 z-index값 변경을 통해 구현하면 position 속성에 따른 위치 변경이 같은 부모를 기준으로 정상적으로 반영된다. modal창을 구현하며 가장 크게 배운 건, 사용자 입장에서 생각하는 것인데, layover창이 transparent하게 구현되어 있기 때문에 사용자 입장에서는 프로필버튼을 누르는 것과 같이 느껴진다는 점을 생각한다면 조금 더 구현이 수월했을 것이다. 이 때 layover창은 어떤 device에서도 늘 꽉 차게 만들어주기 위해 %나 px사용보다는 vh, vw를 사용해야 한다.
불과 몇 달전에 HTML과 CSS로 골머리를 앓고 있던 내가 이제는 HTML과 CSS는 비교적 뚝딱뚝딱 만들고 JS 기능구현에 집중할 수 있도록 성장했다는 거에 스스로 칭찬을 주고 싶다. 또한 검색 기능을 만들 때, 새벽 3시까지 기능 구현을 고민했었다. 검색한 결과가 밑으로 자꾸 추가되어 나왔는데, 곰곰히 혼자 기능이 어떻게 구현되어야 하는지 순차적으로 생각해보고 혼자 삽질하며 코드로 옮겨 성공했을 때의 뿌듯한 기분을 잊을 수 없다. 개발의 길을 먼저 걸으신 분들의 말이 맞다. 삽질은 실력으로 이어진다. 아직 가야할 길이 많지만, 지금은 이만큼 성장했다는 거에 나 스스로에게 칭찬 스티커를 주겠다!