[개발일지] JQuery와 Ajax를 활용한 Javascript 코딩 공부 - 스파르타코딩클럽 2주차

“

안녕하세요!

어제보다 더 나은 오늘을 꿈꾸는

바오밥입니다 :)

 

”

오늘은 javascript를 좀 더 편하고

깊이 있게 활용할 수 있도록 도와주는 라이브러리

JQuery와 Ajax를 간단히 정리해봤습니다🙏

 

---

• JQuery : 미리 작성된 javascript 코드를 의미
  • head 태그에 임포트하면 훨씬 짧고 효율 좋게 코드를 짤 수 있게 된다
  • Jquery 설명 페이지 : https://www.w3schools.com/jquery/jquery_get_started.asp
  • import 스크립트문 :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  • id를 통해 HTML 태그를 선택하는 방법 : $(’#tagIdName’)
    • ‘#’이 id 구분자임
  • class를 통해 HTML 태그를 선택하는 방법 : $(’.tagClassName’)
    • ‘.이 class 구분자임’

 

JASON으로 이루어져 있는 OpenAPI 제공 데이터

• 서버 → 클라이언트
  • JSON 형태로 전달
    • 리스트 안에 여러 개의 딕셔너리가 들어간 형태
    • Jsonview - 웹에서 JSON 형태의 데이터를 더 쉽게 볼 수 있도록 도와주는 확장프로그램
      • https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko
• Ajax를 통해서 OpenAPI 데이터를 가져와서 활용하기 
  
  • Ajax는 JQuery가 임포트 된 문서에서만 사용이 가능함
  • Ajax 코드  

   $.ajax({
          type: "GET",
          url: "openAPI url",
          data: {},
          success: function(response){
          	//이 부분에 openAPI에서 가져온 데이터가 담긴 response 변수를 통해 필요한 코드 작성
    }

  • `(백틱) 을 이용해서 작성한 변수를 활용해 HTML 구조를 변경할 수도 있음

     $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function(response){
                let rows = response['articles']
                        //i에 0을 입력; i의 숫자가 rows의 리스트 요소 개수보다 낮을 때까지 반복; i는 1씩 커짐
                for(let i = 0; i < rows.length; i++){
                    let comment = rows[i]['comment'];
                    let desc = rows[i]['desc'];
                    let image = rows[i]['image'];
                    let title = rows[i]['title'];
                    let url = rows[i]['url'];
                                //`(백틱)을 이용해서 변수로 HTML구조 변경
                    let tempHTML = `
                        <div class="card">
                            <img class="card-img-top"
                                src="${image}"
                                alt="Card image cap">
                            <div class="card-body">
                                <a class="card-title" href="${url}">${title}</a>
                                <p class="card-text">${desc}</p>
                                <p class="card-text ${comment}</p>
                            </div>
                        </div>`;
                                //card-columns 라는 id를 가진 태그에 작성해준 tempHTML 변수에 담긴 코드를 붙여주기
                    $('.card-columns').append(tempHTML);
                }
            }
    })

 

• •  

•  

 

 

---

JQuery와 Ajax를 활용하니

확실히 javascript 코드 작성이 훨씬 쉽고

openAPI를 활용하기도 너무 편한 것 같더라구요!!

빨리 연습해서 내것으로 만들어야겠습니다💪💪

 

읽어주셔서 감사합니다!!

재미있게 읽으셨다면

'♥공감' 버튼 한 번 클릭 부탁드려요 :)