프론트 개발 블로그

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

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..

https://typescript-kr.github.io/pages/tutorials/ts-for-oopers.html 내가 이해하기 위해 정리한 TS for OOP Programmers(en) TypeScript는 C#, Java와 같이 정적 타이핑을 사용하는 언어에 익숙한 프로그래머들에게 인기 있는 선택입니다. 👉🏻 정적 타이핑이란? 타입(Type)을 체크해주는 것을 나누어 설명한 것. 정적 타이핑(Static Typing) : 컴파일 시간에 체크 예) C#, Java 동적 타이핑(Dynamic Typing) : 런타임 시간에 체크 예) JavaScript, Python 해당 페이지는 기존에 C#, Java를 사용하는 프로그래머들을 위해 기존의 OOP 언어와 TypeScript를 다른점을 설명합니다...

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..

1분코딩 - 애플 웹사이트 인터랙션 클론! 인강 정리 1월 11일 월요일 키워드 1. 즉시 실행 함수 IIFE 2. ES6 문법 : arrow function / let, const 키워드 / 템플릿 문자열 3. load, DOMContentLoaded 차이 4. position: sticky 코드 작업 내용 1. 각 섹션의정보를 sceneInfo 배열에 넣는다. const sceneInfo = [ { type: 'sticky', heightNum: 3, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-i') } } ]; type : 'sticky' or 'normal'로 각 섹션마다 나타나는 애니메이션들을 제어한다...

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 내에서, ..