스파르타클럽-웹종합반 : 2주차

🔸JQuery

• JQuery란? 미리 작성해놓은 javascript 라이브러리!!
• 왜? 복잡한 코드를 짧게, 브라우저간 호환성 UP!
• 라이브러리에서 가져오는 것이기 때문에 임포트를 하지 않으면 쓸 수 없다!!
• 부트스트랩에 JQuery가 임포트되어있음!

🔸JSON

• 서버 ➡️ 클라이언트
• JSON : “키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형표준 포맷이다. 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수 값을 표현하는 데 적합하다. (출저 : 위키백과)
• 즉, 리스트와 딕셔너리의 조합으로 구성되어있고, 사람과 컴퓨터 모두 이해하기 쉽고, 경량인 방식이라는 뜻

🔸API - GET요청 이해하기(강의자료정리)

• 클라이언트 ➡️ 서버
• API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
• GET : 통상적으로! 데이터 조회(Read)를 요청할 때 (ex: 영화 목록 조회)
• POST : 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 (ex: 회원가입, 회원탈퇴, 비밀번호 수정)

🔸Ajax 시작하기

🚨 Ajax는 JQuery를 임포트한 페이지에서만 동작이 가능하다!!

• 기본골격 = 이해보다는 복붙해서 쓰고 걍 익숙해지자!!

  $.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
      console.log(response)
    }
  })

🎇 Ajax 연습하기

• 서울시 미세먼지 openAPI

  • “업데이트” 버튼 클릭시 서울시 미세먼지 현황 나타내기

    function q1() {
                $('#names-q1').empty()
                $.ajax({
                    type: "GET",
                    url: "서울시 미세먼지 open API 주소",
                    data: {},
                    success: function (response) {
                        let rows = response['RealtimeCityAir']['row']
                        for (let i =0; i < rows.length; i++) {
                            let gu_name = rows[i]['MSRSTE_NM']
                            let gu_mise = rows[i]['IDEX_MVL']
                            let temp_html = ``<li>${gu_name} : ${gu_mise}</li>`
                            $('#names-q1').append(temp_html)
                        }
                    }
                })
            }

  • 미세먼지 수치가 70 이상은 곳은 빨간색으로 표시하기 (if문, style 추가)

    function q1() {
                $('#names-q1').empty()
                $.ajax({
                    type: "GET",
                    url: "서울시 미세먼지 open API 주소",
                    data: {},
                    success: function (response) {
                        let rows = response['RealtimeCityAir']['row']
                        for (let i =0; i < rows.length; i++) {
                            let gu_name = rows[i]['MSRSTE_NM']
                            let gu_mise = rows[i]['IDEX_MVL']
                            let temp_html = ``
                            if (gu_mise > 70) {
                                temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                            } else {
                                temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                            }
                            $('#names-q1').append(temp_html)
                        }
                    }
                })
            }

• 서울시 따릉이 openAPI
  • 버튼을 클릭하면 따릉이 현황(역이름, 총 자전거수, 현재 자전거 수) 나타내기
  • 현재 자전거 수가 5대 미만인 곳은 빨간색으로 나타내기
  • 미세먼지 코드 참고해서 변형하는 연습!!

강의 동영상 길이는 짧은 편이었지만 멈추고 따라하거나 퀴즈를 풀 때는 혼자 해보는데 시간이 엄~청 오래걸렸다. ㅜㅜ
오늘 하루 종일 노트북만 붙들고 있었다... 따라하다가 오류가 나면 어디서 오타가 났는지 계속 찾고 엔터키 잘못 눌러서 다시 하고 ㅠㅠ
고생한만큼 실력이 늘겠지 생각은 하지만 내가 좀 느린 것같다..
에혀.. 그만큼 시간을 많이 투자하는 수밖에 없을 것 같다.