3-1_스파르타피디아에 OpenAPI 붙여보기 (feat. 영화 평점 카드, ajax append(), api 연결)

 

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• 만든것을 붙여놓기

Ⅱ. 해보기

---

1. 만들어진 DB 를 API 형태로 가져와서 확인

• api 주소

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

• 만들어진 api 확인

2. 로딩 후 바로 console 에 '로딩이 잘 되었다.' 는 메시지 보이게 하기 [ajax 뼈대만들기]

$(document).ready(function () {
	listing();
});

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
}

• 읽어보기

$(document).ready(function () { : 로딩 후 어떤 함수가 실행이 될거야. 그게 뭐야?
listing(); : 리스팅 함수가 실행 될거야~! 그러면, 리스팅 함수는 뭐지?
function listing() {console.log('화면 로딩 후 잘 실행되었습니다');} : 콘솔을 띄운다.

• 이렇게 하는 이유
  • 이렇게 필요한 기능의 뼈대를 만들어 놓고 -> 심화 또는 변형 시켜나가는 과정

3. 필요한 data 가 console 에 잘 찍히는지 확인

• 잘 찍히는 코드

function listing() {
	$.ajax({
		type: "GET",
		url: "http://spartacodingclub.shop/web/api/movie",
		data: {},
		success: function (response) {
			let rows = response['movies']
			
			console.log(rows)
		}
	})
}

• 결과물 - 잘 나오고 있음!

4. 잘 나오는 data 를 for 문으로 돌기

• 원하는 데이터 변수를 만들고 잘 들어오는지 console 로 확인
  • 이 과정들이 반복되고 있음 ⭐⭐⭐⭐⭐
  • 이게 정말 손에 익으려면, 내가 반복하면서, 안 보고 다음 과정을 떠올리면서, 동시에 생각을 해봐야 할 것 같음 ⭐⭐⭐⭐⭐

function listing() {
	$.ajax({
		type: "GET",
		url: "http://spartacodingclub.shop/web/api/movie",
		data: {},
		success: function (response) {
			let rows = response['movies']
			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']
				console.log(title, desc, image, star, comment)
			}                    
		}
	})
}

• 결과물
  • 잘 나오고 있음.

5. ajax append() 사용해서, 카드 추가로 붙이기

• 카드 영역 html 복사
  • 이 놈을 temp_html 변수에 놓고
  • ajax append 에 넣으면 된다.
  • 그리고, 기존 것들 지워주기 위해서 empty() 사용 하면 된다. ⭐⭐⭐
    • 이걸 해야, 업데이트 기능이 완성 될 수 있음.
  • 와 신기하다 진짜 ⭐⭐⭐⭐⭐⭐⭐⭐
  • 그리고 append 쓸 때, html 을 너무 어렵게 생각할 필요 없고, 그냥 body 부분에 있는 것들 이라고 생각해야 하려나.

<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>

• 우선 카드 추가 작동하는 코드

function listing() {
	// 기존에 있는 것들 지워야, 업데이트 하는 기능으로 만들 수 있음.  
	$('#cards-box').empty()

	$.ajax({
		type: "GET",
		url: "http://spartacodingclub.shop/web/api/movie",
		data: {},
		success: function (response) {
			let rows = response['movies']
			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']

				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-box').append(temp_html)

			}
		}
	})
}

• 결과물 - 잘 작동함
• 

6. 별점 : javascript 내장 함수 사용

• repeat 함수
  • 지정한 횟수만큼, 특정 부분을 반복

// 별 이미지를 반복하는데 star 변수에 담긴 횟수만큼 반복!
let star_image = '⭐'.repeat(star)

💭 What i learned

---

• ajax 를 붙여도 괜찮은 뼈대를 먼저 만들고, 그 다음 ajax 를 붙이는 것! ex) 로딩 되었을 때, console 창에 '로딩되었습니다.' 라고 보이게 하면 된다. -> 그 다음 ajax 를 붙인다.
  • 쉽게 생각하면, console.log 자리에 ajax 가 들어간다고 생각.

• 그리고 append 쓸 때, html 을 너무 어렵게 생각할 필요 없고, 그냥 body 부분에 있는 것들 이라고 생각해야 하려나.