DB를 하기에 앞서..

DB를 하기에 앞서 먼저 필요한 프로그램들을 설치 및 준비를 해야합니다.

 

• 파이썬 : https://www.python.org/ftp/python/3.8.6/python-3.8.6-amd64.exe
• gitbash : https://git-scm.com/
• MongoDB :  https://account.mongodb.com/account/register

파이썬은 DB와 Html을 연결하기 위해 사용을 위해 필요하고 gitbash는 나중에 연결을 위해 필요하며

MongoDB는 데이터를 저장할 공간이 있어야 하기때문에 그걸 위해 회원가입을 한다고 생각하시면 됩니다.

 

( 설치 과정 부분은 유튜브 및 블로그를 참조해주시면 감사하겠습니다. )

 

이 부분이 완료가 끝나셨으면 3주차 내용을 배우기 전에 2주차 내용을 한번 더 복습하고 넘어가겠습니다.

 

2주차에서 미세먼지와 따릉이 OpenAPI를 가지고 웹페이지에서 버튼을 눌렀을때 그 값들을 가져오는 퀴즈를 풀었는데요.

 

혹시 기억이 안나시는 분이 있으시면 다음 게시물에서 한번 읽어 보시는걸 추천드립니다.

 

https://iceflower.tistory.com/11

JQuery + Ajax의 조합

 

예전에 1주차에서 영화 포스터를 넣기 위한 카드를 만들고 기록하는 창을 만들었던 적이 있었는데요. 거기에 실제 네이버 영화들을 가져와서 넣어보겠습니다.

 

1주차 영화관련 내용이 무엇인지 모르시거나, 코드가 없으신 분들은 다음 게시물을 한 번 보고 오시는걸 추천드립니다.

 

https://iceflower.tistory.com/6

부트 스트랩을 추가 이용해보자!

 

( 참고로 여기서 사용하는 OpenAPI는 스파르타코딩클럽에서 사용되는 주소이기 때문에 함부로 열어드릴수가 없어서 이런 방식이구나 라는 정도만 봐주시고 나중에 OpenAPI가 아닌 DB를 이용해서 넣는 방식이 존재하기때문에 그때 넣어보시면 됩니다. )

 

이제 기존 코드에서 Ajax만 추가하는 부분만 설명하겠습니다. 먼저 OpenAPI가 어떤 Dictionary 형식인지 확인해야하니 그거 부터 확인하겠습니다.

 

영화 OpenAPI 중 일부분

 

확인을 해보자면 movies 라는 값 안에 comment(코멘트), desc(설명), image(포스터), star(별점), title(영화제목) 이렇게 5가지가 들어가있는걸 보실수 있습니다. 현재 얻고자 하는 코드는 5개를 다 사용하기 때문에 다 가져오도록 하겠습니다.

 

영화 OpenAPI 를 사용한 코드

이해를 안가는 상황이 발생할 수 있기 때문에, 첨부한 주석을 보시면서 설명을 보시면 되겠습니다.

 

movies안에 있는 값들을 받아와서 하나하나씩 변수를 선언하여 값을 넣어주고, 카드 형태의 html을 가져와서 대입 시킨 후, 코드 내에 카드의 큰 틀에다 첨부를 했습니다. 결과는 다음과 같습니다.

 

영화 OpenAPI 이용한 코드 결과

2주차때 배운 방식을 그대로 사용하여 영화를 넣어보았습니다. 위에서도 말씀드렸지만 API는 스파르타코딩클럽에서 제공된 API이기 때문에 함부로 오픈할 수가 없어서 안보이도록 처리했습니다. 그렇지만 DB를 배우고 직접 영화 값들을 가져와서 넣기 때문에 크게 문제가 안될겁니다. 

 

그럼 다음 게시글에서 3주차 내용을 시작 하겠습니다.