TIL 20230528

오늘 목표

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 뒤를 따옴표로 묶어준다. 

 

소감

오늘 또 큰 걸 배웠다. 항상 자만하지 말자.