사전캠프 | 웹개발 종합반 1-3주차 강의 기록

하영·2024년 7월 9일

etc.

목록 보기

5/26

본캠프 들어가기 전 사전캠프 기간 동안 들을 수 있는 강의가 있는데
그동안 나는 부트스트랩 같은 라이브러리를 사용해보지 않아서 편리함에 신기했다..ㅋㅋㅋ
이 외에도 jQuery도 오랜만에 써보고 fetch 사용법도 있어서 짧게 코드들을 기록해두려 한다.

웹개발 종합반 정리

1. forEach 활용 코드

function checkResult() {
        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]

        $('#q2').empty();

        people.forEach(obj => {
            let name = obj.name;
            let age = obj.age;
            let temp = `<p>${name}는 ${age}살입니다.</p>`;
            $('#q2').append(temp);
        });
    }

empty(): 선택한 요소의 내용들을 지우는 메소드
append() : 선택한 요소 뒤에 추가하는 메소드

2. fetch 와 API

	fetch("여기에 URL을 입력")
	// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!

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

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

위 기본 코드에서 res 의 이름은 변경 가능하다.
data는 JSON 형태로 바뀐 데이터를 data 라는 이름으로 부른다고 적은 것이다.

function hey() {
	let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
	fetch(url)
		.then(res => res.json())
		.then(data => {
			let rows = data['RealtimeCityAir']['row'];
				rows.forEach(row => {
				let gu_name = row['MSRSTE_NM'];
                let gu_dust = row['IDEX_NM'];

				console.log(gu_name, gu_dust);
				});
			})
}

fetch()를 사용하면 짧은 코드로 데이터를 가져올 수 있음!
url 변수에 가져오고자 하는 api 주소를 담고 그 안에 있는 데이터를 활용해서 실시간으로 정보를 가져온다.

JSON 이해하기
위 이미지에서 볼 수 있듯이 JSON은 키,값(key:value)으로 이루어져 있다.
이를 통해 우리는 데이터를 가져와서 사용할 수 있다.
가져오는 방식은 let gu_name = row['MSRSTE_NM']; 또는 let gu_name = row.MSRSTE_NM; 둘 다 가능하다.

그동안 후자방법으로만 사용해봤는데 강의를 들을 때는 안 써본 방식도 사용해보고 익히고 싶어서 첫번째 방식을 사용했다. 하지만 역시 점 하나로 불러오는게 편하다..ㅋㅋㅋ

API 이해하기
API 에는 두 가지 방식이 있는데 GET방식과 POST 방식이다.