[🧭️Jungle] jQuery, Ajax, mongoDB - TIL

jQuery

요약:

jQuery는 콘솔창에서 특정 id를 갖는 요소에 명령을 던지는 것이다. Input Box의 값을 가져오거나 수정할 수 있고, <div>을 보이거나 숨기거나 할 수 있다. 더불어 CSS의 속성값도 가져올 수 있다.

저작권 문제가 있을 수 있기에 Blur 처리하여 업로드 함

역시 문제를 풀면서 실제로 내가 아는지 모르는지 확인하는 게 가장 정확하다. 문제를 풀면서 jQuery, JS에 대해서 더 와닿게 되었다.

CSS 문법 형식과 JQ, JS는 쓰임이 다르기에 문법이 다르고(당연하지만, 유사한 기능(display 등)을 하는 부분이 있어서 헷갈렸다) CSS로 설정을 해줘야 할지, JQ, JS로 조작을 해야 할지 먼저 생각해 보고 코딩하는 것이 좋겠다.

 

예시

- 한 Div 태그를 처음 페이지 loading 시 특정 상태로 유지할 수 있도록 할 때

#post-box {
	display: block;
 }

- Div 태그의 'display' 상태를 알고 싶을 때

let status = $('#post-box').css('display') // block or none 으로 반환

위 처럼 유사 기능이더라도 조작해줘야 하는 부분(CSS, JQ, JS)이 다르기에 유념할 필요가 있다. 

 

Ajax

- 사용 위치: HTML <script> ... </script>

- 기본 골격 구조:

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

위 구조에서 'response'는 dictionary 형태로 반환받게 된다. 통상 dic, list 혼합 구조일 것으로 생각됨.

이를 적절히 조작하여 원하는 정보를 가져올 수 있다.

 

예시

function q1() {
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function(response){
                  $('#names-q1').empty()
                  dic = response["RealtimeCityAir"]["row"]
                  for (i = 0; i < dic.length ; i++) {
                    gu_name = dic[i]["MSRSTE_NM"]
                    dust = dic[i]["IDEX_MVL"]
                    if (dust >= 120) {
                        dust_check = "dust_over";
                    }
                    else {
                        dust_check = "dust_lower";
                    }
                     
                    temp_html = `<li >${gu_name}: <span class = ${dust_check}>${dust}</span></li>`
                    $('#names-q1').append(temp_html)
                  }
                }
              })
        }

 for 문을 통해서 <ul>....</ul> 태그에 모든 정보를 입력해 주는 조작

위 조작을 통해서 response에 있는 필요한 정보만을 가져오게 된다.

 

temp_html의 조작 예시

temp_html 조작을 통해 브라우저에서 띄어주는 style 조작을 바꿔줄 수도 있다. 특정 조건(미세먼지 수치 120 이상)에 따라 class를 다르게 받고, <style>...</style>에서 각 class에 따른 style을 지정하는 방식이다.

//case1
function q1() {
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function(response){
                  $('#names-q1').empty()
                  dic = response["RealtimeCityAir"]["row"]
                  for (i = 0; i < dic.length ; i++) {
                    gu_name = dic[i]["MSRSTE_NM"]
                    dust = dic[i]["IDEX_MVL"]
                    if (dust >= 120) {
                        dust_check = "dust_over";
                    }
                    else {
                        dust_check = "dust_lower";
                    }
                     
                    temp_html = `<li class = ${dust_check} >${gu_name}: <span >${dust}</span></li>`
                    $('#names-q1').append(temp_html)
                  }
                }
              })
        }

//case2
function q1() {
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function(response){
                  $('#names-q1').empty()
                  dic = response["RealtimeCityAir"]["row"]
                  for (i = 0; i < dic.length ; i++) {
                    gu_name = dic[i]["MSRSTE_NM"]
                    dust = dic[i]["IDEX_MVL"]
                    if (dust >= 120) {
                        dust_check = "dust_over";
                    }
                    else {
                        dust_check = "dust_lower";
                    }
                     
                    temp_html = `<li >${gu_name}: <span class = ${dust_check}>${dust}</span></li>`
                    $('#names-q1').append(temp_html)
                  }
                }
              })
        }

 

(왼) Case1, (오) Case2 html 결과

 

Ajax, jQuery 차이에 대해서
Ajax는 비동기 방식으로 HTML 재로딩 없이 서버에서 API를 통해 데이터를 JSON형식으로 가져오는 것.
jQuery는 HTML 조작을 용이하게 해주는 것.

 

MongoDB

MongoDB는 NoSQL 타입의 데이터베이스 프로그램이며, JSON과 유사한 형태로 DB에 정리한다. DB Tree 구조는 db > 컬렉션 > 도큐먼트 이다.

도큐먼트에는 JSON과 유사한 형식으로 Key, Value가 나뉘어서 구성된다.

doc = {
    'name':'영수',
    'age':24
}

 

컬렉션은 이와 같은 도큐먼트가 한 개 이상 합쳐져서 구성된다.

# 'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.
db.users.insert_one({'name':'영희','age':30})
db.users.insert_one({'name':'철수','age':20})
db.users.insert_one({'name':'john','age':30})

 

데이터를 볼 때는 아래와 같이 볼 수 있다.

all_users = list(db.users.find({},{'_id':False}))

print(all_users[0])         # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for a in all_users:      # 반복문을 돌며 모든 결과값을 보기
    print(a)