2주차 복습 - 영화 API로 카드 만들어 붙이기

웹개발 종합반 3주차 - 2주차 복습 - 영화 API로 카드 만들어 붙이기

 

 

이번 주차에서는 무얼 하느냥?

내가 html, css, js로 만들어 놓은 것을 누군가가 요청했을 때 

이 것을 전해주는 역할을 하는 서버를 만들어야 한다.

 

python이라는 프로그래밍 언어로 서버를 만들것이다.

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

http://spartacodingclub.shop/web/api/movie

이 오픈 API는 아래에서 보여지는 것과 같이 영화들의 정보를 담고 있다.

여기 있는 데이터들을 가져와서 카드 형식으로 보여지도록 만들어 보게뜸!

 

 

 

 

 

전에 만들어 놓은 정적 페이지

 

      fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {

               console.log(data['movies'])

            })

API URL을 넣어서 데이터가 잘 출력 되는지 확인 👍

 

 

 

 

 

            fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {

               let rows = data['movies']

               rows.forEach((a) => {

                    console.log(a)

               });

            })

데이터를 let rows에 담고 let rows = data['movies']

rows를 한 번 돌아보자 rows.forEach

good 잘 나타남 👍

 

 

 

 

 

            fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {

               let rows = data['movies']

               rows.forEach((a) => {

                    let title = a['title']

                    let desc = a['desc']

                    let comment = a['comment']

                    let star = a['star']

                    let image = a['image']

                    console.log(title,desc,comment,star,image)

               });

            })

다음은 요소들을 변수로 만들어서 console로 어떻게 출력 되는지 봄

이제 이 아이들을 위에 미리 만들어놓은 정적페이지의 카드처럼 잘 붙여 넣 보겠다.

 

 

 

 

 

    <div class="mycards">

        <div id="cards" class="row row-cols-1 row-cols-md-4 g-4">

            <div class="col">

                <div class="card">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목</h5>

                        <p class="card-text">영화 코멘트</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 의견</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목</h5>

                        <p class="card-text">영화 코멘트</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 의견</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목</h5>

                        <p class="card-text">영화 코멘트</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 의견</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목</h5>

                        <p class="card-text">영화 코멘트</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 의견</p>

                    </div>

                </div>

            </div>

        </div>

어디에 붙여야 하느냐면 <div id="cards" class="row row-cols-1 row-cols-md-4 g-4">  여기 cards에 

 

어떻게 붙일것이냐 하면

                    let temp_html = `<div class="col">

                                        <div class="card">

                                           

                                                class="card-img-top" alt="...">

                                            <div class="card-body">

                                                <h5 class="card-title">영화 제목</h5>

                                                <p class="card-text">영화 코멘트</p>

                                                <p>⭐⭐⭐</p>

                                                <p class="mycomment">나의 의견</p>

                                            </div>

                                        </div>

                                    </div>`

               

                    $('#cards').append(temp_html)

이렇게~ 😊👍

                    let temp_html = `<div class="col">

                                        <div class="card">

                                            <img src="${image}"

                                                class="card-img-top" alt="...">

                                            <div class="card-body">

                                                <h5 class="card-title">${title}</h5>

                                                <p class="card-text">${desc}</p>

                                                <p>⭐⭐⭐</p>

                                                <p class="mycomment">${comment}</p>

                                            </div>

                                        </div>

                                    </div>`

다음 변수값을 넣어주면

내 카드 아래에 자동으로 영화 카드가 착착 붙는다. 👍

$('#cards').empty()

까지 넣어주면 깔끔깔끔

 

 

 

이번에는 별점도 적용 시켜봄!

let star_image = '⭐'.repeat(star)

텍스트 '⭐'을 star의 숫자에 맞게 반복해 주는것

그리고 이부분도 바꿔준다.

<p>⭐⭐⭐</p>➡️<p>${star_image}</p>

 

그럼 별점까지 각각 다르게 적용된걸 볼 수 있다.

 

 

 

 

완송~ 프린스송~ 예아