본문 바로가기

Javascript40

[JS] 자바스크립트 좋은 습관 (object, function, array) 자바스크립트를 다루는데에 있어서 좋은 습관들이 있어 공유드립니다. 코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야합니다. Object와 Class를 다룰 때 Getter와 Setter를 쌍으로 이루자 우리는 Getter와 Setter를 반드시 쌍으로 다뤄야 합니다. Getter가 없으면 속성을 읽을 수 없으므로 사용되지 않습니다. 예를 들어 아래처럼 사용하기 보다는 const obj = { set a(value) { this.val = value; } }; 아래처럼 사용하는 것이 이상적입니다. const obj = { set a(value) { this.val = value; }, get a() { return this.val; } }; 배열을 여닫기 전에 줄바꿈 하기 const arr =.. 2021. 2. 7.
가속 animation javascript animation 가속과 감속을 자유롭게 이루어내는 javascript 가속도에 대한 코드. .smoothBox { position:fixed; left:0; top:300px; width:0; height:200px; background:hotpink; } const box = document.querySelector('.box'); const smoothBox = document.querySelector('.smoothBox'); const accelearation = 0.1; let delay = 0; let requestAnimationId; let animState; let approx; const anim = () => { delay = delay + (pageYOffset - delay) *.. 2021. 2. 2.
[JS] Snowpack3 - ESM의 시대가 곧 도래합니다. ES 모듈인 ESM은 자바스크립트(ES) 모듈을 의미합니다. 최신 브라우저가 지원합니다. IE를 삭제하는 한 문은 상당히 열려 있습니다. ESM 이전의 JavaScript 프로젝트 상황은 다음과 같습니다. npm에서 사용해야하는 패키지가 있습니다. package.json, npm install 등을 사용하여 미리 npm에서 설치합니다. 어떤 이유로 (개발자의 편의를 위해) 잘못된 ESM 인 import 문을 작성하고 로컬 node_modules 폴더에서 패키지를 가져 오는 것으로 가정합니다. 우리 번들러는 잘못된 import를 어떻게 처리해야하는지 알게 될 것입니다. Babel 및 다른 대안들을 실행하는 것과 같이 어쨌든 우리가 원하는 다른 작업을 수행한다는 말이 있기 때문에 이것은 모두 괜찮습니다. 우.. 2021. 1. 23.
[JS] 자바스크립트 프레임워크 내부 파헤치기 4가지 JavaScript는 이제 많은 라이브러리와 프레임워크가 파생된 매우 인기있는 프로그래밍 언어입니다. 하지만 상위 생태계가 어떻게 진화하든 바닐라 자바스크립트 없이는 불가능합니다. 여기에서는 프로그래머의 바닐라 JavaScript 기술을 테스트하기 위해 4개의 JavaScript 인터뷰 질문을 선택했습니다. 1. Array.prototype.map 구현 Array.prototype.map 메서드를 직접 구현하는 방법은 무엇입니까? lodash를 참조하면 다음과같은 맵 함수를 작성할 수 있습니다. function map(array, iteratee) { let index = -1 const length = array == null ? 0 : array.length const result = new Arra.. 2021. 1. 3.