TMDB API 사용하기 3

(새벽)

 

진짜 눈물 찔끔 났다. . .

 

드디어 성공했다. (물론 블로그 글 & 챗지피티의 도움이 없었다면...)

 

나를 괴롭히던 검색 기능...

 

당최 어떻게 실행해야 하는지 모르겠어서 일단 블로그 코드를 그대로 붙여넣고 조금씩 수정을 해가면서 고쳤는데

 

일단 버튼 실행 함수까지는 그럭저럭 구현을 했는데 그 이후부터가 문제였다.

 

-- 까지 쓰고 일단 잠들었다.

 

전 노트북 용량 문제로 사용하기 힘들었던 깃도 이제서야 써봤다.

 

일단 코드는 이렇다.

 

참고한 블로그가 너무 많다(...) 당연히 보진 못하시겠지만 저의 빛, 희망, 구원의 손길 그 자체였습니다...

 

물론 그대로 복붙하진 않았고, 최대한 바꿔보고 코드를 줄여보려 애썼다!

 

 

먼저 함수를 하나 만든다.

 function showResult() {
      let inputValue = document.querySelector('#input-text').value.toLowerCase(); //소문자로 변환
      let cards = document.querySelectorAll('.movie-card'); // 모든 영화 카드 선택

그리고 입력했던 값, 모든 영화 카드를 가져온다. 영화카드는 all을 써야 일치하는 모든 카드들을 가져올 수 있다.

 

 

그리고 함수 안에서 cards를 가져와 forEach를 써주는데, a는 현재 순환중인 배열의 요소다.

이 a에서 제목을 뽑아낸 뒤에 소문자로 변환해 movieName에 저장해 주는 거다

cards.forEach((a) => {let movieName = a.querySelector('.movie-title').textContent.toLowerCase(); 
        if (movieName.includes(inputValue)) { //includes (movieName에 inputValue가 포함되어 있는지 확인, 맞으면 true)
          a.style.display = 'block'; // true일 경우 보이기
        } else {
          a.style.display = 'none'; // false일 경우 숨기기
        }
      });
    }

그 다음 if 문과 함께 movieName을 가져와서 inclueds를 써주는데,

includes는 특정 문자열이 포함됐는지 알려주는 메서드다.

 

그래서, movienName에 입력값인 inputValue가 포함되어 있다면 a.style로 접근해 display를 바꿔주면 된다!

 

 

그러나 나를 괴롭힌 건 여기서 끝이 아니었는데...

 

바로 api 키 숨기기...

 

일단 key가 떡하니 나와있으니 숨기고 싶은데 방법도 워낙 많고 복잡하고 모르겠는 거다.

 

명확한 설명을 찾기 힘들었다.

 

물론 내가 찾은 방법도 보안상 완벽한 방법은 아닌 것 같지만(...)

 

 

1. 먼저 js 파일을 하나 만든다. 이 파일에는 api 키를 저장해준다.

const config = {
  apikey: 'api 키 입력',
};

요로콤

 

 

2. 원래 js 파일에 가서 코드를 입력한다.

const movieAPI = config.apikey;
const url = `https://api.themoviedb.org/3/movie/top_rated?api_key=${movieAPI}&language=en-US&page=3`;

fetch(url)

위의 api 키를 가져와 상수에 저장하고, 내 api 키는 저렇게 넣으면 된다.

 

3. gitignore 파일을 만든다.

처음에 이거 보고 그게 모죠... 했는데 진짜 말 그대로 새 파일에 .gitignore 입력하면 된다.

자동으로 아이콘이 생긴다.

 

 

4. 1번에서 만들었던 js 파일을 gitignore에 입력해준다.

apikey.js

그냥 이렇게 넣으면 된다. 그럼 끝...

색깔 바뀌는 것도 없고 그냥 심심해보여서 저 방법이 맞나?... 고민했었는데

깃허브로 올려진 걸 확인해보니 잘 숨겨진다!

 

 

사실 api 키 숨기는 건 정말,,, 많은 정보가 있었는데

아직 배우지 않은 리액트, 노드... 네?... 그저 혼란만... 그리고 잘 안 됐고 설명이 좀 부족했다.

나는 아직 말하는 감자인데...

 

저것도 정답이라고 말하긴 어려울 것 같다.

 

 

 

---

참고

https://oliviakim.tistory.com/57#Weather-1

[노마드코더 / 바닐라JS]　momentum 클론 코딩(4)_To do and Weather

https://zerotonine2da.tistory.com/40

#1 영화 TOP 20 검색 사이트 구현 (+오픈 api 사용)

https://velog.io/@gnoon/cineDocs-Project-4

[인기 영화 검색 사이트] 제작 프로젝트 #4 - 영화 ID 출력 및 검색 결과 출력