[스파르타 코딩클럽] 4일차 기록

4일차 기록

---

준비

PyCharm

javascript 복습

---

memo

jQuery란?

Javascript를 미리 작성해둔 것 / 라이브러리

jQuery로 길고 복잡하게 썻던 javascript를 직관적으로 쓸 수 있음

<!-- jQuery 임포트해서 사용하기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

jQuery로 입력값 판별, 원하는 문자 추출, 태그 붙여넣기, 지우기 퀴즈

<script>
        function q1() {
            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기
            let input_q1 = $('#input-q1').val();
            if(input_q1 == ''){
                alert('입력하세요!');
            }else {
                alert(input_q1);
            }
        }

        function q2() {
            // 1. input-q2 값을 가져온다.
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
            // 4. alert(도메인 값);으로 띄우기
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
            let input_q2 = $('#input-q2').val();
            if(input_q2.includes('@')){
            	// 한줄 코드
                // let mail = input_q2.split('@')[1].split('.')[0]
                let mail_dot = input_q2.split('@');
                let mail = mail_dot[1].split('.');
                alert(mail[0]);
            }else{
                alert('이메일이 아닙니다');
            }
        }

        function q3() {
            // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
            let txt = $('#input-q3').val();
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
            $('#names-q3').empty();
        }

    </script>

 

서버-클라이언트 통신

서버-클라이언트한테 내려주는 포멧 : JSON

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko 

JSONView

-> JSON 형식의 데이터를 보기 편하게 해주는 확장프로그램

확장프로그램 설치 후 JSON 데이터

RealtimeCityAir -> row -> 데이터 : 반복문, 조건문으로 원하는 데이터 추출

 

클라이언트-서버 : GET요청

클라이언트가 요청 할 때 타입 : GET , POST가 존재

GET : 데이터 조회(read)를 요청할 때

POST : 데이터 생성, 변경, 삭제 요청 할 때 (회원가입, 회원탈퇴, 비밀번호 수정)

 

Ajax

-> jQuery를 임포트한 페이지에서만 동작 가능

` : 백틱

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

// 퀴즈_1
function q1() {             // 업데이트버튼 누르면 호출
            $('#names-q1').empty()  // 지워지고
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for(let i = 0; i < rows.length; i++){
                        let stationname = rows[i]['stationName']
                        let rackcnt = rows[i]['rackTotCnt']
                        let parkingbikecnt = rows[i]['parkingBikeTotCnt']

                        // 조건문으로 색 지정
                        let temp_html =``
                        if(parkingbikecnt < 5){     // 거치된 자전거 수가 5개보다 작을때
                            temp_html =
                                `<tr class="low">
                                    <td>${stationname}</td>
                                    <td>${rackcnt}</td>
                                     <td>${parkingbikecnt}</td>
                                 </tr>`
                        }else{
                            temp_html =
                                `<tr>
                                    <td>${stationname}</td>
                                    <td>${rackcnt}</td>
                                     <td>${parkingbikecnt}</td>
                                 </tr>`
                        }

                        $('#names-q1').append(temp_html)    // 새로 업데이트된다
                    }
                }
            })
        }

---

느낀점

 

실제로 눈에 보이는 데이터를 원하는 조건을 주고 값을 뽑아내는 연습을 하면서

Ajax 활용하면서 늘 ` 백틱으로 태그 붙여주는게 헷갈려서 하다가 실패하면

다른방식으로 해결하고는 했는데 이렇게 간단한걸 왜 그때는 이해하지 못했을까 ;)

오늘은 늦게 시작해서 저녁에 복습은 못하고 내일 수업 듣고 해야겠다.

jQuery Ajax가 어렵긴하지만 하다보면 재밌는 부분이라 실제로 적용시켜서

어떤 화면을 만들 수 있을까 기대중이다.

잘 활용할 수 있게 연습 많이해야겠다.

 

내일 복습 할 것

// 포스팅박스 열기, 닫기

// jQuery로 입력값 판별, 원하는 문자 추출, 태그 붙여넣기, 지우기 퀴즈

// Ajax 퀴즈