웹개발공부 (w.스파르타코딩클럽 / 2주차)

12482 단어 webjqueryajaxajax

1. jQuery

개요

Html의 요소들을 조작하는 Javascript를 미리 작성해둔 것이다.
Javascript로 길고 복잡하게 써야 하는 것들을 jQuery로 보다 직관적으로 쓸 수 있게 해준다!

사용방법

사용방법은 2가지가 있다.
1. 직접 서비스 하는 방법
2. 구글의 JS 라이브러리를 사용하는 방법(CDN/Content Delivery Network)

이 중 2번째 방법으로 사용을 해보았다.

https://www.w3schools.com/jquery/jquery_get_started.asp
위 링크에서 아래 코드를 복사해서 넣어주면 된다.

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

문법

$(제어대상).method();

jQuery는 $로 시작하고 인자값으로 CSS의 선택자를 줄 수 있다.

예시 1

<body>
    <input type="text">
</body>
입력창을 하나 만든 후 콘솔창에 위와 같이 jQuery를 작성해주면 이렇게 값을 넣어줄 수 있다.

반대로 값을 받는 방법도 있다.

예시 2

Html을 붙이거나 지우는 것도 가능하다!

<div class="question-box">
        <input id="input-txt" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="txt_append()">이름 붙이기</button>
        <button onclick="txt_remove()">모두 지우기</button>
        <ul id="names">
            <li>김갑생</li>
            <li>김말숙</li>
        </ul>
</div>
위와 같은 입력 칸을 만들어 주었을 때 `이름 붙이기`를 누르면 리스트가 추가가 되고 `모두 지우기`를 누르면 초기화가 되는 것을 한 번 구현해보면 
<script>
        function txt_append(){
            let temp_html = $('#input-txt').val()
            $("#names").append(`<li>${temp_html}</li>`)
        }
        function txt_remove(){
            $("#names").empty()
        }
</script>
  1. 추가하기
  1. 모두 지우기

여기에서 html코드를 넣어줄 때에는 '(따옴표)가 아닌 backtick으로 감싸야한다.

이를 이용하여 문자열 중간에 포매팅을 할 수 있다!

2. 서버-클라이언트 통신

API

API는 프로그램들이 서로 상호작용하는 것을 돕는 매개체이다.
이를 비유로 설명하면,
서버를 은행이라고 했을 때, 클라이언트를 고객, API를 은행창구라고 할 수 있다.

같은 예금 창구에서도 개인 대상, 기업 대상에 따라 가져와야 할 것과 처리해야 할 것들이 다른 것처럼
요청을 할 때에도 '타입'이 존재한다!

이는 HTTP 메서드(Method)로 서버에 요청종류를 알릴 수 있다.

HTTP 메서드

메소드의 종류는 아주 많지만 이번에는 GET과 POST에 대해서 공부해보았다.

  • GET은 보통 데이터 조회(Read)를 요청할 때 사용한다.
    ex) 영화 목록 조회, 오늘의 날씨 조회 등

  • POST는 보통 데이터의 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용한다.
    ex) 계정 생성, 계정 삭제, 계정 정보변경

GET

예시와 함께 알아보자!

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

다음을 나눠서 보면
http 서버주소 /api주소 ?전달할 데이터 로 이뤄져 있는 것이다.

여기에서

  • ? : 이 부분부터 전달할 데이터가 작성된다라는 의미를 담고 있다.
  • & : 전달할 데이터를 이어주는 역할 (위의 예시에는 나와있지 않지만!)
  • 추가정보
    ex) google.com/search?q=갤럭시&sourced=chrome&ie=UTF-8
    q (검색어) | sourced (브라우저 정보) | ie (인코딩 정보)

JSON

JSON(JavaScript Object Notation)은 JS 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 포맷이다.
HTML로 만들어진 구조에 데이터를 씌워주기 위해서 사용하는데
주로 모바일 어플리케이션에서 많이 사용한다.

구조

딕셔너리 형태인 key:value로 이뤄져 있다.
ex)

Profile:{
	name:'Kassid'
    age:23
    ...
}

3. Ajax

Ajax(Asynchronous JavaScript and XML)는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.
이를 이용하면 웹페이지 전체를 로딩하지 않고도 일부분을 갱신할 수 있다.

구조

jQuery를 이용해서 Ajax를 구현해보자.(GET 방식)

$.ajax({
  type: "GET",
  url: "URL넣기",
  data: {}, //요청하며 줄 데이터, GET방식일 때에는 비워두기
  success: function(result){
    // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  error: function(error){
  
  }
})

위와 같은 형태를 띄고 있다.

예시

서울시 미세먼지 정보 오픈API
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

$.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                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']
                        console.log(gu_name,gu_mise)
                    }
                }
            })

위 코드를 콘솔창에서 확인해보면
다음과 같은 결과를 얻을 수 있다.

더 배운 내용

1주차에 만들었던 팬페이지에 '온도 정보'를 추가하였다.
날씨api에서 받아와서 페이지를 로딩하면
자동으로 api에서 정보를 업데이트 하도록 구현되어 있다.

$('적용할 선택자').text('대체할 텍스트')

위의 코드는 jQuery를 이용하여 text를 바꿔줄 때 사용한다.

$('적용할 선택자').attr(src,'대체할 이미지 경로')

이미지를 바꿔줄 때에는 이렇게!
attr()는 속성을 부여하는 메서드인데 위와 같이 활용을 하면
이미지를 변경할 수 있다!

3. React props
iOS 프로그래밍 한성현교수님 13주차 수업정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage