Programming Language/🟨 Javascript 검색 결과

해당 글 33건

유용한 javascript tips (볼 때마다 계속 여기에 정리할 것)

이런 류의 포스팅이 주기적으로 날아와서 정리하기로 했다. 앞으로는 javascript tip이 있으면 여기에 몰아 정리하기로 하자. CSS의 미디어 쿼리를 자바스크립트적으로 사용하기 (css-tricks.com/working-with-javascript-media-queries/) // Create a condition that targets viewports at least 768px wide const mediaQuery = window.matchMedia('(min-width: 768px)') function handleTabletChange(e) { // Check if the media query is true if (e.matches) { // Then log the following mess..
Programming Language/🟨 Javascript 2020. 12. 2. 09:51

PropertyDescriptor(속성 설명자)란 무엇인가

Object에는 속성 설명자라는 것이 있습니다. 길게 말할 필요 없이 getOwnPropertyDescriptor, getOwnPropertyDescriptors 메서드를 통해 출력해봅시다. // PropertyDescriptor(속성 설명자)란 무엇인가 const objSample = { num: 1, string: "abc", symbol: Symbol.for("only One"), g: { a: 1, b: null, }, bark() { console.log(this.a); }, }; // 전체 특정 속성 // { value: 1, writable: true, enumerable: true, configurable: true } const propDesc = Object.getOwnPropertyD..
Programming Language/🟨 Javascript 2020. 11. 24. 22:59

__proto__, Object.hasOwnProperty

상속과 프로토타입 Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, developer.mozilla.org Prototype? 그런데 여러분들은 class 대신 prototype을 사용할 수 있다는 것을 들어보았을 것이다. javascript가 prototype 기반의 언어라는 것을 먼저 이해하자. js에서 모든 것은 객체로 다뤄진다. 그런데 js에서의 객체는 Prototype이라는 은닉 속성을 가진다. 이 프로토타입은 자신의 프로토타입이 되는 다른 객체를 가리킨다. 예를 들자면 const a = []; 해당 a를 콘솔에서 출력해보자면 Array가 가지..
Programming Language/🟨 Javascript 2020. 10. 31. 20:53

ES6) Map & Set + swapping Map with Object

최근에 Set을 활용할 일이 생겨서 Map와 Set을 이번 기회에 알아보기로 했습니다. Set? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set The Set object lets you store unique values of any type python에서는 Set을 종종 활용했는데 그것과 같습니다. Set은 '집합'으로 중학교 때 배웠던 집합 개념을 생각해보시면 됩니다. 사용 방법은 비교적 간단하니 생략하겠습니다. new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다. set.add(value) – 값을 추가하고 셋 자신을 반..
Programming Language/🟨 Javascript 2020. 10. 26. 23:36

배열에서의 비동기 작업과 순차처리/병렬처리

forEach 보통 이용하는 방법은 다음과 같습니다. map같은 경우도 마찬가지지요. const items = ['item1', 'item2', 'item3']; const copy = []; items.forEach(function(item){ copy.push(item); }); console.log(copy) //["item1", "item2", "item3"] 그런데 다음과 같은 코드에서는 subCommentList에 빈배열이 반환됩니다. subComment = ["key1", "key2"] const subCommentList = []; subComment.forEach(async function (el) { let output; try { const subCom = await Comment.f..
Programming Language/🟨 Javascript 2020. 8. 28. 19:39

ES6 제너레이터, 무한 개념 구현하기

ES6에서 도입된 제너레이터(Generator) 함수는 iterable을 생성하는 함수이다. 다음은 제너레이터를 생성하고, yield로 중단점을 설정하며, next()를 통해 실행한 예이다. function* generator() { console.log(1); yield; // 중단점 console.log(2); yield; // 중단점 console.log(3); } const gen = generator(); gen.next(); // 1 출력 console.log("첫 중단"); gen.next(); // 2 출력 console.log("다음 중단"); gen.next(); // 3 출력 다수의 yield를 여러개 설정하면 그 만큼 next로 yield를 건너 뛰어야 합니다. function* g..
Programming Language/🟨 Javascript 2020. 8. 15. 13:53

Vanilla js로 fullpage.js 구현하기

Full page CSS-based scroll (pure vanilla JS, no libraries) CSS transform based full page scroll, Javascript (pure vanilla, no libraries) is used to set the transform property of the container element (touchscre... codepen.io one two ↑ three ↑ four ↑ five ↑ body { overflow: hidden; margin: 0; font-family: "Limelight", sans-serif; text-rendering: optimizeLegibility; } .well { position: relative; o..
Programming Language/🟨 Javascript 2020. 8. 2. 19:44

클로저와 클로저를 활용한 private 변수, getter/setter

🚀 내부함수와 외부함수 내부함수는 외부함수의 변수에 접근하여 사용할 수 있습니다. 이는 스코프 체이닝 때문입니다. inner 함수 내부의 스코프에 title이 없기 때문에 가장 가까운 스코프인 outer의 title을 사용합니다. function outer() { // outer에 정의된 title const title = "coding everybody"; function inner() { // 외부 함수에 정의된 변수에 접근 가능함 console.log(title); } inner(); } outer(); 🚀 클로저(closure) function outer() { const title = "coding everybody"; return function () { console.log(title); }..
Programming Language/🟨 Javascript 2020. 7. 16. 04:27

이벤트 위임 + data- 속성과 pointer-events

이벤트 위임(event delegation) one two three 다음과 같은 버튼이 있고, DOM을 조작해서 각 버튼마다 클릭할 때마다 자신을 출력하도록 만들었습니다. const btns = document.querySelectorAll(".menu-btn"); btns.forEach((el) => el.addEventListener("click", function () { console.log(this); }) ); 그런데 이 경우, 각 아이템마다 이벤트를 걸어준 것인데, 지금은 버튼이 3개 뿐이지만, 버튼이 많아지면 그 버튼의 갯수만큼 이벤트 리스너를 달아주게 되는 것이니 페이지 성능에 좋지 않은 영향을 미치게 될 것입니다. 이 경우 위 버튼들을 감싸고 있는 부모 태그에 이벤트 위임을 해줌으로써..
Programming Language/🟨 Javascript 2020. 7. 15. 16:07

Optional chaining + ECMAScript, TC39, stage

Optional chaining The ?. operator functions similarly to the. chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. developer.mozilla.org React에서는 종종 다음과 같은 구문을 작성하곤 한다. data가 있으면 data.movie가 있는지 체크하고, 있다면 data.movie.medium_cover_image를, 없으면 "no image"를 출력한다. {data && data.movie ? ..
Programming Language/🟨 Javascript 2020. 4. 22. 02:31