728x90
728x90
자바스크립트에서는 syntactic sugar라는 개념이 있는데, 이는 코드 작성을 더 간결하고 쉽게 만들어주는 문법적 편의 기능을 의미한다. 이를 잘 활용하면 쉽고 잘 읽히는 코드를 작성할 수 있다. Class class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, I'm ${this.name}.`); } } 프로토타입 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log(`Hello, I'm ${..
⚽️ import (정적 로딩) import 구문은 ES6(ECMAScript 2015)부터 도입된 정적인 모듈 로딩 구문이다. import 구문은 모듈을 정적으로 로딩하며, 코드가 실행되기 전에 모듈 로딩이 이루어진다. 따라서 import 구문은 항상 모듈 로딩을 가장 위로 올려서 먼저 실행되고, 모듈 로딩은 브라우저 환경에서는 비동기적으로 이루어진다. import는 필요한 부분만 가져올 수 있기 때문에 성능 최적화에 있어서 require보다 뛰어나다. (트리 쉐이킹) // 정적 로딩 (ES6) import { add } from './math'; 🏐 require (동적 로딩) require 구문은 Node.js에서 사용되는 CommonJS 모듈 시스템의 모듈 로딩 구문이다. require 구문은 동..
소수를 구하기 위한 알고리즘으로 에라토스테네스의 체가 있다. 2부터 시작하여 2의 배수들을 지워나가고, 그 다음엔 3의 배수, 그 다음엔 5의 배수 (4는 2의 배수로 이미 소수 후보에서 제외되었다)를 지워가며 소수를 추려내는 방법이다. const eratos = (n) => { const arr = new Array(n + 1).fill(true); arr[0] = false; arr[1] = false; for(let i = 2; i
e2e 테스트는 End to End 테스트로, 유닛 단위 테스트와는 정 반대로 전체적인 테스트를 의미한다. 웹페이지는 자주 수정이 일어날 수 있기 때문에 이런 전체적인 테스트가 어렵다고 생각했었는데, 이번에 Cypress와 Cypress Studio를 사용해보고 생각이 바뀌었다. 이렇게 손쉽게 테스트를 작성할 수 있다면, 몇 번이라도 테스트를 세팅할 수 있을 것 같다! 🌧️ Cypress 설치하기 npm i -D cypress 🌧️ Cypress 실행하기 npx cypress open 설치와 실행 모두 위와 같이 간단하게 할 수 있다. 실행을 따라가면, spec을 생성하고 이곳에서 직접 화면을 보며 테스팅을 진행할 수 있다. 그렇지만, 테스트 코드는 직접 작성해야 한다. 그러나, Cypress에서는 HT..
Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..
때로는 보안과 같은 이유로 input에 붙여넣기가 허용되지 않을 수 있다. 이 경우, 붙여넣기 이벤트를 탐지하고 해당 이벤트가 제대로 작동하지 못하도록 해주어야 한다. 이번엔 이를 어떻게 구현할 수 있을지 알아보았다. 다음과 같이 input이 있다. 이 input에 붙여넣기를 허용하지 않기 위해서는 어떻게 해야할까? eventListner를 사용하면, 이를 간단하게 구현할 수 있다. const input = document.querySelector("input"); input.addEventListener('paste', (event) => { event.preventDefault(); alert("!") }); paste 이벤트가 발생하였을 때, 기존의 이벤트를 없애고 알림창을 띄운다. 만약 당신이 위..