카테고리 없음

코딩에 대가리 박아보기 2주차

7th crunch Tutorial participant 2022. 4. 23. 00:10

하루에 두개 써야하는거 실화냐 ㅋ

2주차 주요내용은 자바스크립트, jquery, ajax를 사용해 보는것

 

자바스크립트는 뼈대가 되는 HTML, 꾸미는 기능의 CSS와 함께 홈페이지를 동작하게 만드는 코드로

자바스크립트를 통해서 왠만한 것들을 만들어 낼 수 있지만 동작이 복잡해질수록 코드도 복잡해지므로

이를 간단하게 사용할수 있도록 전문개발자들이 미리 짜 둔 코드로 사용하기 위해서는 임포트 과정이 필요

 

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

 

헤더에 다음과 같은 코드를 넣음으로 임포트된다

 

jquery의 예로 2주차에서 줄창 쓰는 코드인 

 

$('#element')

 

라는 코드를 본래 자바스크립트 코드로 구현하려면

 

document.getElementById("element")

 

라고 해야 하지만 Jquery를 사용함으로서 훨씬 간단하게 코딩을 할 수 있음

(물론 저 짧은 코드도 복사붙여넣기 하지만...)

 

이를 사용하기 위해서는 먼저 요소들에 ID를 부여하고 아이디를 통해서

$('#부여된아이디')를 통해 요소를 가리킨 뒤 .함수( ) 등으로 요소를 제어할 수 있다.

 

2주차 과정에서 나온 요소 제어 함수들

 

.val() : 요소에 값이 있다면 그 값을 가져오거나, 반대로 값을 입력 가능하다

.show(), hide() : 요소가 보이거나 보이지 않게 감출수 있다

 

과제 정답에서 참고사항

다음은 첫번째 퀴즈의 정답에서 일부 발췌이다

 

        function q1() {
            let value = $('#input-q1').val();
            if (value == '') {
                alert('입력하세요!');
            } else {
                alert(value);
            }
        }

 

다음은 내가 제출한 답인데

 

        function q1() {
            if ($('#input-q1').val() == '') {
                alert('입력하세요!');
            } else {
                alert($('#input-q1').val());
            }
        }

 

둘 사이의 차이점은 정답에서는 value 라는 변수를 도입하여 처리했다는 것이고 나는 그냥했다는 것이다

생각하고보면 코드가 더 복잡해 질때 가독성을 위해서 한번 변수처리 하는 것이 꽤 괜찮은 듯 하다

 

그에 관한 내용은 q2에서 더 두드러진다

 

정답에서는 

let email = $('#input-q2').val();

if (email.includes('@')) {

let domainWithDot = email.split('@')[1];

let onlyDomain = domainWithDot.split('.')[0];

alert(onlyDomain); }

else { ~

 

이런식으로 $('#input-q2').val() 의 값을 email이라는 변수지정을 하는데 그렇지 않을경우

 

if ($('#input-q2').val().includes('@')) {

alert($('#input-q2').val().split('@')[1].split('.')[0]) }

else { ~

 

이라는 아주 정신없는 코드를 맛볼 수 있다

틀린건 아닌데 가독성이 아주 떨어져서 코드를 짠 사람이 아닌 사람이 들여다보면 이게 무슨뜻인지 한참 봐야 한다

 

그 다음에 배운 것은 open API와 이를 사용해 정보를 받아오고 출력하는 Ajax 의 사용법에 대해서 배웠다

 

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulbike",
    data: {},
    success: function (response) {
        let rows = response['getStationList']['row']
        for (let i = 0; rows.length; i++) {
            let name = rows[i]['stationName']
            let rack = rows[i]['rackTotCnt']
            let bike = rows[i]['parkingBikeTotCnt']

            let temp_html = ``

                if (bike < 5) {
                    temp_html = `<tr class="urgent">
                                   <td>${name}</td>
                                   <td>${rack}</td>
                                   <td>${bike}</td>
                               </tr>`
                }
                else {
                    temp_html = `<tr>
                                   <td>${name}</td>
                                   <td>${rack}</td>
                                   <td>${bike}</td>
                               </tr>`
                }

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

위는 과정중에서 정상작동하는 ajax를 활용한 코드의 일부이다

response 뒤의

['getStationList']['row']

두 부분은 가져온 open API에서 필요로 하는 디렉토리를 지정하는 것이고 이 안에서 또 필요한 자료들은 

let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']

를 통해서 지정한 것이다

for (let i = 0; rows.length; i++)

이부분은 조건문으로 자료 전체를 훑는데 쓰이는 코드이다

 

이번 수업에서 가장 (잘안되어서)열받게 했던 코드는 temp_html을 활용한 코드였는데

언제나 ``를 까먹는 바람에 시간을 참 많이 잡아먹었다

 

``꼭 넣자 안넣으면 아예 동작을 안한다

그리고 temp_html을 활용 하려면 언제나 쓰더라 '언제나'

 

아 그리고 빼먹을뻔 한거 하나 있다 이미지랑 텍스트를 바꿔주는 코드가 포함된 ajax03 예제

 

$.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rtan",
            data: {},
            success: function (response) {
                let url = response['url']
                let msg = response['msg']

                $('#img-rtan').attr('src',url)
                $('#text-rtan').text(msg)
            }
        })

여기에서는 따온 API가 리스트형이 아니라서 조건문이 들어가지 않는다

그림을 바꿔주는 .attr('src',???) 함수와 글자를 바꿔주는 .text(???) 함수는 여기서만 써봤으니 따로 기억해두자