[241023 TIL] 본캠프 16일차 ('영화 사이트 만들기' 프로젝트 보완)

 알고리즘 문제 풀이 

프로그래머스

 

1차 시도

• 코드 흐름
  1. 호명된 선수 목록을 순회하면서 현재 등수 추출
  2. 추월당한 선수 확인
  3. 호명된 선수와 추월당한 선수의 순위 변경
• 실행 결과
  • 일부 테스트 케이스에서 시간 초과 발생
• 예상 원인 
  • indexOf()의 경우, 배열 요소를 하나하나 순회하면서 조건에 맞는 요소를 추출하는 방식이기 때문에 최대 50,000의 길이를 가진 players 배열을 매번 순회하는 것은 바람직하지 않음

function solution(players, callings) {
    for (let overPlayer of callings) {
        let overIndex = players.indexOf(overPlayer);
        let frontPlayer = players[overIndex - 1];

        players[overIndex] = frontPlayer;
        players[overIndex - 1] = overPlayer;
    }

    return players;
}

 

 

2차 시도 (해결)

• 코드 흐름
  1. 참가한 선수 목록을 하나의 객체로 생성
  2. 객체에서 호명된 선수의 현재 등수 추출
  3. 추월당한 선수 확인
  4. 호명된 선수와 추월당한 선수의 순위 변경
• 해결 방법 
  
  • 배열을 순회하는 대신 객체의 요소에 접근하는 방식을 사용함으로써 시간 복잡도를 낮춰줌

function solution(players, callings) {
    let ranks = {};

    players.forEach((player, index) => {
        ranks[player] = index;
    });

    for (let overPlayer of callings) {
        let overIndex = ranks[overPlayer];
        let frontPlayer = players[overIndex - 1];

        players[overIndex] = frontPlayer;
        players[overIndex - 1] = overPlayer;

        ranks[overPlayer] -= 1;
        ranks[frontPlayer] += 1;
    }

    return players;
}

 

---

 

 [영화 사이트 만들기] 프로젝트 

버그. 무한 스크롤 기능으로 인해 검색 결과가 오염되는 문제

• 기존에 구현한 방식
  • CSS 조작을 통해 이미 받아온 데이터 중에서 검색 조건에 맞는 데이터만 보여줌
  • 무한 스크롤 기능이 추가되면서 검색 조건에 맞지 않는 데이터들이 노출됨
• 변경한 방식 
  • API를 호출해서 검색 조건에 맞는 데이터만 받아와서 보여줌

// 기존 방식 : CSS 조작
movie.style.display = keyword === '' || title.includes(keyword) ? 'flex' : 'none';

// 변경 방식 : API 호출
getMovieData(makeSearchUrl(1, keyword), 'search', true);

 

 

버그. 북마크한 영화 데이터가 아직 받아와지지 않은 경우 북마크가 안 보여지는 문제

• 기존에 구현한 방식
  • CSS 조작을 통해 이미 받아온 데이터 중에서 북마크한 데이터만 보여줌
  • 무한 스크롤 기능으로 인해 추가된 영화를 북마크한 경우, 페이지 새로고침 시 해당 데이터를 아직 받아오지 않은 상태이기 때문에 북마크 목록에 보이지 않음
• 변경한 방식 
  • API를 호출해서 북마크한 데이터만 받아와서 보여줌

// 기존 방식 : CSS 조작
movie.style.display = bookmarkList.includes(movie.id) ? 'flex' : 'none';

// 변경 방식 : API 호출
getMovieData(makeDetailUrl(bookmark), 'bookmark');

 

 

보완. 스로틀링 적용

• 분석
  • 검색 및 무한 스크롤 기능에서 단시간에 API를 너무 많이 호출해서 과부화 발생 가능성 존재 
• 보완 
  • 스로틀링은 일정 시간동안 특정 이벤트가 연속해서 여러번 발생해도 한번만 실행되도록 해주는 것
  • setTimeout을 이용해서 스로틀링 구현

clearTimeout(throttling);

throttling = setTimeout(async () => {
    // 검색어가 있는 경우
    if (keyword) {
    	await getMovieData(makeSearchUrl(1, keyword), 'search', true);
    }
    // 검색어가 없는 경우
    else {
    	await getMovieData(makeListUrl(1), 'list', true);
    }
}, 500);