오늘 목표
TIL 리뷰
TIL 작성
자바스크립트 문법 종합반 4주차 숙제
자바스크립트 5주차 완강
오늘 한 것
TIL 리뷰
TIL 작성
moviechart 업데이트 (필수, 선택 전부 완료)
1. 평점을 기준으로 한 영화 랭킹 값 표시
tmdb가 알아서 순위대로 영화를 넣어 주고는 있지만
도전하기 이전에는 순위대로 들어갔는지 조차 파악을 못했다.
문제
sort를 key 에 해당하는 value순으로 정렬하고 싶다.
시도
rows.sort(key = ((_)=>_)[12])
let rankarray = []
let rank = rankarray.indexOf(id) +1
인덱스 값을 0부터 출력하므로 사람들이 이해할 수 있게 +1 해 준다.
sort는 이미 api에서 이미 구현되어 있으므로 삭제해 준다.
해결
순위가 잘 나온다.
알게된 것
rows.sort(key = ((_)=>_)[12])
sort를 특정 key로 하는 방법
2. alert 띄어쓰기
문제
string 과 number를 함께 쓸 경우 띄어쓰기를 집어 넣으면 alert가 작동하지 않는다.
시도
1. 백틱 안에 백틱 넣기
2. 새로운 변수를 만들어서 이중 백틱 해 보기
let alertmessage = `영화 ID : ${id}`
3. 띄어쓰기 양 옆으로 이스케이프 문자 \ 넣어 보기
4. 이스케이프 문자 \n 사용하기
해결
onclick 뒤를 따옴표로 묶어준다.
(동기 분들이 이럴 때 마다 구해주지 않았다면 난....코딩을 할 수 없었을지도)
알게 된 점
onclick 의 = 뒤에 오는 것은 따옴표로 묶어 줘야 한다.
onclick='alert("영화 ${id}")'
3. 찾는 영화가 없을 때 alert 1회로 알려 주고 싶다.
문제
alert가 20번 나옴
시도
forEach 바깥으로 코드를 빼고
새로운 for문을 통해 noarray라는 배열에 title을 uppercase 하여 push 해 줌
결론적으로 대문자로 이루어진 제목을 가진 배열 noarrray 가 생김.
이 noarray에서 upperSearch 를 include 하는 것을 filter 하여 filteredtitlearray 에 담는다.
filteredtitlearray의 length가 0이면 찾는 영화가 없는 것이다.
그때 alert를 띄운다. > for나 forEach 바깥에서 실행되므로 1회만 alert 된다.
해결
let rows = data['results']
document.getElementById("cards").innerHTML = ""
let searchString = document.querySelector("#search").value
let upperSearch = searchString.toUpperCase()
let noarray = []
for (i = 0; i < rows.length; i++) {
noarray.push(rows[i]['title'].toUpperCase())
}
let filteredtitlearray = noarray.filter(function (item) {
return item.includes(upperSearch)
})
if(filteredtitlearray.length==0){
alert("찾으시는 영화가 없습니다!")
}
알게된 점
반복이 싫으면 반복문 밖에서 작업한다.
4. 페이지 초기화 후 불러오기
문제
godfather를 검색해서 값을 가져온 뒤
HOME으로 돌아가려고 하면
godfather 뒤에 HOME의 카드들이 붙음
시도
홈으로 돌아가는 함수인 load() 에서 forEach를 돌기 전에 다음 식을 넣어준다.
document.getElementById("cards").innerHTML = ""
해결
홈으로 돌아가면 홈만 보인다. 성공.
알게 된 점
작은 부분도 다 테스트 해 보자. 수정은 필수.
5. grid
// index.html
<div class="search">
<input type="search" class = "item" id="search" placeholder="제목으로 검색하기" autocomplete="off" autofocus>
<button class = "item" id ="searchbtn" onclick="search()" type="button"> 영화 검색</button>
</div>
// css
.search{
display: grid;
grid-template-rows: 50px 50px; //세로
grid-template-columns: 250px 100px; // 가로
}
정리
sort를 특정 key로 하는 방법
rows.sort(key = ((_)=>_)[12])
반복이 싫으면 반복문 밖에서 작업한다.
작은 부분도 다 테스트 해 보자. 수정은 필수.
onclick 뒤를 따옴표로 묶어준다.
소감
오늘 또 큰 걸 배웠다. 항상 자만하지 말자.
'verdantjuly > Today I Learned' 카테고리의 다른 글
TIL 20230530 (0) | 2023.05.30 |
---|---|
TIL 20230529 (0) | 2023.05.29 |
TIL 20230527 (0) | 2023.05.27 |
TIL 20230526 (0) | 2023.05.26 |
TIL 20230525 (0) | 2023.05.25 |