최근 바닐라 코드로 작업을 하고 있는데 진짜 너무 옛날에 썼던 거라 기억이 나질 않아 곤란했다.선언형으로 작업하는 게 이렇게 노가다스러운 일이었구나 🥲 를 새삼 깨닫는다. document.querySelector- CSS 선택자 기반으로 첫 번째 요소 반환한다. (단일 요소로 없으면 null 반환)- CSS 선택자 아무거나 선택할 수 있어서 유연하다. Hello! World! document.querySelectorAll- CSS 선택자 기반으로 매칭되는 '모든 요소'를 NodeList로 반환한다.- 이 NodeList는 배열처럼 사용할 수 있어 forEach를 사용해 순회하여 어떤 액션을 할 수 있음 Item 1 Item 2 Item 3 document.getElementById- html..
pughtml(마크업 언어)는 정적인 언어로, 웹페이지의 '뼈대'를 담당한다.여기에 css로 스타일링을 하고, js로 기능을 추가한다. pug(구 jade)는 템플릿 엔진 중 하나인데, 템플릿 엔진은 js를 사용해 html을 렌더링 할 수 있게 해준다.html 문법보다 조금 더 간략하고 더 좋은 기능들이 있어, html과 유사하게 생겼으나 문법은 다르다. pug는 html을 pug의 문법으로 작성하면 html로 바꿔주는 기능을 한다.pug는 express 패키지의 뷰 엔진이다. 쓰는 법npm i pugapp.set("view engine", "pug"); pug를 먼저 설치해준다.express는 html 파일을 저장할 수 있는 폴더의 기본 이름이 'views'이기 때문에 저렇게 해줘야 한다.그리고 확장자..
Promise의 정적 메서드먼저 Promise는 비동기 작업의 결과를 나타내는 객체다.pending, fulfilled, rejected로 나뉘며 이러한 결과를 then, catch, finally 메서드를 통해 반환한다. Promise는 비동기 작업의 동시성을 용이하게 하기 위해 4가지 정적 메서드를 제공한다.Promise.all, Promise.allSettled, Promise.any, Promise.race 이렇게 4가지다. 원래는 앞의 2개만 정리하려고 했는데 궁금해서 그냥 뒤의 2개도 알아봤다. Promise.all전달한 모든 Promise가 성공했을 때 결과를 반환한다.모든 Promise가 fulfilled하면 각 Promise의 결과를 배열로 반환한다.이 순서는 완료된 순서가 아니라 입력된..
Polyfill오래된 브라우저에서도 최신 자바스크립트 기능을 지원(채워)해주는 스크립트Polyfill은 브라우저에 포함되어 있는지 체크하고, 없으면 값을 채워주는 형태로 동작함/* Array.prototype.at에 대한 자체 구현 */;Array.prototype.at = Array.prototype.at ?? 이것을 알아본 이유: 팀 코드를 보는데 core-js: 3이라는 부분을 봐서 그렇다.표준적으로 사용하는 Polyfill들은 이 core-js 리포지토리에 모여있다.import 'core-js/actual'을 실행하면 대부분의 ECMAScript 기능을 사용할 수 있다.Polyfill의 장단점장점: 폭넓은 브라우저 지원 가능단점: 로드해야 하는 JS 코드가 많아짐 => 웹 성능 악화를 야기선택적으..
