멋쟁이 사자처럼_1209

jojo·2021년 12월 9일

1기 TIL 기록 멋쟁이사자처럼 프론트엔드

멋쟁이사자처럼

목록 보기

33/39

수업

jQuery

https://code.jquery.com/

<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>

라이브러리는 빌려서 내 마음대로 구성해서 사용하는 것이고,

프레임워크는 이미 짜여져 있고 그 규칙대로 블럭을 쌓아가는 것이다.
(마치 레고처럼 설명서대로 조립하는 것)

jQuery는 자바스크립트 라이브러리 중 하나로 실무에서 많이 쓰고 있다.

필터

:eq(index)
:even(짝수)
:odd(홀수)
:first
:last
:gt(index) - 큰 숫자 선택
:lt(index) - 작은 숫자 선택
:not(filter)
...

이벤트

사용자의 action에 대해 상호작용해 이벤트 발생할 때 이걸 제어해주는걸 이벤트 핸들러라고 한다.

예전방식

$(document).ready(function(){
    $("div").click(function(){
      $(this).hide();
    });
  });

가로, 세로100px인 #box를 클릭했을 때 변화를 주기

//버튼 클릭했을 때 변화주기
$('#btn_ani').click(function() {
  $('#box').animate({
    width: '300px',
    height: '300px',
    opacity: 1,
  }, 'slow');
});

Ajax

비동기 자바스크립트와 XML

웹 통신에 대한 다양한 방법 중 하나이다.

var loaddata;
$('#btn_data').click(function() {
    //$.ajax({경로, 동기화 여부, 성공하면 할 일})
    //$.ajax({url:'경로', async: false, success:function(result){}})
    $.ajax({
        url:'https://raw.githubusercontent.com/@@/main/data/data.json', 
        async: true,
        dataType: 'JSON',
        success: function(result){
            // $("#data").text(result);
            loaddata = result;
        }
    });
});

ajax 로그인 테스트

<body>
    <input type="text" class="id"><br>
    <input type="password" class="pw"><br>
    <button type="button" class="dataLoadButton">로그인!!</button>
    <div class="dataField">data</div>
    <script>
        let userData;

        function success(userDataParams) {
            document.write(userDataParams);
        }

        function fail() {
            document.write('fail');
        }

        $('.dataLoadButton').click(function() {
            $.ajax({
               url:'https://raw.githubusercontent.com/ajaxlogintest/main/userdata.json', 
                async: true, 
                success: function(response){
                    // console.log(typeof response);
                    // console.log(JSON.parse(response));
                    let id = $('.id').val()
                    let pw = $('.pw').val()

                    response = JSON.parse(response);
                    userData = response.find(user => user.id === id && user.pw === pw);

                    // 로그인 성공시
                    if (userData) {
                        success(userData);
                    }
                    // 로그인 실패시
                    else {
                        fail();
                    }
                }
            });
        });
    </script>

생각

제이쿼리 너무 쉽다. 자바스크립트 하다가 이거 보니까 진짜 신기하고.. 쉽고.. 그렇다. 그치만 바닐라 자바스크립트도 잘하고 싶다..! 쉬워서 누구나 잘 할 수 있는 것 말고!!

자바스크립트를 저번주부터 배우기 시작했으니.. 아직 2주도 안 됐다. 멋쟁이 사자처럼 과정이 끝나면, 그 날 뭐 배웠는지 더듬어서 쓰는 수준의 기록이 아니라, 조금 더 깊이 있는 기록을 하고 싶다는 생각이 든다.

기록이 아직 많이 어렵다.ㅎㅎ

느낀점

잘한점

오늘은 이번주에 공부한 내용 중 이해 안 가는 부분을 손코딩하는 시간을 가졌다. 확실히 손코딩하고, 그걸 다시 읽어보고, 여러가지 색으로 주석을 달아보니 이해가 잘 갔다. 앞으로도 손코딩 열심히 해봐야지!

(근데 손코딩하면 이해는 잘 되는데, 이걸 내가 직접 해보라고 하면 못 할 것 같다. 실제로 오늘도 강사님이 충분히 할 수 있다고 하셨는데 너무 어려워서 혼자 울면서 머리 싸매고 있었다..히히 이건 손코딩도 많이 해보고, 몇번 실패도 해보면서 많이 하면 나아지겠지??)

고칠점