2022-03-17(목)

https://jquery.com/

function myQuery(selector) {
  var e = document.querySelector(selector);
  return e;
}

var x = myQuery;

http://localhost:8080/todo/index.html

function myQuery(selector) {
  var e = document.querySelector(selector);
  return e;
}

var x = myQuery;
var _ = myQuery;

function myQuery(selector) {
  var e = document.querySelector(selector);
  return e;
}

var $ = myQuery;

function myQuery(selector) {
  var e = document.querySelector(selector);
  
  e.css = function(name, value) {
    e.style[name] = value;
  };
  
  return e;
}

var $ = myQuery;

function myQuery(selector, parent) {
  
  if (parent == null) {
    // 부모 태그가 지정되어 있으면 그 부모 태그 아래에서 조건에 해당하는 태그를 찾는다. 
    var e = document.querySelector(selector);
  } else {
    // 부모 태그가 지정되어 있지 않으면 HTML 문서 전체에서 조건에 해당하는 태그를 찾는다
    var e = document.querySelector(selector);
  }
  
  // 태그에 스타일 설정
  e.css = function(name, value) {
    e.style[name] = value;
  };
  
  // 태그 아래에서 다른 태그 찾기
  e.find = function(selector) {
    return myQuery(selector, e);
  };
  
  return e;
}

var $ = myQuery;

파라미터 값을 주면 현재 value 값을 바꾼다
파라미터 값을 안 주면 현재 value 값을 출력한다
자바스크립트는 오버로딩 함수를 제공하지 않는다

  // 입력 상자의 value 프로퍼티 값을 조회하거나 설정하기(setter/getter)
  e.val = function(v) {
    console.log(arguments)
    if (arguments.length == 0) {
      return e.value;
    } else {
      e.value = v;
    }
  };

jQuery는 setVal, getVal 따로 안 만들고
하나로 만들고 파라미터 값을 안 주면 getter로 동작하고
파라미터 값을 주면 setter로 동작하도록 프로그래밍 되어 있다.

이 조건에 해당되는 태그 찾아!
태그를 리턴
그냥 태그를 리턴하는 게 아니라 덕지덕지 붙임
리턴된 태그에 css 함수 붙이고 find 함수 붙이고 html 함수 붙이고 val 함수 붙이고 attr 함수 붙이고 얘를 최종적으로 리턴한다
오리지널 태그에는 원래 이런 함수가 없었는데 붙여서 리턴한다
selector를 줄 때 그렇게 주겠다

myQuery(tag객체)
리턴된 태그에
파라미터로 넘겨준 태그를 리턴하는데
그냥 리턴하는 게 아니라 양념
기존의 오리지널 태그에 양념을 추가해서 리턴한다
myQuery가 리턴한 태그는 이 메서드들을 갖고 있다
이 메서드 쓰고 싶어? 그러면 태그를 집어넣어서 가공돼서 리턴된 걸 받아서 써라
가공해서 리턴 받아 써라
그래야 함수들을 쓸 수 있다

$(e.target).val("");

오리지널 태그에는 val 함수가 없음
그래서 감싸준다
가공해줘
가공된 태그 객체를 리턴
가공된 태그에는 val 함수가 있다

도우미 메서드
도우미 프로퍼티
도우미 함수
를 추가해서 리턴

$(태그)
오리지널 태그를 편리하게 가공해달라

https://api.jquery.com/append/#append-content-content
자식 태그 추가

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

  // 태그의 콘텐트(innerHTML 프로퍼티 값)를 조회하고 꺼내기 => <태그명>콘텐트</태그명>
  e.html = function(content) {
    if (arguments.length == 0) {
      return e.innerHTML;
    } else if (arguments.length == 1) {
      e.innerHTML = content;
    }
  };

태그 생성

$("<tr>");

값을 설정한 이후에 코드를 리턴

  // 태그에 스타일 값 조회 및 설정
  e.css = function(name, value) {
    if (arguments.length == 1) {
      return e.style[name];
    } else if (arguments.length == 2) {
      e.style[name] = value;
      return e;
    }
  };

  // 현재 태그에 클래스를 추가한다.
  e.addClass = function(name) {
    e.classList.add(name);
    return e;
  }
  
  // 현재 태그에 해당 클래스를 제거한다.
  e.removeClass = function(name) {
    e.classList.remove(name);
    return e;
  }

https://api.jquery.com/keyup/#keyup-handler

  // keyup 이벤트 리스너 등록
  e.keyup = function(listner) {
    e.addEventListener("keyup", listner);
    return e;
  }

web/src/main/resources/static/javascript/ex07
web/src/main/resources/static/jquery
제이쿼리가 내부적으로 저렇게 돌아가는구나 공부하기

myQuery 압축하는 방법

쓸데없는 공백 다 빼고 주석 날림

https://www.toptal.com/developers/javascript-minifier/

<script type="text/javascript" src="../myQuery.min.js"></script>

https://jquery.com/

https://developers.google.com/speed/libraries#jquery

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

그 서버가 다운 되거나
그 서버에서 악성코드
기업에서는 절대 CDN 방식을 쓰지 않는다

/Users/nana/git/bitcamp-study/mylist-boot/app/src/main/resources/static

npm init

https://jquery.com/download/

npm install jquery

sweetalert2 검색

npm install sweetalert2

npm install bootstrap

mylist-boot/src/main/resources/static/node_modules

.gitignore

node_modules/
package-lock.json
temp/

↑ 이거 3개는 추가하기

물음표 사라짐

git pull 받고
이미 package.json 파일에 적혀 있으니까
npm install 까지만 적으면 됨

npm install 하기

의존하는 라이브러리를 먼저 로딩해야 됨
sweet는 밑에 둬도 되고 위에 둬도 됨

다른 서버를 가리키면 CDN 방식

같은 서버는 node module

<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">