이미지 검색 서비스를 만드는데 이미지를 어떻게 가져올지에 대한 고민을 하고 있습니다.

백엔드가 없어 데모 버전에 사용할 무료 API를 알아보았습니다.

규모가 크고 이미지 품질도 괜찮은 3가지 웹사이트의 API를 비교해보겠습니다.

- Unsplash

- Pixabay

- Pexels

Unsplash API✅

https://api.unsplash.com/
https://api.unsplash.com/search/photos/

• 이미지 제공
• 제한 : (데모)시간당 50개 요청 (프로덕션)시간 당 5000개 요청
  • 다른 API와 달리 핫링킹만 사용, 추적이 용이하기 때문이다.
  • 페이지네이션 : 기본 10개, 최대 30개

Pixabay API

https://pixabay.com/api

• 이미지/비디오 제공
• 제한 : 분당 100개 요청, 핫링킹(Hotlinking) 금지
• 쿼리 제한 : 100자 이하 “yellow+flower”

Pexels API

https://api.pexels.com/v1
https://api.pexels.com/videos // 비디오

• 라이브러리/이미지/비디오 제공
• 가이드라인
  • Photos provided by Pexels 또는 로고 표기
  • 사진 작가 이름 표기
  • 요청 제한 : 시간당 200개, 월 20,000개
• 페이지네이션 : 요청 1개 당 최대 80개

정리

저는 요청 제한은 적지만 고품질의 이미지를 제공하고, 프론트엔드에서 핫링킹을 사용할 수 있는 Unsplash를 최종 선택했습니다.

이번에 핫링킹(hotlinking)에 대해 알게 되었습니다. API 문서에서 hotlinking 내용을 반드시 확인하시고, 관련 내용이 없다면 핫링킹을 사용하지 않는 것이 안전하겠습니다.

백준, 프로그래머스에서 풀 수 있는 문제입니다.

🔎 힌트
- DP를 이용해보세요.
- BottomUp 방식을 이용해보세요.

풀이

▼

BottomUp 방식 풀이

TopDown 방식은 아래에서 위로 이동하면서 작은 문제를 해결하는 방식입니다.

배열의 첫 번째 값(array[0][0])이 답이 됩니다.

function solution(triangle) {
	const array = triangle.map(row => [...row]);
	
    for (let i = array.length - 2; i >= 0; i--) {
        for (let j = 0; j < array[i].length; j++) {
            const left = array[i+1][j];
            const right =  array[i+1][j+1]
            
            array[i][j] += Math.max(left, right);
        }
    }
    return array[0][0];
}

TopDown 방식 풀이

TopDown 방식은 위에서 아래로 이동하면서 작은 문제를 해결하는 방식입니다.

맨 위 작은 삼각형은 초기화해주었습니다. 마지막 배열의 최댓값이 답이 됩니다.

function solution(triangle) {
    const array = triangle.map(row => [...row]);
    
    array[1][0] = array[0][0]+array[1][0];
    array[1][1] = array[0][0]+array[1][1];

    for (let i = 2; i < array.length; i++) {
        for (let j = 0; j < array[i].length; j++) {
            if (j === 0) {
                array[i][j] += array[i-1][j];
                continue;
            }
            if (j === array[i].length - 1) {
                array[i][j] += array[i-1][j-1];
                continue;
            }
            const leftParent = array[i-1][j-1];
            const rightPerent =  array[i-1][j];
            array[i][j] += Math.max(leftParent, rightPerent);
        }
    }
    return Math.max(...array[array.length - 1])
}

TopDown 방식의 한계

프로그래머스 채점은 효율성 테스트6에서 시간 초과가 발생했습니다.

BottomUp 방식에 비해 조건문을 더 활용하는 문제가 있었습니다.

아래 방법으로 해결했습니다.

• 반복문 내부에서 조건문이나 계산을 최소화한다.
• inplace 수정 : 원본 배열(triangle)을 직접 수정하지 않고 복사해서 사용한다.
  *inplace는 원본 데이터를 새로운 메모리에 할당하지 않고 직접 조작하는 것을 말한다.

📍 이중 배열 복사하기

inplace를 해결하기 위해 깊은 복사를 사용했습니다.

const array = triangle.map((row) => [...row]);

이 문제는 BottomUp 방식을 사용하는 것이 성능에 더 유리했습니다.

반복문 내 조건 분기를 최소화하는 것이 중요했습니다.

🔗 문제 바로가기

백준 https://www.acmicpc.net/problem/1932

프로그래머스 https://school.programmers.co.kr/learn/courses/30/lessons/43105

🔗 레퍼런스

[프로그래머스] LV.3 정수 삼각형 (JS)