:: ⏰ 구현 목표
- 순수 자바스크립트, HTML, CSS로 인스타그램 서비스를 클론하여 login, main page 개발을 해본다.
:: ✅ 구현 사항
1. 로그인 입력 데이터 유효성 검사
- 입력창에 변화가 일어날 때 마다 유효성 검사 함수가 실행된다.
- 유효성 검사 함수의 반환값(boolean)에 따라 버튼의 배경색과 disabled 속성이 변화한다.
- 테스트 방법 :
/login페이지 이동 >>> 로그인 input 데이터 입력
2. 댓글마다 좋아요, 삭제 버튼
- 댓글창에 글을 작성하고 엔터 혹은 입력버튼을 클릭하면 새로운 html요소를 생성하고 댓글창에 보여준다.
- 지우고자 하는 댓글 위에 마우스를 올리면 x 버튼이 나타나며, 클릭시 해당 html요소가 사라진다.
- 댓글 옆에 있는 하트 버튼을 누르면 빨간 하트로 변하고, 다시 누르면 좋아요 취소가 된다.
3. 아이디 검색 기능
- 기존 데이터가 들어있는 배열에 filter 메소드를 사용하여, 사용자가 입력한 id값을 포함하는 객체만 들어있는 새로운 배열을 생성한다.
- 새로운 배열의 값들을 html요소로 만들어 검색결과창에 보여준다.
- 사용자가 작성한 값을 지우거나, 새로운 값을 작성할 때, 즉 keyup event가 발생할 때마다 기존에 보여주기 했던 데이터를 없애고 새로운 배열을 다시 보여준다.
- 'x'버튼을 클릭하거나 esc버튼을 누르면 검색 창이 사라진다.
5. nav 프로필 사진 클릭시 메뉴박스 생성
- 사용자가 nav의 프로필 사진 클릭시 옵션 메뉴박스가 생성된다.
- 옵션 메뉴박스를 제외한 부분을 클릭하면 메뉴박스가 사라진다.
6. 반응형 구현
- 사용자가 윈도우 창을 줄이다가 오른쪽 스토리 부분과 왼쪽 피드창이 만나는 지점에, 스토리 부분이 사라진다.
:: 👏성장 포인트
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시까지 기능 구현을 고민했었다. 검색한 결과가 밑으로 자꾸 추가되어 나왔는데, 곰곰히 혼자 기능이 어떻게 구현되어야 하는지 순차적으로 생각해보고 혼자 삽질하며 코드로 옮겨 성공했을 때의 뿌듯한 기분을 잊을 수 없다. 개발의 길을 먼저 걸으신 분들의 말이 맞다. 삽질은 실력으로 이어진다. 아직 가야할 길이 많지만, 지금은 이만큼 성장했다는 거에 나 스스로에게 칭찬 스티커를 주겠다!
