오늘도 조으네💜

Javascript

유용한 사이트가 하나 있어서 소개해본다! jQuery 문법을 javascript로 바꾸는 방법을 소개해주는 사이트이다. 나는 처음 공부할 때 jQuery에 먼저 익숙해진 케이스이고 실무에서도 jQuery위주로 사용을 했던 터라 jQuery 문법은 아는데 javascript로 작성하려니 멈칫멈칫하던 순간이 자주 있었다. 매번 구글링해서 찾고 작성하는데, 이런 귀찮음을 해결해 주는 사이트이다. https://youmightnotneedjquery.com/#ajax You Might Not Need jQuery Your search didn't match any comparisons.jquery📋$.getJSON('/my/url', function (data) {}); ie8+📋var request = new..

2023. 5. 22.

Javascript

📌공공데이터란? 공공기관이 만들어내는 모든 자료나 정보, 국민 모두의 소통과 협력을 이끌어내는 공적인 정보이다. 각 공공기관이 보유한 공공데이터 목록과 국민에게 개방할 수 있는 공공데이터를 포털에 등록하면 모두가 공유할 수 있는 양질의 공공데이터가 된다. 📌공공데이터 포털 포털(공공데이터포털)은 각 공공기관이 보유하고 있는 공공데이터를 하나로 통합 관리하는 창구 역할을 한다. 국민에게 개방할 공공데이터가 모두 모여 있는 공간으로 누구나 공공데이터포털을 이용할 수 있다. https://www.data.go.kr/ 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이..

2023. 4. 2.

Javascript

const values = ['banana', 'apple', 'orange', 'orange', 'apple']; const count = values.reduce((acc, cur) => { acc[cur] = (acc[cur] || 0) + 1 return acc; }, {}) 배열의 reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 리듀서 함수는 네 개의 인자를 가진다. 누산기 (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다. 구문 arr.reduce(callback[, initialValu..

2022. 11. 17.

Javascript

this? this! 🤔 this는 메서드를 호출할 때, 일반 함수를 호출할 때도 만들어지며, 이벤트 리스너가 호출될 때에도 만들어진다. 이때, this는 동일한 값이 아니며 함수를 호출하는 방법에 의해 결정된다. 따라서, 다양한 경우에 this에 어떤 값이 들어가는지 판단할 수 있어야 한다. 📌일반 함수에서의 this var data=10; function outer(){ this.data=20; //window.data = 20 data=30; document.write("1. data1 = "+data," "); document.write("2. this.data = "+this.data," "); document.write("3. window.data = "+window.data," "); } o..

2022. 9. 10.

Javascript

📌 원시 데이터 : 변경이 불가능한 값 String, Number, Boolean, undefined, null 메모리 영역에서의 변경은 불가능하며, 새로운 값을 만들때 메모리에 같은 값이 있으면 이미 만들어진 메모리 주소의 값을 바라보지만, 새로운 값일 경우 새로운 메모리에 할당한다. let str = 'Hello'; str = 'world'; 첫번째 구문이 실행되면 메모리에 문자열 'Hello' 가 생성되고, 변수 str은 'Hello'의 메모리 주소를 가리킨다. 두번째 구문이 실행되면 이전에 생성된 'Hello'를 수정하는 것이 아니라 새로운 메모리에 새로운 문자열 'World'를 생성하고 변수 str은 이를 가리킨다. 따라서 메모리에는 'Hello'와 'World' 모두 존재하고 있으며, 변수 s..

2022. 9. 10.

Javascript

📌 Nullish coalescing operator : 병합연산자 null 병합 연산자(nullish coalescing operator)라고 불리는 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있다. a ?? b의 결과는 아래와 같다. 👉 a가 null도 아니고 undefined도 아니면 a 👉 그 외의 경우는 b(a가 null 또는 undefined) nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; //❌ Bad Code 💩 function printMessage(text) { let message = text; if..

2022. 9. 5.

Javascript

📌 원시 데이터 : 변경이 불가능한 값 메모리 영역에서의 변경은 불가능하며, 새로운 값을 만들때 메모리에 같은 값이 있으면 이미 만들어진 메모리 주소의 값을 바라보지만, 새로운 값일 경우 새로운 메모리에 할당한다. String, Number, Boolean, undefined, null let str = 'Hello'; str = 'world'; 첫번째 구문이 실행되면 메모리에 문자열 'Hello' 가 생성되고, 변수 str은 'Hello'의 메모리 주소를 가리킨다. 두번째 구문이 실행되면 이전에 생성된 'Hello'를 수정하는 것이 아니라 새로운 메모리에 새로운 문자열 'World'를 생성하고 변수 str은 이를 가리킨다. 따라서 메모리에는 'Hello'와 'World' 모두 존재하고 있으며, 변수 s..

2022. 9. 2.

Javascript

👀 DOMContentLoaded 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다. 그러므로 해당 이벤트는 DOM이 준비된 것을 확인한 후 원하는 DOM 노트를 탐색해 핸들러를 등록하여 인터페이스를 초기화할 때 활용할 수 있다. window.addEventListener('DOMContentLoaded', function) Jquery에서 DOMContentLoaded 비슷한 기능을 하는것이 $(document).ready( )이다. $(document).ready(function() { // 실행될 코드 }) 👀 load HTML로 DOM트리를 완성하고, 이미지와 스타일시트 등의 외부 기타 자원도 모두 불러오는 것이 끝..

2022. 9. 2.