응애 나 뉴비 개발일지 2편

진도사우르스에 쫓겨 열심히 달리다 보니 벌써 2주차 짜리 강의 영상을 듣고있다.

하루에 8강 제한을 둬도 나의 질주는 못 막는 것인가.

 

진도사우르스

이번 강의는 JQuery와 Ajax가 메인이 되었다.

 

분명 수업을 들었는데 내 머리 속의 지우개 마냥 실습만 시작하면 다 까먹어서 애를 먹었다.

역시 반복되는 복습만이 답인 것 인가

 

뭔가 구현하는 순서를 생각하고 그대로 옮겨 적으면 되는데 아무것도 생각나지 않는 것이..

난 공부가 하기 싫었던 것일지도..

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

        }

        function q2() {
            // 1. input-q2 값을 가져온다.
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
            // 4. alert(도메인 값);으로 띄우기
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
            let q2text = $('#input-q2').val();
            if (q2text.includes('@')){
                //let emaildo = q2text.split('@')[1];
                //let emaildot = emaildo.split('.')[0]; 위 두개 합치면 아래
                let emaildot = q2text.split('@')[1].split('.')[0]
                alert(emaildot);
                $(`#input-q2`).val('');
            } 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 q3text = $(`#input-q3`).val();
            if (q3text == ''){
                alert('이름을 입력하세요.')
            } else {
                let temphtml = `<li>${q3text}</li>`;
                $('#names-q3').append(temphtml);
                $(`#input-q3`).val('');
            }
        }

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

    </script>

이런 식으로 힌트를 받고 적어내는건 나름 금방 금방 할 수 있었다.

내가 기억해 뒀으면 하는 내용은 태블릿에 있는 pdf에 따로 메모해두며 공부하고 있다.

 

대충 이런 모양이 나왔음

Ajax에서 시간을 좀 잡아먹었는데 이제 와서 다시 파일을 열어보니 왜 그랬는지 모르겠다..

중간 중간 나오는 퀴즈를 게임하면서 풀어서 그런건가 싶다.

 

주로 실시간 json 데이터를 이용해서 원하는 데이터만 불러오고 불러온 데이터에 조건을 거는 연습을 하였다.

 

    <script>
        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 st_name = rows[i]['stationName']
                        let park_em = rows[i]['rackTotCnt']
                        let bike_ra = rows[i]['parkingBikeTotCnt']

                        let temp_html=''

                        if (bike_ra < 5){
                            temp_html= `<tr class="low_bike">
                                            <td>${st_name}</td>
                                            <td>${park_em}</td>
                                            <td>${bike_ra}</td>
                                        </tr>`
                        }else{
                            temp_html=`<tr>
                                            <td>${st_name}</td>
                                            <td>${park_em}</td>
                                            <td>${bike_ra}</td>
                                        </tr>`
                        }
                        $(`#names-q1`).append(temp_html)
                    }
                }
            })
        }
    </script>

예를 들면 이런 간단한거

 

 

 

과제에서 문제가 좀 발생했는데, 과제는 1주차 때 만들어둔 쇼핑몰 페이지를 이용하여 추가적인 기능을 작성하는 내용이었다.

 

발생한 문제는 과제 파일에서 Ajax의 success 함수가 호출이 안되는 것이었다. 

웃긴건 실습 폴더에 있는 Ajaxquiz01이라는 퀴즈 푼 파일을 가져오면 호출이됨 ㅋㅋ 

 

한참 헤매다가 그냥 밀고 나갔는데 정상 작동 하는거 보니까 그냥 파이참 버그인것 같기도 하고 아무튼 그냥 저냥 해결 됐고 과제는 해결되었다.(전개 무엇)

 

아무튼 해결이 힘들어서 이번 과제는 굉장히 기억에 남을 것 같다.. 정작 코드문 자체의 작성은 금방함

( 그리고 저장을 안하고 껏다. )

 

    $(document).ready(function () {
        q1();
    });

    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {},
            success: function (response) {
                let rows = response['rate']
                console.log(rows);
                let temp_html = `<p>달러-원 환율:<span>${rows}<span></p>`
                $('#rate').append(temp_html);
            }
        })
    }

제출 하고 알았는데 내가 작성한 코드와 과제 해설에 있는 코드가 달랐다.

 

해설 코드는

<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>

body에서 달러-원 환율을 만들어주고

        function get_rate(){
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let now_rate = response['rate'];
                    $('#now-rate').text(now_rate);
                }
            })
        }

span의 텍스트를 변경하는 방식으로 풀이 하였다.

 

물론 모로가도 도착만 하면 된다고 일단 나는 풀었으니 OK 하고 넘어갔다.

하지만 까먹지않게 메모메모