개인 과제

검색 기능 구현 중

.
.
.

너무 길고 많이 써서 변수 설정 한 번 해놓고...

const inputValue = document.querySelector('#searchInput').value;

검색-값이 없을 때

맨 처음에 썼던 if 문. 작동하지 않는다!

if(inputValue === null) {
alert("영화 제목을 입력해주세요.")
return;
}

""과 null의 차이
"" (빈 문자열): 이는 문자열이지만 내용이 없는 문자열을 나타냅니다. 사용자가 입력란을 비웠을 때 발생하는 상황과 관련이 있습니다. 빈 문자열은 존재하지만 아무런 값도 포함하지 않습니다.
null: 이는 값이 없음을 나타내는 특별한 JavaScript 데이터 타입입니다. 변수가 아무런 값을 가지지 않음을 나타냅니다. 즉, 값이 아예 할당되지 않은 상태를 의미합니다.

if(inputValue === '') {
alert("영화 제목을 입력해주세요.")
return;
}

""으로 바꿔줬더니 기능 완료!

그런데, 띄어쓰기 왕창하고 검색해보니 이 녀석 작동하지 않는다! 말그대로 아무것도 입력하지 않은 상태가 아닌 것. 이 때 사용하는 trim() 매서드를 알아냈다...!!

if(inputValue.trim() === '') {
alert("영화 제목을 입력해주세요.")
return;
}

공백까지 빈 문자열로 치는 알럿까지 완료~!

검색-값이 있을 때

왠지 검색하니까 find()가 쓰고 싶었다. 근데 find의 경우는 한 개만 출력해주는 매서드라서 filter() 를 쓰기로하고 열심히 코딩 작성 중...

.
.
.
헤맸다!!!!

헤맨 이유? 정리가 안 됐다...
" 단어를 검색하면 웹페이지 검색 결과가 나온다 " 라는 이 간단하고 당연한 명제를 쪼개서 순서대로 하려고 하니 정리가 되지 않았다.

할 수 있는 코드들 마구 나열했다...

입력값... 인풋 밸류 값 가져와야지..
영화 제목이랑 값을 비교해야 하네...
아, 검색 버튼 눌러야지!
비교할 때, 값이 없으면 리턴해야지!
그렇군! 이거 배열 반복문 사용해야 하니까 뭘 사용해볼까? find 매서드가 있네!! 이거 사용해볼까?

난잡한 코드들 나열... 할 수 있는 코드들 쭉 나열하니 코드 입력한 나도 정리가 안 된다. (당연히 실행도 안 된다. 실행되면... 신기했을 지도... 슈퍼 컴퓨터...) 다시 싹 밀고 컴퓨터 빙의해서 차근차근 글을 썼다.

1. 검색 버튼이 눌리면
2. 입력 값을...
   .
   .

물론 이게 정답은 아닐 수 있다.(다른 분들 코드 궁금하다!!) 그런데 나의 경우는 첫 단계가 '검색 버튼이 눌리면 구동하는 함수 만들기' 로 잡히면서 쭉쭉 순서 쓸 수 있었다.

그러니까 이게 버튼을 누르면 이제 동작을 하는데...
아 그럼 입력 값은 그 안에 함수에서 지정하면 되겠네... 변수.... 지정하고....
.
.
.

검색은... "제목"으로 하는 거니까... 대소문자 구분을 안 하고 검색했더니 제목에 God이 들어간 경우 god으로만 쓰면 기능이 안 된다!
그때는 toLowerCase() 을 써야함... 뒤에 주섬주섬 추가...

const foundMovie = movies.filter(movie => movie.title.toLowerCase() === inputValue.toLowerCase())

정확한 영화 제목 전부가 아니라 그 문자만 넣어도 검색하려고 하면!?
=> includes() 매서드 사용...
이 친구는 여기 괄호 내부(파라미터)를 잘 사용하는 게 중요하다.

검색에서 이게 단어가 같아야 작동하잖아... 🙃 라는 생각 때문에 일치 연산자를 놓지 못한 나... includes() 완전 일치한 검색어가 필요한 것이 아니라는 생각에 === 를 지우고 includes() 이 매서드를 사용했다.

=== 이 지워지니 뭔가 괜히 허전한 기분 🥹 이게 이런 글로 되는 거냐고 의심스럽게 보는데...

const foundMovie = movies.filter(movie => movie.title.toLowerCase().includes(inputValue));

콘...솔... 로... 그... 되네... 🥹 === 저리 가 하고 코딩 열심히 만든다...

.
.
.

일단 필수 기능을 다 만들어서, CSS와 선택 요구 사항 만들기에 돌입 중!

(2) 선택요구사항
- CSS (flex or gird)
- 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
- 대소문자 관계없이 검색 가능하게 하기
- 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

=> 간단한 CSS 와 마지막 같은 경우는 검색하면 해야 할 것 같은 친구라서 꼭 도전해보고 싶다!

CSS가 제일 어렵다...

커서 자동 위치

input 에 오토 포커스 주기

enter키 입력 동일 방법

생각보다 너무 쉬워서 놀랐다.

document.querySelector('#searchInput').addEventListener('keypress', function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.querySelector('#searchBtn').click();
}
});

이거 검색 관련 기능 다 작동하면 잘 따라가게만 하면 슉 되는 ..... input에 이벤트 함수를 주고 적당히 클릭했을 때와 동일하게 작동하게 하기만 하면 된다!
event.preventDefault();
이 부분의 경우, 아무런 기능 없이 그냥 enter 키 누르면 리로드 되는데, 그걸 막는 기능이라고 한다.
event 모르는 시절로 어떻게 돌아가나 싶다. 대신!!! 기초를 꼼꼼하게 하는 걸로.... 꼭 강의 듣고듣고 또 듣고 event에 대해서 더 자세하게 알기!

[오늘의 회고록]

변수... 변수명 제발 오타 그만 내기...
src... scr.... 마음 급하지 말기... 빨간 거 확인...
다른 폴더에서 가지고 올 때 "./@폴더명/@파일명.속성"까지 ... 급하지 말기...
클릭 함수 넣어두고 그냥 냅다 웹만 펼치고서 값이 안 나와.... why...? 🥹 하지 말기 함수 차근차근 살펴보고 클릭 함수에 넣었으면 클릭하고 봐야한다....
전체적으로 나는 매우 급하다! 초심자라 그렇기 때문에
다른 분들의 코드 보는데 진짜 같은 주제면 100명이 다 코드가 다른 것 같다...!! 다른 분들 코드 보고 해석하는 재미도 쏠쏠하다. 나는 여기서 뭘 썼는데, 여기서 다른 매서드를 쓰셨구나! 아 이거는 이렇게 하셨구나! 하는 기분이다. 활용법을 계속해서 배우는 중. (강의를 다 보고 시간이 남으면 꼭 도전해봐야겠다.)
파라미터 사용하는 거 좀 더 잘 확인하기