개인프로젝트 2일차

어제에 이어서 프로젝트를 진행해보았다.
TMDB의 오픈 api를 이용하여 인기영화 리스트 데이터를 받아왔다.


TMDB에서 받아온 데이터를 브라우저 화면에서 카드 형태의 데이터로 보여준다. TMDB에서 영화이미지를 가져오려면 image url이 필요했는데 이 때 image url 은 base url + file size + file path 로 구성되었다.

처음에 카드가 예쁘게 정렬되지 않아서 CSS Flex를 사용하여 정렬해주었다.

display: flex;
justify-content: space-around;
flex-wrap:wrap;

=>justify-content: space-around -> 아이템 앞, 뒤 주위로 일정 간격 여유공간
flex-wrap : wrap -> nowrap을 한다면 아이템을 구성하는 행이 커져도 줄바꿈을 하지 않고, wrap을 하면 다음 줄로 줄바꿈을 한다. 아래줄로 넘어감!

이미지를 클릭했을 때 alert 창에 영화의 id를 띄우기 위해 a태그의 href를 #으로 설정한 뒤 img태그 옆에를 입력해 주었다.

github에 파일을 업로드하려고 하니, api key를 그대로 노출하면 개인정보유출의 위험이 있어, api key를 안전하게 숨겨서 업로드했다.

1.apikey.js 파일 하나를 생성 (아무이름이나 가능)

const config = {
	apikey: "api키"
}

2.html에서 파일을 연결하기

<script src="apikey.js"></script>

3.script.js(메인js파일)에 변수에 config로 생성 (url에 ${API_KEY}로 key값 대체)

const API_KEY = config.apikey;

4.gitignore 파일 생성

$ touch .gitignore

5..gitignore 파일에 apikey.js 파일을 추가해 추적에서 제외시키기

$ echo "apikey.js" >> .gitignore
$ cat .gitignore
apikey.js

6.깃에 푸시!

기능 조금 구현하는데 시간이 많이 걸리지만 해냈다는 것에 의의를 두고 내일은 영화 검색 UI를 구현해 볼 예정이다. API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 하는 것이다(입력 후 검색버튼 클릭 시 실행되도록). 오늘 살짝 도전해보았는데 쉽지 않을 것 같지만 화이팅 해본다..!