킹바구니 🦜

js문법 속도 측정 사이트를 알게된 이상 한번 정리하는 겸 테스트해봄. 각 테스트마다 문법이 여러개가 있는것도 있지만 상위 4,5위까지만 가져와봄. 덕분에 잊고있었던 문법공부도 다시 하게댐 후후 테스트 브라우저: 크롬 https://jsben.ch/browse JSBEN.CH Performance Benchmarking Playground for JavaScript jsben.ch ---------------------------------------------- 1. array 복사해서 만들기 json stringify는 자주썼는데 이거 좋은 방법이 아니네 어쩐지 어디서 느리다는걸 본적이 있는데.. 앞으로는 slice나 concat을 써야할듯(참고로 concat은 원본 array와 참조된 링크가 끊겨서..

1. nodeName vs matches event.target을 했을때 해당 요소가 어떤 태그인지 알려면 nodeName을 확인하면 됨. 그러나 기본적으로 nodeName은 이렇게 대문자로 나오기때문에 event.target.nodeName.toLowerCase() == 'summary' 이렇게 비교를 해줘야함(아님 걍 대문자로 비교해도 됨). 근데 어느순간 저렇게 하는게 혹시 구린방법(?)이 아닐까라는 생각에 찾아봄. https://stackoverflow.com/questions/44595875/event-target-tostring-or-event-target-nodename-to-check-type-of-element event.target.toString() or event.target.nod..

기본 html로만 작업하다보면 header, footer등과 같이 모든 html에 똑같이 나오는걸 일일히 넣어줘야하나?라는 생각이 들기 시작할것임. 넣는거야 별거아닌데 나중에 한 html파일 20개정도 되는데 header에 뭔가 추가해야한다면 끔_찍... 이에 대한 방법(링크)은 여러가지가 있지만 그나마 뭔가를 안깔고 기본 내에서 할 수 있는거는 이게 제일 유용해서 작성함. 예전에는 php로 했었는뎅 암튼 파일 구조는 다음과 같음. 파일 구조는 뭐든 상관없음. 1. 공통적으로 만들 파일 따로 만들기 나같은 경우 header.html을 생성하여 이하 태그를 넣어뒀고, index.html에는 까지만 써둠. 이제 자바스크립트로 밑에 친구들을 넣을 것임. 2. script에서 불러와줌 const header =..

if { // 조건1 } else if() { // 조건2 } else if() { // 조건3 } 얘는 조건1만 만족하면 그거 실행하고 끝남. 조건3이 만족해도 조건1만 하고 끝남. if { // 조건1 } if { // 조건2 } if { // 조건3 } 얘는 만족하는 조건 있으면 다 들어감.

1. HTMLElement.style document.querySelector('div').style.left = '100px'; document.querySelector('div').style.width = '200px'; 어떤 element을 css말고 javascript로 변경하고 싶다면 이렇게 쓰면 됨. 그런데, width값을 알고싶어서 저걸 쓰면 값이 제대로 나오지 않음 그 이유는 css나 인라인코드로 width값 등이 설정되어있더라도, 자바스크립트로 별도로 지정되지 않았다면 style.width형태로는 요소의 값을 뽑아낼 수 없음. 즉 css로 display: none을 해서 화면상에는 없어도 자바스크립트로 별도로 값을 지정해줬다면 그 값을 출력함. 자바스크립트로 width를 10000px로 ..

가끔 로그찍을때 요로코롬 나올때 있음. 객체형태라서 그런데 방법은 2가지 1. JSON.stringify console.log(JSON.stringify(data)) 2. console.dir console.dir(data)

promise, asnyc, await 이런 최신 문법들이 나왔지만 현실적으로 ie를 맞춰야한다거나 하는 상황이 벌어지면 쓸수가 없음. 그럼 콜백함수를 쓸수밖에 없는데 어쩌다보면 막 너무 지저분해지고 길어지고 하는 상황들이 벌어짐. 그래서 polyfill을 찾아보다가 유튜브에서 한번 보고 따라해봄. https://codepen.io/pmx/pen/XWZJzGM promise polyfill (IE9 맞춤) ... codepen.io ---------------------------- 아니면 이를 지원하는 라이브러리같은게 있는데 하나 아는거는 rsvp.js라서 이걸로도 한번 해봄. https://codepen.io/pmx/pen/abErVqx RSVP.js (IE9 맞춤) ... codepen.io

1. jquery 확인 - 제이쿼리가 먼저 로드가 되었나 - 경로가 제대로 설정되어서 정상적으로 불러와졌나 2. 이렇게 써보기 // 기존 $(document).ready(function() { // code }); // 이렇게 변경 $(document).ready(function($) { // code }(jQuery)); --------------- https://stackoverflow.com/questions/1857072/why-is-document-ready-not-firing-for-me/2409157

1. click $('a').click(function() { // action }) 단순한 클릭 이벤트 2. on $(document).on('click', '.addBtn', function() { // action }) 동적(기본 html에 써둔 태그말고 자바스크립트 등으로 나중에 별도로 추가된 태그들) 요소에게 줄 수 있는 이벤트. .addBtn 부분은 해당 이벤트를 주고싶은 요소의 id나 class값을 써주면 된다.

단어 data-어쩌고 요소는 DOM에 정보를 저장할 수 있는 방법임. 1. data()사용 $('span').data('index', 2) // index를 2로 바꿔줌 2. attr() 사용 $('span').attr('data-index', 2) 가끔 data()로 썼을 때 안되는 경우 attr로 쓰면 된다. --------------------------------- // 전부 $('li') // $('li.active') // 첫번째 $('li').eq(0) // 의 이전 요소 $('li').prev(); // 의 다음 요소 $('li').next(); // 의 바로 위 부모 요소 (바로 위★) $('li').closest(); // 의 부모 중 .wrap이란 class명을 가진 요소 $('li'..