웹개발 종합반 - 3주차(1)

배운점

• 파이썬 시작해서 크롤링 하는 것도 배웠다.
• pymongo로 mongoDB(데이터베이스)에 데이터 올리고 가져오는 것을 배웠다.

복습타임
< 스파르타피디아(지난 실습)에 open API 넣기>
1) 로딩 후 바로 실행 할 수 있도록 코드 넣기_

```
<script>
$(document).ready(function(){ 
	listing();//로딩 후에 리스팅함수가 바로 실행된다.
    });
    
function listing() { //리스팅함수는 여기에 정의되어있다.
    console.log('화면 로딩 후 잘 실행되었습니다'); // 실제로 얼럿 하기 전에 콘솔에 해보는 것이 일반적인 것 같다.
    }	
    ...

2) Ajax콜을 넣어야 함
처음에는 success시작하는 코드 밑에 console.log(row)로 돌려서 잘 들어가는지 콘솔 창에서 확인 해야 함.

 $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/web/api/movie",//여기가 api 주소 넣는 장소
            data: {},
            success:  function(response){
            console.log(row)
            }
      })
}

3) for문을 돌려서 내용들을 빼오고, temp_html에 붙일 준비.
temp_html은 어디에 붙일 건지 확인하고 붙이기.

	for (let i = 0; i < rows.length; i++) {
           let title = rows[i]['title']
           let desc = rows[i]['desc']
           let image = rows[i]['image']
           let star = rows[i]['star']
           let comment = rows[i]['comment'] //for문 돌려서 내용 추출하고 정의내려줌
           
           let star_image ='⭐'.repeat(star) // 별점은 이걸로
           let temp_html = `<div class="col"> // temp_html을 정의해주자.
 							<div class="card h-100"> //원래 body에 있던 녀석을 복-붙.
                           <img src="${image}" //위에 정의해 준 image를 여기에 붙인다.
           					class="card-img-top" alt="...">
        					<div class="card-body">
							<h5 class="card-title">${title}</h5> // 위에 정의해 준 title를 여기에 붙인다. 
							<p class="card-text">${desc}</p> // desc 여기에
                           <p>${star_image}</p> //별점은 여기에
                           <p class="mycomment">${comment}</p> // 코멘트는 여기에
                           </div> 
                      </div>                                         
                </div>
    			`
                $('#cards-box').append(temp_html) //카드를 보이게 하는 것
                                 }
                         }
                     })
                 }
	} 

4) 붙이기 전에 원래 붙어있던 녀석들을 감추기 위해서
ajax콜 위에 코드를 붙여준다.

$('#cards-box').empty()

느낀점
4주차에도 비슷한 것을 계속 하긴 하는데, 아직도 내 것이 되기에는 시간이 좀 필요하다는 것을 느꼈다. 계속 보고 또 보고를 실천해야한다. 파이썬&몽고DB는 이 복습 부분과는 성격이 많이 달라서 나눠서 포스팅을 해야겠다.