[TIL] 240112(금) 팀 과제 영화 검색 페이지 만들기 / 상세페이지 이동하기

오늘의 공부📖

1. 팀 과제 진행
2. JS 기본문법 실시간 세션 강의
3. TIL 작성

오늘 공부한 내용 정리💁🏻‍♀️

1. parseInt( ) 함수

알고리즘 문제 풀다 parseInt 함수를 알게 되었다.
문자열을 정수로 변환하는 함수이다. 또한 진법 표현을 나타낼 수 있다.

Javascript parseInt( ) 함수

2. 카드 검색 결과가 없을 때, alert창 띄우기

1) title의 제목을 검색했을 때, 영문의 대소문자를 없애기 위해 toLowerCase를 이용하여 모두 소문자로 만들었다.
2) card를 검색하는 키워드 또한 동일하게 toLowerCase를 이용해 소문자로 만들어준다.
3) 빈 배열을 만들어주는데, 만약 title.includes(searchedValue)를 console.log를 찍어주면, true 또는 false 가 나온다.
→ title에 너가 검색한 searchedValue가 포함 되어있니? 라는 질문에,
: 제목에 검색어가 포함되면, true/ 제목에 검색어가 포함되지 않는다면, false를 반환한다.

4) 위의 ③을 활용하여, 제목에 검색어가 포함된다면 그때 빈 배열에 title을 추가한다.
또한, 제목에 검색어가 포함 되는 카드들은 display : "block" 하여 해당 카드들이 화면에 나타나도록하고, 그렇지 않은 카드들은 display : "none"을 하여 화면에서 사라지도록 구현한다.

5) 만약 제목과 검색어가 아예 일치하지 않는다면 = 빈 배열에 아무것도 추가되지 않는다면, alert으로 알림을 보낸다.
또한, 해당 alert 창이 뜬 이후에는 모든 카드들이 다시 화면에 보이도록한다.

어제부터 이 부분을 계속 구현하고 싶어서 배열에 이것도 넣어봤다가 저것도 넣어봤다가, forEach로 돌았다가 alert 창도 띄웠다가 별 짓을 다 했는데...
튜터님께 질문을 하러 갔더니 생각보다 간단하게 끝낼 수 있는 문제였다.
forEach문을 돌면서 카드가 화면에 나타나고 사라지는 것을 먼저 다 끝낸 후에, 그 다음 배열이 비어있는 놈들만 찾아서 alert을 띄우면 되는거였다...!!!

📌 일단 정확하게 구현하고자 하는 것이 무엇인지 순서대로 한글로 생각을 해 본 다음에, 한 문장씩 코드로 구현을 하는 연습을 더 해야겠다.

 const movieCards = document.querySelectorAll(".movie-card"); // 모든 카드 가져오기
  const cardsArray = [];

  movieCards.forEach((card) => {
    const title = card.querySelector(".movieTitle").textContent.toLowerCase(); // 제목 모두 소문자로 바꾸기
    const searchedValue = searchKeyword.toLowerCase(); // 검색어도 모두 소문자로 바꾸기

    // 검색 결과 있을 때, 빈 배열에 카드 제목 추가
    if (title.includes(searchedValue) === true) {
      cardsArray.push(title);
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });

  // 검색 결과가 없을 경우(=빈 배열 상태), alert 띄우기 + 기존 카드 모두 보이게 하기
  if (cardsArray.length === 0) {
    alert(`검색 결과가 없습니다. 다시 입력해 주세요.`);
    movieCards.forEach((card) => {
      card.style.display = "block"; // alert 창이 뜬 이후에 모든 카드들이 다시 보이도록한다. 
    });
  }

3. 브라우저에서 해당 html의 저장된 값 확인하기

확인하고자 하는 위치에서 우클릭 > 검사 > 해당 코드에서 우클릭 > Copy > Copy Selector를 확인하면 해당 값이 어디에 소속되어 있는지 확인을 할 수가 있었다.

4. input 창에 아무것도 입력하지 않았을 때, alert 띄우기

**주의 사항**
form 태그의 submit event의 실행을 막는 함수를 만들었기 때문에, input 태그를 제어하기 위해서는 form 태그 스코프 안에서 실행 되어야 한다!

또한, searchedInput.value === ""(빈 문자열) 로 조건을 달면 input에 아무것도 입력되지 않았을 때, alert이 뜬다.
하지만, spacebar가 눌러진 상태에서 아무 문자도 입력되지 않으면 실행이 되지 않다.
따라서, trim()을 사용하여 spacebar를 눌러 생긴 공백을 제거해준다.

const searchInput = document.querySelector("#searchId"); // input 태그의 id를 불러와서 변수를 선언한다. 
searchInput.focus();

// input창에 아무것도 입력되지 않을때 alert
  if (searchInput.value.trim() === "") {  
    // trim() : spacebar 눌렀을 때 무시.
    alert("제목을 입력해 주세요.");

    const movieCards = document.querySelectorAll(".movie-card");
    movieCards.forEach((card) => {
      card.style.display = "block";  // 마찬가지로 alert 창이 뜨고 나면, 화면에 모든 카드가 보이게한다. 
    });
    return;
  }

5. 한 단계 위로 이동하고 싶을 때, parentNode

모든 코드들은 부모 - 자식 관계를 가진다. 특히 자식의 구역에서 부모의 속성을 가져다 쓰고 싶으면, parentNode로 이동하여 그 값을 가져다 쓴다.

만약 두 구역을 거슬러 올라가, 조부모의 속성을 쓰고 싶다면 ?! parentNode.parentNode로 이동하면 가능!

6. <a></a>태그 / Quert String

/* 상세페이지 이동이라는 버튼을 누르면, 새로운 페이지를 열어주어 상세 페이지로 이동하는 링크를 팀원분께서 만들어주셨다.
a 태그도 처음보고 query string도 처음 들었지만, 이제 차차 알아가보도록 하자.

✅ <a> 태그
: ` 태그는 하이퍼링크를 걸어주는 태그이다.

• href : 클릭시 이동 할 링크를 말한다. (hyper reference를 의미)
• target : 링크를 여는 방법

✅ Query String (쿼리스트링)
: 사용자가 입력 데이터를 전달하는 방법 중 하나. url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것.

주소는 기본적으로 프로토콜://도메인/경로 로 구성되며, 이를 엔드포인트 주소라고 한다.

Query String은 ? 뒤에 나타나는 key-value pair 부분으로 주로 parameter=value로 나타낸다.
또한, 파라미터가 여러개일 경우, & 를 사용하여 여러개의 값을 넘길 수 있다.
엔트포인트주소/엔트포인트주소?파라미터=값&파라미터=값

<a href = "/index2.html?id=${movie.id}">

▶️ /index2.html(: 구현하고자 하는 페이지) ? id(:parameter)=${movie.id}(:카드를 통해 받아와야 하는 값)

하루를 마치며...🤔

하루 종일 너무나도 많은 새롭게 처음 듣고 보는 것을 배우고, 또 열심히 서칭을 하며 코드를 익히고 구현해나가는 하루였다. 너무나도 많은 정보가 머릿속으로 들어왔기에 까먹기 전에 기록을 남기는 습관을 잘 들여야 할 것 같다. 기억보다는 기록을.. 이라는 말이 너무 공감이 된다. 자꾸 개인 과제에 팀과제까지 진행하면서 개인 공부를 할 수 있는 시간이 줄어드는데, 작성하려고 밀린 글들이 벌써 쌓여만 가고 있는 것 같다. 주말 이용해서 얼른 털어서 비워내고 또 새로운 내용들을 열심히 배우고 익혀나가도록 해야겠다.

• html 태그에 대해서 한 번 찾아보고 정리해봐야겠다.