231018) 영화검색웹페이지 #1

개인프로젝트로 영화검색 웹페이지 만드는 걸 하게됐다. API 끌어와서 하는 건데 처음에는 오랜만에 HTML 건드는거 하니까 그래도 한두번 해봤다고 쉬워서 재밌었다. 그러다 튜터님 오셔서 '혹시 어떻게 할지 감도 안잡히는 분 계신가요?'라고 하셨는데 지금 생각해보니 그거 나다. JS 작성하는게 사실 감이 안옴. 그래서 일단 생각과 계획을 정리해봤다.

 

페이지 구상도

< 타이틀 >

[ 검색창 ]+[버튼]

[카드] [카드] [카드] [카드]

[카드] [카드] [카드] [카드]

...

 

 

---------

JS

검색창 class=변수??
버튼=onclick??

css는 제일 나중에,일단 html 뼈대 대충 잡고 js만 잡고 있어야함
(사실 잡혀있는거임...)

 

{
  "page": 1,
  "results": [
    {
      "adult": false,
      "backdrop_path": "/tmU7GeKVybMWFButWEGl2M4GeiP.jpg",
      "genre_ids": [
        18,
        80
      ],
      "id": 238,
      "original_language": "en",
      "original_title": "The Godfather",
      "overview": "Spanning the years 1945 to 1955, a chronicle of the fictional Italian-American Corleone crime family. When organized crime family patriarch, Vito Corleone barely survives an attempt on his life, his youngest son, Michael steps in to take care of the would-be killers, launching a campaign of bloody revenge.",
      "popularity": 100.146,
      "poster_path": "/3bhkrj58Vtu7enYsRolD1fZdja1.jpg",
      "release_date": "1972-03-14",
      "title": "The Godfather",
      "video": false,
      "vote_average": 8.7,
      "vote_count": 18774
    },

......

request를 했을때 response가 이렇게 나왔다.아마 여기서 document.Element.Id이거 써서 title,overview 등 4개를 묶어야할듯.

 

 

• TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여줍니다.
• 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어갑니다.

고민고민하다 깃허브로 프로젝트랑 파일 업로드하고 하루마무리하려한다. 내일은 그래도 얼추 가닥이 보였으면 좋겠다.