웹개발 복습 (jQuery) (Ajax) (Api)

복습게시글을 쓰게된 이유

항해99에서 직접 미니프로젝트를 진행하게 되니 여러부분에서 문제가 생겼는데 그중 가장 큰 문제는

코드를 작성하면서 Ajax부분과 Api부분에서 많이 헷갈리고 그때마다 이곳 저곳 찾아다니면서 많은 시간을 소요했다.

 

프로젝트를 끝내고 남는 시간에 공부 목적으로 이 게시글을 만들며 나중에 헷갈리게되면 이 게시글을 찾아와 공부하면 좋을것같단 생각에 복습 게시글을 작성하게 되었다.

 

JQuery

jQuery는 Javascript와 다른 특별한 언어가 아니라 미리 작성된 Javascript 코드.

전문 개발자들이 미리 짜둔 코드를 잘 가져와서 사용하는 것 (임포트 해서 사용함)

document.getElementById("element").style.display = "none";

$('#element').hide();

위의 긴 코드를 아래의 짧은 코드로 사용할 수 있다.

 

$()함수

$()함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해준다.

$()함수는 인수로 HTML 태그 이름뿐만 아니라, CSS선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.

이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 한다.

제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.

 

jQuery를 쓰는 방법

css와 마찬가지로 제이쿼리를 쓸 때에도 "가리켜야" 조작할 수 있다.

 

예) 특정 인풋박스의 값을 → 가져와줘

예) 특정 div를 → 안보이게 해줘

 

css에서는 선택자로 class를 사용했다면 jQuery에서는 id값을 통해 특정 버튼/인풋박스/div/...등을 가리킨다.

<div class="posting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

위 함수에서 id가 post-url인 곳을 가리키고 그곳의 값을 가져온다

<div class="posting-box" id="post-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

위는 특정 id를 가진 div를 hide로 안보이게 하거나 show로 보이게 한다.

$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

위는 css의 값을 가져와보는 함수다.

 

Ajax시작하기

서버 -> 클라이언트 : "JSON"을 이해해보기

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

위 사이트는 서울시 openAPI 미세먼지 주소다

 

JSON은 Key:Value로 이루어져 있다. 자료형 Dictionary와 아주 유사한 구조다.

위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가 있다.

클라이언트→서버: GET 요청 이해하기

👉 **API는 은행 창구와 같은 것!**

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

* GET        →      통상적으로! 데이터 조회(Read)를 요청할 때
                           예) 영화 목록 조회

* POST     →      통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
                           예) 회원가입, 회원탈퇴, 비밀번호 수정

직접 코드를 짜면서 이해한 부분은

GET : 클라이언트에서 서버로 요청 (서버에서 반응하여 클라이언트에서 동작)

POST : 서버에서 클라이언트로 요청 (클라이언트에 반응을 주면 서버에서 동작)

 

GET은 통상적으로 무엇인가 db에서 자료를 가져올 때 사용한다. (유저의 아이디, 비밀번호, 영화의 이름 이미지 등등...)

POST는 통상적으로 db에 자료를 입력할 때 사용한다. (회원가입시 기입한 아아디와 비밀번호를 db에 insert함,

삭제버튼을 누르면 db에서 삭제됨, )

 

GET 방식으로 데이터를 전달하는 방법

?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
         q=아이폰                        (검색어)
         sourceid=chrome        (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)

 

Ajax 시작하기

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

$ajax 코드 설명

• type: "GET" → GET 방식으로 요청한다.
• url: 요청할 url
• data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value&param2=value2 

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

서울시 미세먼지 OpenAPI를 가지고 ajax를 활용한 코드. url에서 값을 가져와

mise_list에 RealtimeCityAir의 밸류증 row의 값들만 가져옴

mise에는 mise_list의 i번째가

gu_name에는 mise(mise_list의 i번째)의 MSRTE_NM이라는 변수의 값이 들어간다

gu_mise에는 IDEX_MVL라는 변수의 값이 들어간다

 

서버와 클라이언트 ajax로 통신하기

GET, POST 요청에서 클라이언트의 데이터를 받는 방법

 

GET요청 확인 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

GET 요청 확인 Ajax 코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

POST요청 API코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST요청 Ajax코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })