Enjoy Programming

오늘부터 기초적인 자바스크립트 내용부터 시작해서 차근차근 다시 포스팅하려고 한다. 모던자바스크립트 도서를 기준으로 작성하고~ react나 nextjs graphql은 프로젝트 도중 필요한 시점에 작성하겠다~! 먼저 짧게 변수의 선언과 할당에 대해 짚고 넘어가자. Runtime을 기준으로 생각하면 좀 더 쉽게 이해하기 쉽다고 생각한다. 먼저 score라는 변수를 선언하고 할당해보자 순서는 콘솔창에 선언되지 않은 score를 표시하고 그 다음 score를 선언한다. 그리고 score에 80을 할당하자. 결과부터 보면 먼저 undefined가 뜨고 80이 찍힌다. 자바스크립트는 순서대로 읽어 내려간다. 그럼 첫 console.log에 왜 reference오류가 아닌 undefined가 떴는가! 하면 이는 바로..

자바스크립트로 클래스네임을 추가하고 싶을때는 필자는 보통 element.className = "name";을 통해 클래스 명을 삭제후 새로 설정하거나 element.className += "name", element.classList.add("name") 을 통해 추가를 해줄 수 있다. 해당 클래스 명이 있으면 삭제를 하고 없다면 추가를 해주는 메서드가 있는데 바로 toggle이다. 한가지 좋은거 알았다.~~

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다. 먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다. 그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다. 그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다. 이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데 queryselectorAll을 이용해 input을 모두 select해주고. forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 sprea..

오늘의 ES 마지막 포스팅이다. 화이팅! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled Promise.allSettled() - JavaScript | MDN Promise.allSettled() 메소드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise 객체를 반환한다. developer.mozilla.org promise.allSettled() 메서드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응할 수 있는 Promise객체를..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat Array.prototype.flat() - JavaScript | MDN flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. developer.mozilla.org Array.flay() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다. 구문 const newArr = arr.flat([depth]); depth는 중첩 배열 구조를 평탄화할때 사용할 값, 기본값은 1이다. 반환 값은 하위 배열을 이어붙인 새로운 배열 depth의 기본값은 1이고 in..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries Object.entries() - JavaScript | MDN Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). developer.mozilla.org Object.entries()메서드는 for...in과 같은 순서로 주어진 객체 자체의 enumerable속성 [key, value] 쌍의 배열을 반환한다. 배열로 반환 ~! for-in루프가 다른점..