[241018 TIL] 본캠프 13일차 ('영화 사이트 만들기' 프로젝트 4일차)

 알고리즘 문제 풀이 

프로그래머스

 

1차 시도

• 배열을 이용해서 변수 선언 (0번째 index가 x 좌표, 1번째 index가 y좌표)
• x, y 좌표를 각각의 변수가 아닌 하나의 배열로 선언하고 index로 접근하다보니 코드 상에서 봤을 때 어떤 값을 의미하는지 명확하지 않음

function solution(numbers, hand) {
    let answer = '';

    const keypad = [
        [1, 3],
        [0, 0],
        [1, 0],
        [2, 0],
        [0, 1],
        [1, 1],
        [2, 1],
        [0, 2],
        [1, 2],
        [2, 2]
    ];

    let left = [0, 3];
    let right = [2, 3];

    for (let i = 0; i < numbers.length; i++) {
        // 1, 4, 7번을 입력하는 경우
        if ([1, 4, 7].includes(numbers[i])) {
            left[0] = keypad[numbers[i]][0];
            left[1] = keypad[numbers[i]][1];
            answer += 'L';
        }
        // 3, 6, 9,번을 입력하는 경우
        else if ([3, 6, 9].includes(numbers[i])) {
            right[0] = keypad[numbers[i]][0];
            right[1] = keypad[numbers[i]][1];
            answer += 'R';
        }
        // 2, 5, 8, 0번을 입력하는 경우
        else {
            const left_path = Math.abs(keypad[numbers[i]][0] - left[0]) + Math.abs(keypad[numbers[i]][1] - left[1]);
            const right_path = Math.abs(keypad[numbers[i]][0] - right[0]) + Math.abs(keypad[numbers[i]][1] - right[1]);

            // 왼손가락의 이동거리가 짧거나, 이동거리가 동일하고 왼손잡이인 경우
            if (left_path < right_path || (left_path === right_path && hand === 'left')) {
                left[0] = keypad[numbers[i]][0];
                left[1] = keypad[numbers[i]][1];
                answer += 'L';
            }
            // 오른손가락의 이동거리가 짧거나, 이동거리가 동일하고 오른손잡이인 경우
            else if (left_path > right_path || (left_path === right_path && hand === 'right')) {
                right[0] = keypad[numbers[i]][0];
                right[1] = keypad[numbers[i]][1];
                answer += 'R';
            }
        }
    }

    return answer;
}

 

 

2차 시도 (보완)

• 객체를 이용해서 변수 선언
• key-value 쌍의 값을 가지는 객체를 이용함으로써 코드 상에서 봤을 때 어떤 값을 의미하는 보다 명확해짐
  •  

function solution(numbers, hand) {
    // 객체 사용

    let answer = '';

    const keypad = {
        0: { x: 1, y: 3 },
        1: { x: 0, y: 0 },
        2: { x: 1, y: 0 },
        3: { x: 2, y: 0 },
        4: { x: 0, y: 1 },
        5: { x: 1, y: 1 },
        6: { x: 2, y: 1 },
        7: { x: 0, y: 2 },
        8: { x: 1, y: 2 },
        9: { x: 2, y: 2 }
    };

    let left = { x: 0, y: 3 };
    let right = { x: 2, y: 3 };

    for (number of numbers) {
        // 1, 4, 7번을 입력하는 경우
        if ([1, 4, 7].includes(number)) {
            left.x = keypad[number].x;
            left.y = keypad[number].y;
            answer += 'L';
        }
        // 3, 6, 9번을 입력하는 경우
        else if ([3, 6, 9].includes(number)) {
            right.x = keypad[number].x;
            right.y = keypad[number].y;
            answer += 'R';
        }
        // 2, 5, 8, 0을 입력하는 경우
        else {
            const left_path = Math.abs(keypad[number].x - left.x) + Math.abs(keypad[number].y - left.y);
            const right_path = Math.abs(keypad[number].x - right.x) + Math.abs(keypad[number].y - right.y);

            // 왼손가락의 이동거리가 짧거나, 이동거리가 동일하고 왼손잡이인 경우
            if (left_path < right_path || (left_path === right_path && hand === 'left')) {
                left.x = keypad[number].x;
                left.y = keypad[number].y;
                answer += 'L';
            }
            // 오른손가락의 이동거리가 짧거나, 이동거리가 동일하고 오른손잡이인 경우
            else if (left_path > right_path || (left_path === right_path && hand === 'right')) {
                right.x = keypad[number].x;
                right.y = keypad[number].y;
                answer += 'R';
            }
        }
    }

    return answer;
}

 

---

 

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

보완. 화면 최하단으로 내려갈 때마다 영화 데이터 추가로 받아오기

• 분석
  • API를 호출하면 20개의 영화 데이터를 받아옴
  • fetch url에 page라는 값이 포함되어 있음
  • 방대한 데이터를 20개씩 배분해두고, API를 호출하면 전체 데이터 중에서 page 값에 맞는 데이터 20개만 보내줌 
• 보완 
  • 페이지 최하단으로 내려갈 때마다 page 값을 1씩 증가시킨 후 API 재호출
  • 추가로 받아온 20개의 데이터를 기존 목록에 붙여줌으로써 보다 많은 컨텐츠 제공

window.addEventListener('wheel', async function () {
    const browserBottom = window.innerHeight; // 브라우저 창의 height 값
    const footerBottom = $footer.getBoundingClientRect().bottom; // footer 영역의 bottom 값
	
    // 두 값의 차이가 10 이하이면 페이지 최하단에 도달했다고 간주
    if (Math.abs(browserBottom - footerBottom) < 10) {
        await getMovieList(makeUrl(++page, keyword), 'add');
    }
});

 

 

시행착오. 검색 기능을 구현하는 방법

• 방법 1. TMDB API 자체에서 제공하는 검색 기능 사용
  • title 뿐만 아니라 original_title도 검색 기준에 포함됨
  • 화면에 보여지는 제목에는 키워드가 포함되어 있지 않음에도 불구하고 검색 결과에 포함되는 문제 발생
• 방법 2. 이미 받아온 데이터를 바탕으로 검색
  • TMDB 데이터베이스에 존재하는 전체 데이터가 아닌 API를 통해 받아온 일부 데이터에 대해서 검색 수행
  • 조건에 맞는 데이터가 존재함에도 불구하고 검색 결과에 포함되지 않는 문제 발생
• 최종 선택
  • 사용자의 입장에서 생각했을 때, 전체 데이터에서 검색이 수행되는 것보다 일부 데이터라 할지라도 정확한 검색 결과를 보는 것이 더 중요할 것이라고 판단되어 방법 2로 구현

function filterMovieList() {
    $movieList.forEach((movie) => {
        const titleDiv = movie.children[0];
        const title = titleDiv.innerText.toLowerCase().replaceAll(' ', '');

        // 키워드가 입력되지 않았거나, 영화 제목에 키워드가 포함된 영화만 보여주기
        movie.style.display = keyword === '' || title.includes(keyword) ? 'flex' : 'none';
    });
}