프론트 개발 블로그

https://itworldyo.tistory.com/136 submit 중복 클릭 막기 submit 중복 클릭 막기 중복 클릭으로 인해 가장 많이 발생하는 문제가 있습니다. 폼을 전송할 때 클릭이 2번 이상 발생하면서 폼이 2번 전송되어 2중으로 저장되는 경우입니다. 이러한 경우에 itworldyo.tistory.com 버튼 클릭 시 중복 이벤트 방지 // 클릭 시 버튼 비활성화 $('#btn').prop('disable', true); OR const btnElem = document.querySelector('#btn'); btnElem.addEventListener('click', function(e) { this.setAttribute("disabled", "disabled"); // Submi..

window.visualViewport window의 인터페이스의 visualViewport 읽기 전용 속성은 창의 시각적 뷰포트를 나타내는 visualViewport 객체를 반환한다. Chrome 61, Edge 79, Safari 48 이상 브라우저에서 호환 가능하다. * IE 는 No support // 예시 코드 function viewportResize() { const vh = window.visualViewport.height; const document = document.documentElement; document.style.setProperty('-vh', `${vh}px`); } https://developer.mozilla.org/en-US/docs/Web/API/Window/vi..

window.addEventListener('scroll', function() { ... }); 1. 갑자기 잘 작동하던 스크롤 이벤트 핸들러가 작동되지 않아서 당황함. 2. html 요소에 overflow-y: hidden; 을 준 것 때문이었음. 3. html 요소에서 해당 스타일을 삭제하니 해결됨. 이런 경우에 DevTools에 에러 혹은 경고 멘트도 나오지 않는다. 스크롤을 숨겼으니 이벤트가 동작되지 않는 것인데, 내가 html 요소에 class로 overflow: hidden 스타일을 준 것을 잊고 있어서 다른 코드에 문제 있는 줄 알고 코드 확인 하느라 시간을 할애했다. 😮‍💨 이외에도 스크롤은 화면보다 컨텐츠 요소가 클 경우 발생되기 때문에 높이 자체를 100%나 100vh 로 지정할 경우..

서적 [모던 자바스크립트 Deep Dive / 이웅모 지음] 정리 1. 즉시 실행 함수 2. 재귀 함수 3. 중첩 함수 4. 콜백 함수 5. 고차 함수 6. 순수 함수 / 비 순수 함수 1. 즉시 실행 함수 함수 정의와 동시에 즉시 호출되는 함수(IIFE, Immediately Invoked Function Expression) - 즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다. - 즉시 실행 함수는 ( ) 그룹 연산자로 감싸야 된다. → 그렇지 않으면 에러 발생 (function () { // 즉시 실행 함수 IIFE }()); - 그룹 연산자로 ( ) 로 묶은 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위함. 즉, 함수 리터럴을 평가해서 함수 객체를 생성 후 함수를 실행 하..

typeof typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다. console.log(typeof 42); // output: 'number' console.log(typeof 'text'); // output: 'string' console.log(typeof true); // output: 'boolean console.log(typeof undeclaredVariable); // output: 'undefined' console.log(typeof {a:1}); // output: 'object' console.log(typeof [1,2,3]); // output: 'obejct' console.log(typeof function() {}); // output: 'fun..

ES6 Class Properties 내에서 Arrow Function을 사용했을 때 Babel로 컴파일하면 아래와 같은 코드로 컴파일된다. (화살표 함수 사용 시 this 바인딩을 따로 해주지 않아도 되는 것을 테스트 하는 중이었다.) // ES6 Class Properties 내에서 arrow function 사용 handleClick = () => { console.log(this); alert(this.state.message); } // 위의 코드를 Babel 로 컴파일 시 "use strict"; var _this = void 0; handleClick = function handleClick() { console.log(_this); // undefined alert(_this.state.m..

동기적처리(Synchronous) 비동기처리의 이해 callback 함수 Promise Promise (resolve, reject, then, catch) Promise 단점 async / await 동기적 처리 (Synchronous) 동기적처리는 작업이 끝날때까지 실행되지 않고 기다리다가 끝나면 순차적으로 실행된다. (1코드가 끝나면, 2코드가 실행되고, 2코드가 끝나면 3코드가 실행되는...) 비동기적처리 (Asynchronous) 동시에 여러가지 코드가 실행될 수 있고, 기다리는 과정에서 다른 함수를 호출 할 수도 있다. (1코드, 2코드, 3코드가 동시에 실행되는...) 비동기처리가 필요할 때 - Ajax 요청을 해야 할 때 - 서버쪽에 파일을 읽을 떄 - 암호화/복호화 작업을 할 때 - 작업..

scope hoisting scope scope 는 변수 혹은 함수를 선언할 때 어디서부터 어디까지 유효한지 보는 범위이다. scope 는 global scope(전역 스코프), function scope(함수 스코프), block scope(블록 스코프) 범위로 나뉠 수 있다. global scope : 전역, 코드의 모든 범위에서 사용 가능 function scope : 특정 함수 코드 내에서 사용 가능 block scope : if, for, switch문 등에서 { } 중괄호로 감싸진 내부 안에서만 사용 가능하다. * const, let 선언에서만 가능 * const, let 선언을 사용했을 때와 var 선언 했을 때의 유효범위가 다르다! const, let 선언은 block scope 내에서, ..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식입니다. 구조 분해 할당 표현식 spread 연산자 rest 파라미터 비구조할당(구조분해 할당) 표현식 배열에서의 구조분해할당 표현식 1 2 3 4 5 6 // 기본 변수 할당 var foo = ['one', 'two', 'three']; var [one, two, three] = foo; console.log(one); // 'one' console.log(two); // 'two' console.log(three); // 'three' 선언에서 분리한 할당 1 2 3 4 5 var c, d; [c, d] = [1, 2]; console.log(c); // 1 console.log(d); // 2 기본..

해당 내용들은 패스트캠퍼스 [올인원 패키지 : React.js] 강의 내용 일부입니다. 값 가져오기 OR 연산자 Array.prototype.includes() 화살표 함수 사용하는 방법 특정 값을 반환하는 경우 if문 사용방법 switch case문 사용방법 객체 활용방법 값 가져오기 OR 연산자 : OR 연산자로 값과 일치하면 return 시킨다. 1 2 3 4 5 function isAnimal(text) { return text === '고양이' || text === '개' || text === '거북이'; }; console.log(isAnimal('고양이')); // true console.log(isAnimal('사람')); // false Array.prototype.includes() :..