[#3] JQuery / Fetch

[PROJ #1] 추억 앨범

• 추억 앨범에 JQuery 적용
• '추억 저장하기' 버튼에 토글 속성 부여 → 버튼 클릭시 postbox 열고 닫기

function openclose() {
	$('#postingbox').toggle();
}

• '기록하기' 버튼 클릭시 앨범 카드 추가

function makecard() {
	// .val() : 선택한 요소의 값을 가져옴
	let image = $('#image').val();
	...
	let date = $('#date').val();
		
        // 카드 한 장 html 코드를 변수에 담음
		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">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>`;
            
    // append로 카드 추가
	$('#card').append(temp_html);
}

---

클라이언트 - 서버

서버 → 클라이언트

• JSON : Key:Value 페어로 이루어짐, Dictionary와 유사
  클라이언트 → 서버
• GET 요청 : 데이터 조회(Read) 요청 시
• POST 요청 : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시

GET

GET 요청 데이터 전달 방법

• url 뒤에 붙어서 데이터 전달
• ? 앞부분 : 서버 주소
• ? 뒷부분 : 전달할 데이터
• & : 전달할 데이터가 더 있음

ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
q=아이폰 : 검색어
sourceid=chrome : 브라우저 정보
ie=UTF-8 : 인코딩 정보

※ POST 요청 : 'data:{}'로 데이터 전달

Fetch

인터넷을 통해 데이터를 요청하고 받아오는 과정

Fetch 활용

• 기본 골격

fetch("url")
// 이 URL로 웹 통신을 요청, 괄호 안에 다른 것이 없다면 GET

	.then(res => res.json()) 
	// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화

	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

• EX) 미세먼지 Open Api

fetch("http://spartacodingclub.shop/sparta_api/seoulair")
	.then(res => res.json()) 
	.then(data => { 
		console.log(data['RealtimeCityAir']['row'][0]);
	})