개인과제 완료 (method, DOM)

내일배움캠프 스파르타 코딩클럽 개인과제

 

드디어 개인과제를 잘마무리 하고 제출 하였다.

저번 개인과제 작업중(1) 에 작성을 이어가보도록 하겠다.

 

검색로직

function Search() { // 검색엔진

  if (search_code.value.length > 0) {

    let serchstr = search_code.value.toLowerCase(); // input 단어를 소문자로 변환

    let strfilter = titleOB.filter((strtitle) => (strtitle.includes(serchstr))); // firlter를 사용하여 titleOB에 includes"input"(일부단어) 가 포함되어있으면 그 문장을 적출"

    let strfind = strfilter.map((strf) => (titleOB.indexOf(strf)));

    let temp_htmlj = ``

    document.querySelector("#mvcards").innerHTML = temp_htmlj;

    strfind.forEach((strnbr) => {

      let j = strnbr

      let imglink = tmdbdata[j]['poster_path'];

      let title = tmdbdata[j]['title'];

      let intext = tmdbdata[j]['overview'];

      let rating = tmdbdata[j]['vote_average'];

      let mvid = tmdbdata[j]['id'];

       

      let temp_html = `

      <article class="card" id="idcard" style="display: block;" data-id=${mvid} onclick="idalert(this)">

            <figure class="cardImg">

                ${imglink}" alt="None">

            </figure>

            <figure>

                <h3 class="mvname">

                    ${title}

                </h3>

                <p>

                    ${intext}

                </p>

                <P>

                    Rating: ${rating}

                </P>

            </figure>

      </article>

      `

    document.querySelector("#mvcards").insertAdjacentHTML("beforeend", temp_html);

    });

  } else {

    let temp_htmly = ``

    document.querySelector("#mvcards").innerHTML = temp_htmly;

    for (let y = 0; y < Object.keys(tmdbdata).length; y++) {

      drawcard(y)

    };

  };

};

 

검색로직은 위와같이 작성하였다.

처음엔 과제 필수 조건중 하나인 배열method 6가지 (forEach, map, filter, reduce, find) 중 두가지 이상을 사용하여야 하는데 나는 forEach, map, filter를 채택 하였고 그중 3가지 모두 검색로직을 짜는데 사용하게 되었다.

 

이번주에 검색과 학습을 통하여 내가 직접 생각나는데로 아무런 도움 없이 아래글을 작성해보겠다.

따라서 맞지 않은 표현을 사용할 수도 있다.

 

사용된 배열method 3가지

 

.forEach()

forEach는 간단한 반복문 배열 method 중 하나로 따로 조건을 정해주지 않고 간편하고 쉽게 사용할 수 있다.

array(배열) 안에 있는 원소들을 각각  forEach 내부의 function매개변수에 차례대로 하나 씩 넣으면서 반복을 하여 모든 원소들이 순차적으로 모두 들어가고 나서 자동 중지가 된다.

 

.map()

배열을 참조한뒤 원하는 값으로 변형시켜 다시 배열 값으로 반환 해줌

 

.filter()

배열을 참조한뒤 그 배열안에서 맞는값을 가져와 배열 값으로 반환 해줌

 

이렇게 사용을 하되 대신 세가지 method가 더 필요하다.

 

사용된 method 3가지

 

.toLowerCase()

.toUpperCase() 와 반대로 모든 알파벳 문자열이나 문자를 소문자로 변환시켜 주는 method 이다.

 

.includes()

포함시키다 라는 뜻으로 예를 들어 문자열이 "apple " 이라면 .includes("ple") 이라고 적어도 "apple" 값을 가져온다.

 

.indexOf()

배열의 위치(자리번호값<ex: let nbr = ["w", "p", "o"] / nbr[0] = "w" ) 즉 index값을 반환시켜주는 method 이다.

만약 배열이 let array= ["what", "you", "no"] 라면 array.indexOf("no") 일시 3번째자리 위치값인 [2] 를 반환해준다.

 

Object.keys()

Object의 method 인 .keys() 는 객체의 모든 키(프로퍼티 이름)를 배열 형태로 변환 

 

 

이렇게 하여 검색로직을 짜면 원하는 검색단어를 다양한 형태로 검색을 하여도 해당 title이 들어있는 영화 카드를 브라우저에 보여준다.

 

그리고 다음은 DOM 제어하기 이다.

 

- DOM(Document Object Model) 제어하기 -

 

사용된 DOM method 2가지 (문서 객체 생성과 선택)

(document: HTML 문서 전체를 의미, DOM의 최상위 객체, 웹페이지 전체에 대한 정보와 조작기능을 제공)

 

document.querySelector( "#hello" )

HTML 내부의 태그 안에 있는 id="hello" 요소를 찾아 경로방향 지정

태그 요소가 class 인 경우 # 대신 . 으로 나타낼 수 있음.

 

document.insertAdjacentHTML("beforend", "<div></div>")

document. 다음 위치를 지정해주면 "beforend" 명령어로 자식요소들 보다 뒤에 "<div>,</div>" 가 생성되며 누적가능하다.

 

 

 

사용된 DOM 속성(Property) (문서 객체 조작)

(element : <div>,<p>,<button>,<input> 같은 HTML 태그를 뜻함)

 

element.innerHTML

element 자리에 document.querySelector("#mvcards") 이렇게 요소위치를 가르키는 걸 넣어주고

document.querySelector("#mvcards").innerHTML = "<div><p></p></div>" 를 한다면

그 해당 id="mvcard"  기존자식 요소는 모두 사라지고 "<div><p></p></div>" 요소들로 교체 된다.

 

 

사용된 속성(Property)

 

.length

해당 객체의 길이를 숫자로 반환함 대신 0부터가 아닌 1부터 시작하므로 array에 4개의 문자열이 있다면 그대로 4를 반환 

 

 

기본 클래스(class)(내장객체)

 

Object

객체를 생성하고 관리하는기본 클래스 

 

이렇게 여러가지 코드를 사용하여 검색로직을 짜 주었고 학습과정과 검색과정이 시간이 소요되었을 뿐

다행이 구현 하는것엔 큰 문제가 없었다. 

 

 

 

영화 ID 를 alert로 표시하기

 

function idalert(cardid) {

 let getid = cardid.dataset.id

 alert(`id : ${getid}`)

}

 

이렇게 함수를 작성하여 HTML 에는

<article class="card" id="idcard" style="display: block;" data-id=${mvid} onclick="idalert(this)">

onclick="idalet(this) 를 하여 this라는 현재 HTML태그의 속성들을 참조하게 끔 하였고

.dataset 과 그안의 속성 .id  라는 property 를 사용하여 id를 나타내게 끔 하였다. 

 

동기 비동기 작동 방식과 기능을 알아가며 어떤 기능이 있는지

그것이 무엇을 하는지, 어떻게 쓰이는지, 뜻은 무엇인지

를 알아가는 과정이 시간이 오래걸렸다.