Enjoy Programming

https://codesandbox.io/s/day-five-blueprint-forked-mfsgd

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

사이드 프로젝트로~ 유튭과 인스타를 클론하면서 진행중인데~ 좋아요를 구현해보았다.. 생각보다 어렵진 않았는데~ 1. db model의 스키마 타입 정하기 2. 라우터 url설정하기 3. 컨트롤러 작성하기 4. fetch 를 이용해 라우터에 POST로 해당값을 서버로 보내주고~ 5. response로 db에 저장된 값을 가져와서 템플릿에 뿌려준다~ 일단 완성된 것은/ photo모델의 rating 스키마 타입은 objectId로 하고 User모델을 참조한다. User 모델 또한 좋아요 한 영상이나 사진을 각각의 프로퍼티에 배열로 담아준다. apiRouter를 통해 해당 값들을 받아오도록 한다. 템플릿에서 rating prop의 값이 배열로 정해져있으므로 length로 해당 좋아요 갯수를 정한다. 프런트의 자..

오늘의 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루프가 다른점..