Frontend/JavaScript30 [ 자바스크립트(JavaScript) ] addEventListener의 passive option을 알아보자 📍 addEventListener의 passive option을 알아보자 touchstart 이벤트를 이용해 IOS에서 기존 swipe gesture를 block하고 custom swipe를 적용하던 중 console 창에서 Violation을 마주했다. (Violation은 chrome browser 혹은 web에서 에러를 나타내는 것이 아니라 앱 개선에 도움이 되는 경고를 의미한다.) [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event... 해당 코드는 다음과 같다. const handleTouchStart = useCallback((event: TouchEvent) => { const { client.. 2023. 10. 16. [ 자바스크립트(JavaScript) ] e.preventDefault()와 e.stopPropagation()을 알아보자. 📍 e.preventDefault()와 e.stopPropagation()을 알아보자. e.preventDefault()와 e.stopPropagation()은 자바스크립트의 이벤트 핸들러라는 공통점이 있지만, 차이점도 있다. e.preventDefault()는 이벤트의 기본 동작이 발생하지 않도록 하기 위해 이벤트 객체에서 호출하는 method이다. DOM요소는 저마다 기본 동작이 있다. 예를 들어 anchor 태그를 클릭하면 href에 지정된 링크로 이동하고, 를 클릭하면 체크모양이 생기거나 없어진다. 그리고 form 태그에서 submit을 하게되면 refresh가 일어난다. 이럴 때 e.preventDefault()를 사용하면 지정된 링크로 이동하거나 체크모양을 생기거나 없애는 동작 그리고 refr.. 2023. 3. 28. [ 자바스크립트(JavaScript) ] default parameter에 falsy value를 넘겨주면 어떻게 될까? 📍 default parameter에 falsy value를 넘겨주면 어떻게 될까? ES6 feature 중 하나인 default parameter는 function parameter에 값이 전달되지 않거나 undefined인 경우 default parameter를 기본값으로 사용하는 방법이다. 어느날 .env와 함께 default parameter를 사용하다 undefined를 제외한 falsy한 값(false, 0, '', null, etc..)을 넘겨주면 default parameter가 적용이 안 된다는 점을 찾았고, 블로그에 남기자는 생각을 했었다. 그럼, 예시를 살펴보자. function greet(name = "ted") { console.log(`Hello, ${name}!`); } gre.. 2023. 2. 23. [ 자바스크립트(JavaScript) ] Pre & Post scripts를 알아보자 📍 Pre & Post scripts를 알아보자 SEO 최적화를 위해 Sitemap 작업 중 package.json 파일 내부에 postbuild script를 생성하는 작업이 있었다. 이전까지는 pre와 post prefix를 사용하는 일이 거의 없어 이것들이 하는 역할을 자세히 알지 못했는데, 이번에 알아보고자 npmjs 공식문서를 살펴봤다. 공식문서에서는 pre와 post scripts를 다음처럼 정의하고 있었다. To create "pre" or "post" scripts for any scripts defined in the "scripts" section of the package.json, simply create another script with a matching name and ad.. 2023. 1. 3. [ 자바스크립트(JavaScript) ] 알아두면 도움되는 npm commands 📍 알아두면 도움되는 npm commands 이번에 알아볼 npm 명령어는 npm run ...처럼 매번 사용되는 것은 아니지만, 마우스로 조작하기 번거로울 때 도움되는 명령어들이다. npm docs [package-name]: 해당 패키지의 docs를 볼 수 있다. 예를 들어 npm docs lodash를 입력하면 lodash docs를 볼 수 있다.(해당 패키지가 프로젝트에 설치되어 있지 않아도 볼 수 있다.) npm repo [package-name]: 해당 패키지를 GitHub에서 볼 수 있다. 예를 들어 npm repo lodash를 입력하면 GitHub의 lodash/lodash페이지를 볼 수 있다. (해당 패키지가 프로젝트에 설치되어 있지 않아도 볼 수 있다.) npm outdated: pa.. 2022. 12. 13. 이전 1 2 3 4 ··· 6 다음
