내일배움캠프 개인과제 3일차이닷...!!
일단 어제까지 뼈대와 화면에 뿌리는것까지는 완성하고 이제 검색을 해서 화면에 이름과 같은 것들을 검색할 수 있게 해야한다
내가 처음으로 생각한 코드는..
form.addEventListener("submit", (e) => {
e.preventDefault();
input.addEventListener("keyup", (e) => {
e.preventDefault(); // 새로고침 방지
if (e.key === "Enter") {
if (input.value !== "") {
getTopRatedMovies();
} else {
window.location.reload();
}
}
});여기까지 생각은 했으나.. 왜 동작을 안하는지 이해를 못했다..
알고보니 잘 작성은했으나..!! 결론은 input.value값이 빈값이 아니면 getTopRateMovies()라는 함수를 실행할수 있지 않을까 까지는 생각을 했으나 이제 어떻게 가져올건지 생각을 못한것이다.. 나는 저렇게하면 fetch api내용을 가져와서 되지 않을까라는 착각을 한것이다..ㅎㅎ 어머나..ㅎㅎ 저것도 은근 생각해서 작성한 코드인데..
그래서 다시 SOS를 요청해야 내배캠 동기분들중 잘하시는 분들이 계셔서 그분들중 한분이 알려주셨닷><(언제쯤..도움안받고도 혼자서 할 수 있는걸까..)
원래코드
function getTopRatedMovies() {
fetch('api주소', options)
.then(response => response.json())
.then(renderMovies) // .then(data => renderMovies(data))
.catch(err => console.error(err));
}수정코드
function getTopRatedMovies(value) {
console.log("value => ", value);
fetch("api주소", options)
.then((response) => response.json())
.then((data) => {
if (value) {
const newData = {
...data,
results: data.results.filter((v) => {
return v.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
}),
};
console.log(newData.results);
renderMovies(newData);
return;
}
renderMovies(data);
}) // .then(data => renderMovies(data))
.catch((err) => console.error(err));
}fetch해서 가져온 데이터와 input.value를 이용해서 원하는 데이터를 찾은뒤에 newData 변수에 할당해주었다. 나머지는 어느정도 이해는 가는거 같은데 왜 indexOf()함수를 사용하고(문자열 !== -1)이 들어갔는지 이해가 안됬다..ㅎㅎ
indexOf() 함수
string.indexOf(searchvalue, position)
- indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
- 파라미터
- searchvalue : 필수 입력값, 찾을 문자열
- position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치 - 찾는 문자열이 없으면 -1을 리턴합니다.
- 문자열을 찾을 때 대소문자를 구분합니다.
const str = "abab";
str.indexOf('ab'); // 0
str.indexOf('ba'); // 1
str.indexOf('abc'); // -1
str.indexOf('AB'); // -1결국 찾는 문자열이 없다면 -1이 리턴이 되다보니, -1이 아닌경우를 적은것이였다..ㅎㅎ 함수도 정말많이 알아야 코드를 작성할 수 있다보니.. 알아야할 것들이 한두가지가 아니지만 그래도 오늘 하나는 제대로 알고 가는거 같아서 그것만이라도 다행이라고 생각한닷..!!
개인과제는 어영부영 제출은했지만 남은 개인과제시간동안은 JavaScript강의 완강 및 알고리즘문제 하루에 1 ~ 2문제는 풀려고 노력해봐야할거 같다..!!(그동안..강의 복습도하고..자바스크립트 이론으로 프로젝트하기 쉽지않은 프로젝트였지만 그래도 튜터님들이랑 동기분들한테 질문하다보니 해결해나가서 뿌듯하당><
