javascript 동적이벤트, 비동기통신 ajax (2023.05.04)

full stack/JavaScript

javascript 동적이벤트, 비동기통신 ajax (2023.05.04)

Shinjio 2023. 5. 4. 17:19

< 복습 >

jQuery : JS 라이브러리

요소 접근 → $(css선택자)
기능 추가 → .메소드()

내용만 → .text()
태그까지 → .html()
스타일제어 → .css()

한줄씩 입력
$('h1').css('속성1','값1')
$('h1').css('속성2','값2')
$('h1').css('속성3','값3')

chain 방식
$('h1').css('속성1','값1').css('속성2','값2').css('속성3','값3')

객체 방식
$('h1').css({
    '속성1' : '값1',
    '속성2' : '값2',
    '속성3' : '값3',
})

🎈 동적 이벤트 바인딩

📖 이벤트 바이딩

JS코드와 jQuery코드는 대부분 이벤트(event)에 의해 동작함

이벤트란 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위

⚙ 이벤트 바이딩의 과정

1. 이벤트를 받아 줄 요소 선택

2. 선택한 요소가 어떤 이벤트에 반응할지, 요소와 이벤트를 연결해주는 바인딩 진행

3. 이벤트가 발생했을 때 실행될 코드 작성

📖 동적 이벤트 바이딩

동적으로 생성된 Element(이벤트로 인핸 생성된 요소)에 이벤트를 바인딩한다는 의미

⚙ 일반 이벤트와 동적 이벤트 차이

일반 이벤트를 사용했을 경우, 생성된 동적 요소에서는 이벤트가 작동하지 않음

반면, 동적 이벤트를 사용했을 경우 생성된 동적 요소에서도 이벤트가 작동함

$(document).on(이벤트타입, 이벤트대상(css선택자), 이벤트핸들러)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dynamic event</title>
    <style>
        button{
            width: 100px;
            height: 60px;
            margin: 5px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 1.7rem;
        }
        .clickBtn{
            background-color: lightpink;
        }
        .onBtn{
            background-color: lightgreen;
        }
    </style>
    <script src="./js/jquery-3.6.4.min.js"></script>
</head>
<body>
    <button class="clickBtn">click</button>
    <button class="onBtn">on</button>
    <br>

    <script>
        // 동적이벤트
        // → 문서를 가져와야 함
        // $(document).on(이벤트타입, 이벤트대상(css선택자), 이벤트핸들러)

        // Click 버튼 클릭시, click 버튼 생성
        $('.clickBtn').click(()=>{
            // body 태그에 clickBtn 생성
            $('body').append('<button class="clickBtn">click</button>');
        })

        // on 버튼 클릭스, on 버튼 생성
        $(document).on('click', '.onBtn', ()=>{
            $('body').append('<button class="onBtn">on</button>');
        })
        
    </script>
</body>
</html>

🎈 jQuery 다양한 메서드

// 추가 제거 관련
// attr(추가할속성, 속성의값) : 속성 추가 메서드
// removeAttr(제거할속성) : 속성 제거 메서드
// removeClass(클래스이름) : 클래스 속성값 제거 메서드
// $(A).appen(B) : B를 A요소 마지막 위치에 추가 메서드
// $(A).prepend(B) : B를 A요소 첫번째 위치에 추가 메서드

// input 관련 메서드
// val() : input 입력 값 접근 (JS : value)
// input 안의 값 비워주기 → input반환객체.val('')

// 부모 관련 메서드 
// parent() : 가장 가까운 부모 요소 선택 
// parents() : 모든 부모 요소 선택
// closest(원하는요소) : 모든 부모 요소 대상으로 원하는 요소 검색하여 접근

// 1. 좋아요 버튼 클릭시 
//      버튼 내 메시지 : 좋아요 → 좋아요 취소 
//      숫자 : 0 → 1
$(document).on('click', '.likeBtn', (e)=>{
    // 버튼 내용 바꾸기
    $(e.target).text('좋아요 취소😥');
    // 숫자 바꾸기
    $('span').text('1');
    // likeBtn 클래스 제거, dislikeBtn 클래스 추가
    // $(e.target).removeClass('likeBtn');
    $(e.target).removeAttr('class');
    $(e.target).attr('class', 'dislikeBtn');
    
})

// 2. 좋아요 취소 버튼 클릭시
//      좋아요 취소 → 좋아요 
//      1 → 0 변경
$(document).on('click', '.dislikeBtn', (e)=>{
    $(e.target).text('좋아요😍');
    $('span').text('0');
    // dislikeBtn 클래스 제거, likeBtn 클래스 추가
    $(e.target).removeAttr('class');
    $(e.target).attr('class', 'likeBtn');
})

// 3. 댓글 작성 버튼 클릭시
//     댓글 + 삭제 버튼 생성
$(document).on('click', '.textBtn', ()=>{
    let textVal = $('input[type=text]').val();
    $('.container').prepend(`
        <p>
            ${textVal}
            <button class="removeBtn">삭제 ಥ_ಥ</button>
        </p>
    `)

    // input 안의 값 비워주기
    $('input').val('');
})

// 4. 삭제 버튼 클릭시
//     댓글 + 삭제 버튼 제거 
$(document).on('click', 'button[class=removeBtn]', e=>{
    // $(e.target).parent().remove();
    // $(e.target).parents().remove();
    $(e.target).closest('p').remove();
})

※ 추가 관련 메서드 append vs prepend 차이

📖 event.target vs this

⚙ $(this)

일종의 변수, 선택자로 this 키워드를 $() 함수에 전달하면, 이벤트가 발생한 자기 자신을 감지할 수 있음

일반적으로 동일한 소스가 반복되는 곳에 사용됨

호출된 HTML 객체를 저장 → 화살표 함수에서는 작동하지 않음. 함수 표현식에서 사용 가능

        $('h1').on('mouseover', function(){
            $(this).css('color', 'red');
            // this : 호출된 HTML 객체를 저장
            //  - 화살표 함수에서는 작동하지 않음
        })

위의 코드에서 this는 HTML의 <h1>을 의미함

⚙ event.target

실제 이벤트가 시작된 target 요소

이벤트를 촉발시킨 요소

화살표 함수에서 사용 가능

$(document).on('click', '.dislikeBtn', (e)=>{
    $(e.target).text('좋아요😍');
    $('span').text('0');
    // dislikeBtn 클래스 제거, likeBtn 클래스 추가
    $(e.target).removeAttr('class');
    $(e.target).attr('class', 'likeBtn');
})

⚙ event.target 혹은 $(this) 사용하는 이유

likeBtn을 HTML에서 찾은 후 실행문에서 또 다시 HTML에서 likeBtn을 찾아서 실행 → 비효율적

타겟 혹은 this 활용하여 바로 접근할 수 있도록!!

🎈 ajax 비동기통신방식

📖 동기통신 vs 비동기통신

⚙ 비동기(Asynchronous) 통신

서버에 요청(request)를 보냈을 때 응답(response) 상태와 상관없이 다음 요청(request)을 수행할 수 있는 통신 방법

⚙ 동기(Synchronous) 통신

서버에 요청(request)를 보냈을 때 응답(response)이 돌아와야 다음 요청(request)을 수행할 수 있는 통신 방법

📖 AJAX (Asynchronous JavaScript and XML)

클라이언트와 서버간 비동기적 정보 교환이 가능한 통신 기능

** 화면 전환 없이

데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법

화면 갱신이 없어서 사용자 입장에서 매우 편리하고 빠르게 작업을 처리하는 것처럼 느껴지게 함

하지만, 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해짐

📖 데이터 형식

데이터를 전송하는 전송 형식

⚙ CSV (Comma - Seperated Values)

쉼표를 기준으로 항목을 구분하여 저장한 데이터

⚙ XML(eXtensible Markup Language)

다목적 마크업 언어로 태그 등을 이용하여 데이터의 구조를 작성하는 기술

해당하는 값 양쪽에 태그로 묶어서 관리하므로 가독성이 좋아 데이터 판별이 쉬움

⚙ JSON(JavaScript Object Notation)

'키, 값' 쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 포맷

→ json 자바스크립트 객체형태

반복되는 태그 구조를 줄일 수 있어서 용량이 작다 (XML에 비해)

AJAX 비동기통신 표준데이터로 JSON 사용

📖 Ajax로 api 가져오기

Ajax는 제이쿼리로 접근하지 않으면 코드가 너무 복잡해지기 때문에 제이쿼리로 사용

API(application programming interface, 애플리케이션 프로그래밍 인터페이스)
응용 프로그램에서 서로 다른 소프트웨어 구성 요소를 연결하여 상호작용할 수 있도록 하는 프로그래밍 인터페이스. API는 일반적으로 서로 다른 시스템, 플랫폼 또는 언어 간의 통신을 가능하게 하며, 웹 API는 웹 기술을 사용하여 애플리케이션 간의 상호작용을 용이하게 함. 예를들어, 페이스북 API를 사용하면 개발자는 페이스북 데이터를 다른 응용 프로그램에서 사용할 수 있음. 또한, 구글 지도 API를 사용하면 다른 웹사이트에서 Google 지도를 쉽게 통합할 수 있음.
＃ 인터페이스(Interface) : 서로 다른 두 대상이 상호작용할 수 있도록 중간에서 연결해주는 연결고리

// ajax -> 비동기통신 방법

// j쿼리에 접근 -> $.
// ajax 메소드 사용 -> ajax()
// 데이터는 JSON 형태로 -> {key:value, ~}

let movieUrl = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501';

const getAPI = ()=>{
    $.ajax({
        // 어느 데이터를 가져올 건지
        url : movieUrl,
        // 어떤 방식으로 통신할 건지
        type : 'get',
        // 통신 성공 시 실행 로직
        success : (response)=>{
            // alert('통신 성공!')
            // 순위 -> rank
            // 영화제목 -> movieNm
            // 개봉일 -> openDt

            let movieList = response.boxOfficeResult.dailyBoxOfficeList;

            // 테이블이 출력될 공간인 container에 보내줄 코드를 누적해서 작성해준 다음 마지막에 넣어주자!
            
            let tableFoam = `
            <table>
                <tr>
                    <th>순위</td>
                    <th>영화제목</td>
                    <th>개봉일</td>
                </tr>
            `;

            for(let i of movieList){
            tableFoam += `
                <tr>
                    <td>${i.rank}</td>
                    <td>${i.movieNm}</td>
                    <td>${i.openDt}</td>
                </tr>`
            }

            tableFoam += `
            </table>
            `;

            $('.container').html(tableFoam);

        },

        // 통신 실패 시 실행 로직
        error : ()=>{
            alert('통신 실패!');
        }
    })
}

⚙ API Url 가져오기