오늘은 조별과제 2일차! 어제는 뒤로가기, 홈버튼을 만들어 놓은 채 구상만 하다 끝났는데 하려다 못 한 영화 검색창 유효성 검사 기능을 만들어 볼 것이다.
좌측 상단 인풋창에 입력한 값이 30글자를 넘어가면 30글자를 초과했다는 경고창을 띄울 것이다. 이러한 생각 끝에 작성한 코드는 아래와 같다
이렇게 코드를 작성하고나서 다시 사이트를 확인해 봤다.
근데..
문제 직면
알럿창이 나타난 후에 확인을 누르면 해당 밸류 값을 초기화 시켜줬기 때문에 사이트가 새로고침되며 입력했던 값들이 전부 리셋되는데, 생각해 보니
사용자 입장에선 기껏 힘들게 영화 제목 입력하고 있었는데 경고를 받자마자 다시 검색창이 리셋이 되면 불편하지 않을까 라는 생각을 하게 되었다.
그래서 한참을 생각하다가 떠오른 것이 바로 textContent이다.
textContent로 30글자를 초과할 시에 검색 인풋창 부근에 경고 메세지로 "최대 글자수를 초과하였습니다. 다시 입력해 주세요!" 라고 계속 보여주되, 사용자가 인풋창에 입력한 밸류는 초기화 시키지 않는 것이다. 그리고 또 30글자를 초과했는데 엔터키를 눌러 검색이 가능하게 되면 안되니깐 그 점을 고려해서 코딩을 해보았다.
문제 해결
오랜 수정의 시간을 거쳐 아래의 코드로 최종 수정을 하였다.
일단 간략하게 전의 코드랑 무엇이 달라졌냐면
- html 파일에 input-wrap 클래스를 달고 있는 부분을 콕 찝어서 inputWrap1 상수를 만들어줌
- 화면에 메세지를 띄워줄 messageDisplay 상수를 만들어서 div를 생성해줌
- messageDisplay에 message 클래스를 추가
- input-wrap를 찝어준 inputWrap1에다 messageDisplay 요소 추가
- meassageDisplay.textContent를 사용해 알럿창이 아닌, 화면에 글자 출력
이렇게 정리할 수 있겠다. 그리고 30글자가 초과했을 시에 검색이 되는 걸 방지하고자 아래와 같은 코드도 추가해줘서 엔터가 안 먹히도록 기능 구현을 성공했다. 
272~275줄까지 코드를 추가해줬는데 저렇게 콘솔로그를 띄우고 return 시켜버리면 return에 의해 함수가 종료되어 30글자를 넘긴 후 엔터를 눌러도 이미 return을 시켰기 때문에 그 후의 검색 동작 코드는 실행되지 않기 때문이다.
이렇게 수술을 마치고 난 후의 결과물은 이렇다!
(참고로 처음에는 저 textContent의 출력 위치가 검색 인풋창의 위에 너무 가깝게 떠서, 아까 위에서 messageDisplay.classList.add("message")
코드를 써서 message라는 클래스를 만들어 둔 걸 이용해서 css 코드로
출력 위치, 글자 색상 등 전부 수정했다)
이렇게 하면 엔터를 눌러도 30글자를 초과했기 때문에 초과를 한 상태에서 엔터도 안 먹힐 뿐더러, 저 textContent 메세지가 출력한다고 해서 화면이 새로고침 되는 것이 아닌 현재 인풋창의 밸류에 따라 실시간으로 textContent가 나타나고 사라짐으로써 사용자로 하여금 검색을 할 때 기껏 타이핑 해놓은 인풋의 밸류 값이 사라지지 않도록 하였다.
오늘 하루를 마치며
확실히 바로 전 과제를 개인과제로 해왔기 때문에 전보다는 실력이 늘은 거 같지만 여전히 어떠한 기능을 구현할 때 막막하고 어렵다고 느끼는 걸 보면
아직도 부족함이 느껴지는 건 어쩔 수 없나 보다.. 더 노력합시다 나 자신
