T.I.L (28) 썸네일형 리스트형 23-06-07 T.I.L filter와 find 문제설명 나는 filter()로 특정 데이터 값을 찾았다. 하지만 filter()의 성질이 특정 데이터를 찾는데 효율적이진 않다는 것을 깨달았다. index가 100개가 있는 배열에서 3번째의 데이터를 찾고 싶다고 가정할 때 filter()는 3번째에 있는 데이터를 찾고나서도 100번째까지 데이터 비교를 한다. 이는 데이터의 량이 많을수록 시간복잡도 또한 증가하기 때문이다. 이를 방지하고자 다른 함수를 사용해서 같은 기능을 구현하고자 한다. 시도 튜터님께서 find() 함수를 한번 알아보라고 하셨다. 위의 문제점을 지적해주신 것도 튜터님이었다. find()함수에 대한 공부는 예전에 한번 해봤기 때문에 https://minker.tistory.com/23 내 블로그에 정리된 글을 다시 한번 찾아보았다. 해.. 23-06-06 T.I.L innerHTML과 map 문제설명 한 방법의 코드가 아니라 다른 방식의 코드로 같은 기능을 구현하고자 한다. 나는 보통 템플릿(${})을 HTML에 붙힐 때 append와 forEach()를 사용하지만 이번에는 innerHTML과 map()으로 그 기능을 구현하고자 한다. 시도 나는 특정한 id값을 가지고 있는 객체만을 추출해서 배열로 만들고 싶다. 그래서 일단은 모든 데이터 값을 get한다. const bannerImg = { method: "GET", headers: { accept: "application/json", Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NmQ2MDljY2M4YTk2OGQ4NmY3MDY5MGE5MmU3ZWMwMCIsInN1YiI6IjY0NzA4.. 23-06-02 T.I.L 이벤트 버블링 문제설명 let temp_html = ` ${title} -${grade}- ${overview} `; document.querySelector("#cards-box").insertAdjacentHTML("beforeend", temp_html) 맨 위 코드, 는 fetch로 가져온 모든 데이터에 onclick()을 할당한다. 이는 가져온 데이터의 개수가 많아질 수록 메모리의 낭비를 초래하는 코드다. 이를 방지하고자 더 효율적인 코드로 개선하고 싶다. 시도 이벤트 버블링이라는 현상이 있다. 이는 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 의미한다. 즉 템플릿의 최상위 요소인 `에 "select(${id})함수를 넣는게 아니라 document.querySelector("#cards-box".. 23-06-01 T.I.L position: relative / absolute 문제설명 나는 카드를 뒤집는 기능을 구현하고 싶었다. 그래서 이미지의 위치를 같은 곳에 두고 싶었다. 같은 div에 이미지를 넣는걸로는 해결되지 않는다. 시도 카드를 뒤집는 방식의 CSS는 많은 사람들이 구현했고 경험을 적었을 것 같은 생각이 들었다. 인터넷에 CSS 카드 뒤집기를 검색하고 그들이 어떤 코드를 사용했는지 분석했다. 해결 position: relative; position: absolute; 이 두 CSS로 이미지가 겹치는 것을 구현할 수 있었다. position: relative;은 상위 DIV에 절대적인 위치를 지정한다. 그리고 position: absolute;는 정해진 그 위치에 강제적으로 위치시킨다. /* transform-style: preserve-3d;는 카드가 3차원으로 움.. 23-05-31 T.I.L indexOf로 disply, block / none 활용하기 문제설명 movie_list.forEach((a) => { const movie_title = a.querySelector("#movie_title").textContent.toLowerCase(); if (movie_title.indexOf(search_word) !== -1) { a.setAttribute('display', 'block'); } else { a.setAttribute('display','none'); } }) } movie_list는 영화 제목의 리스트다. 이를 querySelector로 영역을 지정하고 textContent / toLowerCase 로 영화제목을 전부 소문자로 변환시켰다. 그리고 search_word는 검색input의 value다. indexOf는 요소가 변수명에 .. 23-05-30 T.I.L querySelectorAll(#id), 노드배열 리스트 화 문제설명 영화api를 통해서 얻은 영화 제목들을 리스트화 하고 싶었는데 undefined만이 console.log에 떳다. getElementById(" ")로 영화제목의 태그 아이디를 넣으면 영화 제목이 뜰거라고 생각했지만 아니었다. 시도 왜 undefined가 나왔는지 생각해봤다. 왜냐하면 const movie_list= document.getElementById("movie_title") 나는 정의를 했으니까, undefined, 정의되지 않았다. 뭔가 잘못되었다. 아직 getElementById(" ")에 대한 이해도가 부족했을까, 나는 이와 비슷한 기능인 querySelectorAll()을 통해서도 한번 해보았다. 결과는 console.log(movie_list) = undefined..뭐라도 .. 23-05-29 T.I.L 바닐라 자바스크립트 append() 2 문제 설명 document.querySelector("#card").append(temp_html) 이 append는 같은 태그를 포함해서 append했다. 내가 원한건 태그 안에 있는 내용만 append하는 것이다. 시도 .querySelector()와 append() 함수에 대한 개념을 바로 잡고, 탬플릿에 대한 함수를 찾아봤다. 해결 document.querySelector("#cards-box").insertAdjacentHTML("beforeend", temp_html) append()는 요소를 추가하는 함수다. 탬플릿만있을 때는 append를 사용해도 어색함 없이 내용을 추가할 수 있었지만 짜여진 html의 css에 탬플릿만 넣기 위해서는 다른 함수가 필요 했다. 그게 바로 insertAdja.. 23-05-28 T.I.L 바닐라 자바스크립트 append() 문제 설명 $('#cards').append(temp_html) 내가 주로 append 함수를 이용할 때의 코드이다. 이번 과제는 바닐라 스크립트, 즉 사이트에서 만든 코드를 사용하는 것이 아니라 내가 직접 코드를 짜서 요구하는 기능을 구현해야 하는 것이다. ajax를 사용하지 않고 ferch로 데이터를 받아오는 것 까지는 해결했지만 append에 어떤 코드를 사용해서 받아온 데이터를 붙힐 수 있을까? 시도 구글링을 통해서 append를 어떻게 사용하는지 찾아보았다. 대부분이 $로 append를 사용했다. 그래서 바닐라 스크립트 append를 새로 검색했다. 해결 document.querySelector("#card").append(temp_html) querySelector가 그 해답이었다. 붙히고자 .. 이전 1 2 3 4 다음