TIL 23-05-30

level·2023년 5월 30일

TIL

목록 보기
14/95

1. 카드 ID 알림창 구현
2. 검색 기능 구현
3. 대소문자 구분 없이 검색 기능 구현
4. 알고리즘 특강
5. 프로그래머스


1.

처음에는 id값을 읽어와서 alert 함수를 새로 만들려고 했는데 값이 읽어와지지가 않는 오류가 발생했고, 값을 읽어와도 alert 창에 id 값이 안뜨는 오류 때문에 애를 먹었다.

해결과정

const clickCardBox = cardBox.lastElementChild; // 카드 클릭 함수 실행할 변수 선언
clickCardBox.addEventListener('click', () => clickCard(id)); // 카드 클릭 이벤트 실행

카드 listing 함수 내부에서 fetch를 받아오기 때문에 listing 내부에 이벤트를 만들었다.


2.

searchMovie 함수를 선언해서 검색창 input값을 .value로 받아온 다음 map함수로 key 배열을 반환해주고 filter() 로 검색 인풋이 포함된 타이틀이 있는 배열만 반환한 후 필터링한 배열만 카드로 붙이는 방식으로 구현했다. 검색 이벤트는 카드 알림창과 마찬가지로 document.getElementById 와 addEventListener 를 사용했다.


3.

.toLowerCase() 를 사용해서 영화 제목과 인풋값을 모두 소문자로 받아 비교했다.

.filter((movie) => movie.title.toLowerCase().includes(searchBox.toLowerCase()));

4.

최댓값 찾기

Math.max() 함수를 활용하지 않고 짜야해서 복잡했지만 for문을 중첩해서 해결했다

function find_max_num(array) {
    // 이 부분을 채워보세요!
  let answer = 0;
  for(let i=0; i<array.length; i++) {
    for(let j=0; j<i; j++) {
      if (array[j]>array[i]) {
        answer = array[j];
     }
    }
  }
    return answer;
}

console.log("정답 = 6 / 현재 풀이 값 = ", find_max_num([3, 5, 6, 1, 2, 4]));
console.log("정답 = 6 / 현재 풀이 값 = ", find_max_num([6, 6, 6]));
console.log("정답 = 1888 / 현재 풀이 값 = ", find_max_num([6, 9, 2, 7, 1888]));

5.

.sort((a,b) => Math.abs(n-a) - Math.abs(n-b) || b-a);

n과의 차이가 적은 순으로 정렬 -> 차가 0일 경우 내림차순으로

0개의 댓글