[웹개발 입문 강의] [JavaScript] Fetch 복습

스파르타 코딩클럽 웹개발 종합반 인강 - 공부 기록

 

수강 시작 ~ 

2023. 06. 06 ~ 

 

https://github.com/hotdog7778/sparta

---

자바스크립트 복습~

목표. 영화소개 페이지에 카드를 만들어서 붙여보자.

 - index.html 에서 진행

 - 영화 코멘트, 설명, 이미지, 별점, 제목 데이터가 있는 API를 준비.

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

 

fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
    let rows = (data['movies'])

    $('#cards').empty()

    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)

        // star는 숫자인데 repeat를 사용해서 그숫자 만큼 별이미지를 반복시키자.
        let star_image = '⭐'.repeat(star)

        let temp_html = `<div class="col">
                            <div class="card h-100">
                                <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>${star_image}</p>
                                    <p class="mycomment">${comment}</p>
                                </div>
                            </div>
                        </div>`

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

    });

})

API를 이용해서 내 페이지에 영화 제목,이미지 등의 정보를 불러왔다.