[TIL] 웹개발 종합반 2주차

JavaScript는 웹페이지를 움직이게하는 프로그래밍 언어이다.

 

jQuery란?

HTML의 요소들을  JavaScrip코드로 편리하게 사용할 수 있도록 미리 작성해둔 라이브러리를 의미 (라이브러리 : 미리 작성해둔 코드들의 집합)

 

주의 ※ 무조건 import를 사용해서, 라이브러리를 불러와야 한다.

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

 

JavaScript로 작성하면, 아래와 같이 길고 복잡하게 쓸 것을,

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

 

Jquery로 보다 간단하게 작성할 수 있다.

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

 

CSS코드에서는 div 컨테이너 박스에 이름을 class = "name" 으로 달아주었다면,

 

jquery 혹은 자바 스크립트를 사용할때는,  id="q1"으로 달아준다.

 

예시)

            let a = ['사과','배','감','귤']

            $('#q1').text(a[1])

$('#q2').text(a[1])

id="q2"에있는 text를 a[1]요소로 바꾸라는 명령어임

 <div id="q2">테스트</div>

테스트 -> a[1]에 있는 요소로 바뀜

 

자바스크립트 반복문

let fruits = ['사과','배','감', ... ,'귤']

fruits.forEach((a) => { console.log(a) }) // fruits 의 요소를 하나씩 확인하는데 이름은 a로 할 것

 

반복문과 조건문의 조합

     let ages = [12,15,20,25,17,37,24]

      ages.forEach(() =>{

        if(a>20){

            console.log('성인입니다')

        }

        else {

            console.log('청소년입니다')

        }

      })

 

Jquery - append

function checkResult() {

    let fruits = ['사과','배','감','귤','수박']

    fruits.forEach((a) => {

        let temp_html = `<p>${a}</p>`  // p 태그를 생성하고, 변수 a의 값을 삽입하여 temp_html 변수에 저장한다.

        $('#q1').append(temp_html)  // id가 "q1"인 요소의 내부에 temp_html 변수의 값을 추가한다.

    })    

 

        <div id="q1">

            <p>사과</p>

            <p>귤</p>

            <p>감</p>

        </div>

실행 전

실행 후

 

서버 - 클라이언트 통신 이해하기

1. 서버 -> 클라이언트

서버에서 클라이언트에게 data를 전달할때는, 아래와 같이 딕셔너리 형태로 전달받는다.

딕셔너리 형태는 key : value로 이루어져있다.

2. 클라이언트 -> 서버 : GET 요청 이해하기

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

 

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

 

https://movie.daum.net/moviedb/main?movieId=161806

위 주소는 크게 두 부분으로 쪼개진다. 바로 "?"가 쪼개지는 지점이다. "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 이다.

 

* 서버 주소: https://movie.daum.net/moviedb/main? * 영화 정보: movieId=161806

 

GET 방식으로 데이터를 전달하는 방법 ? : 여기서부터 전달할 데이터가 작성된다는 의미이다.

& : 전달할 데이터가 더 있다는 뜻임

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

 

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

---

다음과 같이, HTML 코드가 주어져있고, 업데이트 버튼을 누르면 서울시에서 실시간으로  거치대수와 현재 거치된 따릉이 수를 업데이트한다고 해보자.

 

이를 위해 먼저 이러한 정보를 제공하는 서버에서 API를 가지고와야한다. 

(API란 쉽게 설명해서, 하나의 소프트웨어에서 다른 소프트웨어를 사용하기 위해 필요한 문서화된 규약 같은것임)

 

아래는 업데이트 버튼을 눌렀을때. "q1 함수를 실행해줘"와 같은 내용을 담은 코드이다.

 

• fetch("API 정보를 담은 URL") ← 이 URL로 웹 통신 요청을 보낼 거야!
• .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
• res ⇒ res.json()
  • ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
  • ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
• .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야

라는 의미를 담고있다.

 

 

    <script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

            // 여기에 코드를 입력하세요

            let row = data['getStationList']['row']

            $('#names-q1').empty()

            row.forEach((a) =>{

                let S_Name = a['stationName']

                let rack = a['rackTotCnt'] // 거치대수

                let share = a['parkingBikeTotCnt'] // 현재 거치된 자전거

               

                let temp_html = ``

                if(share <5){

                    temp_html =`<tr class="bad">

                        <td>${S_Name}</td>

                        <td>${rack}</td>

                        <td>${share}</td>

                    </tr>`

                } else {

                    temp_html = `<tr>

                        <td>${S_Name}</td>

                        <td>${rack}</td>

                        <td>${share}</td>

                    </tr>`

                }

                $('#names-q1').append(temp_html)

            })

                    })

                }

    </script>