[ 사전스터디 ] 웹개발 종합반 2주차

JavaScript

정의. 브라우저가 알아들을 수 있는 프로그래밍 언어

 

타입.
// 리스트 타입
list = [value1, value2, value3, ...]

// 딕셔너리 타입
list = {key1:value1, key2:value2, key3:value3}

// 혼합
list = {key1:[value1, value2], key2:[value3,value4]}


반복문.
list.forEach((data)=>{
	// logic
}


조건문.
if(condition) {
	// logic
} else {
	// logic
}

JQuery

정의. HTML의 요소들을 편리하게 조작을 할 수 있도록 해주는 JavaScript 라이브러리

 

JQuery 기능.
// 조작 대상 지정
$('#id이름')

// 문자 대체하기
$('#id이름').text('문자')

// 문자 추가하기
$('#id이름').append('문자')

// 조작 대상 내부 내용 지우기
$('#id이름').empty();

Fetch

정의. JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드

 

GET 요청.
fetch("URL", { method: 'GET' });

POST 요청.
fetch("URL", {
  method: "POST",
  body: JSON.stringify({
    key1: value1,
    key2: value2,
    ...
  }),
})

JSON

정의. Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷으로
     서버와 클라이언트간 데이터를 주고받을 때 사용

 

Json 예시.
// 서울 실시간 기상 API 응답
{
    RealtimeCityAir: {
        row: [{
            ARPLT_MAIN: "O3",
            CO: 0.4,
            IDEX_MVL: 31,
            IDEX_NM: "좋음",
            MSRDT: "201912052100",
            MSRRGN_NM: "도심권",
            MSRSTE_NM: "중구",
            NO2: 0.015,
            O3: 0.018,
            PM10: 22,
            PM25: 14,
            SO2: 0.002
            },
            {
            ARPLT_MAIN: "PM25",
            CO: 0.4,
            IDEX_MVL: 39,
            IDEX_NM: "좋음",
            MSRDT: "201912052100",
            MSRRGN_NM: "도심권",
            MSRSTE_NM: "종로구",
            NO2: 0.016,
            O3: 0.013,
            PM10: 24,
            PM25: 18,
            SO2: 0.003
            }
        ]
    }
}

 

- Chrome Extension (Json Viewer)

JSONVue

좋았던 점

실제 API를 가지고 데이터를 불러와 사용해 보는 것이 도움이 되었다. Chrom에서 사용하는 Json 확장 플러그인을 소개해줘서 편하게 데이터들을 확인할 수 있었다. 마지막으로 API를 가져와 페이지에 데이터를 실시간으로 적용해 보는 숙제가 있어서 전체 강의를 복습하는 시간을 가질 수 있었다.