본문 바로가기

Web/JavaScript5

[JavaScript] 자바스크립트 모듈 시스템을 마스터 해보자 들어가며 '시작은 미약했으나, 그 끝은 창대하리라' 이 말은 딱 자바스크립트를 위한 말이 아닐까 싶습니다. 초창기 자바스크립트가 생겨났을 때, 이렇게 대표적인 언어로 발전할 것이라고 예상을 했을까요? 자바스크립트는 탄생 이래로 정말 많은 변화와 발전과정을 거쳐왔습니다. 자바스크립트의 탄생부터 FE 세계에 있던 분이 아니라면, 저처럼 타입스크립트 시대부터 제데로 공부를 시작한 분이라면, JS의 모듈 시스템에 대해 정확히 이해하고 있기가 쉽지 않습니다. ts 파일을 직접 실행시킬 때 import 문제로 실행이 되지 않아 애먹은 적이 있었죠. { "compilerOptions": { "target": "es5", "module": "commonjs", } } tsconfig 의 compilerOptions >.. 2022. 8. 6.
[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 무리를 주지 않기 위해 사용되곤 합니다. 일종의 최적화라고 볼 수 있습니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉,.. 2021. 6. 5.
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란? preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이.. 2020. 1. 19.
[JS] Arrow Function / 화살표 함수란 ❓ 화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun.. 2020. 1. 8.
[JS] 자바스크립트 함수 종류 / 화살표 함수 차이점 ❓ 방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v.. 2020. 1. 6.