본문 바로가기
반응형

#script6

[JavaScript] preventDefault 란, event.preventDefault, preventDefault() [JavaScript] preventDefault 란, event.preventDefault, preventDefault() 자바스크립트 메소드중 preventDefault 라는 녀석이 있습니다. 이 메소드는 브라우저의 기본 동작을 실행하지 않도록 하는 메소드입니다. 기본적인 동작이 정해져 있는 대표적인 예시는 다음과 같은 것들이 있습니다. 1) checkbox태그 클릭시 체크가 됨. 2) a태그 클릭시 href 속성에 적힌 url로 이동 3) form 태그 안 submit 버튼클릭시 action 속성값으로 파라미터 전달하면서 페이지 이동 예를들어 아래와 같은 html 파일을 생성하여 수행해봅시다. google 각 태그들에 대해 마우스 클릭을 하면 아래와 같이 반응을 하게 됩니다. 이러한 동작을 막기 위.. 2023. 3. 22.
javascript - event bubbling이란, event capturing이란, event trickling이란 (이벤트 버블링이란, 이벤트 캡처링이란, 이벤트 트리클링이란) 가끔씩 프론트엔드 면접에서 이벤트 버블링, 캡쳐링에 대해 물어보시는 분이 있어 용어 정리해보고자 합니다. 이벤트 버블링과 캡처링은 HTML DOM API에서 이벤트 전파 방식으로, 다른 요소 내부의 요소에서 이벤트가 발생하고 두 요소 모두 해당 이벤트에 대한 핸들을 등록한 경우, 이벤트를 수신하는 순서에 대한 특성입니다. event bubbling 이란 (이벤트 버블링이란) 이벤트는 먼저 가장 안쪽 요소에 의해 이벤트 핸들러가 처리된 후 외부 요소로 이벤트를 전파시켜 외부 요소의 이벤트 핸들러를 실행 시키는 것입니다. 예시를 들어 설명해보겠습니다. 아래와 같은 코드가 있다고 봅시다. 가장 안쪽의 id3 객체를 클릭하면 alert창으로 3만뜨는게 아니라, 2, 1도 뜨게 됩니다. 111 222 333 id.. 2022. 1. 4.
lodash란, javascript library lodash, underscore, 로다쉬, 로다시, 로다시란 lodash(로다시, 로다쉬)란 Lodash(로다시)는 함수형 프로그래밍 패러다임을 이용하여 공통 프로그래밍 작업에 대한 유틸리티 기능을 제공하는 자바스크립트 라이브러리입니다. lodash는 2012년에 underscore.js 로부터 포크된 프로젝트입니다. 공식홈페이지는 lodash.com 이며, MIT 라이센스 입니다. repository 주소는 https://github.com/lodash 입니다. lodash 기능 유틸리티 - 유형 결정 및 수학 연산 단순화와 같은 공통 프로그래밍 작업을 단순화하는 데 사용됩니다. 기능 - 바인딩, 장식, 구속, 스로틀링, 디바운싱, 카레, 포인터 변경을 단순화합니다. 문자열 - 트리밍, 대문자 변환, camel 케이스 등 기본적인 문자열 연산을 수행하기 위한 변.. 2021. 12. 20.
npx란, npx이란, npx 사용이유, npx 사용하는 이유, npx 설치법, npx설치방법, npx 사용방법, npx사용법 npx란, npx이란 npx는 명령줄에서 직접 로컬로 설치된 명령줄 도구를 실행할 수 있도록 npm에서 제공하는 명령어/툴입니다. npx는 npm@5.2.0에서부터 사용할 수 있게 되었습니다. Node.js 도구를 전역에 설치하지 않고도 실행할 수 있게 해줍니다. npx 사용하는 이유, npx사용이유 예를 들어 mocha, gulp, react-native 는 일반적으로 npm의 -g 플래그를 사용하여 전역적으로 설치됩니다. 그러나 전역적으로 설치된 패키지에는 두 가지 주요 문제가 있습니다. 다른 프로젝트는 동일한 패키지의 다른 버전에 의존할 수 있습니다. npx 설치방법 먼저 아래 명령어로 npx가 설치되어있는지 확인해봅시다. $which npx 설치되지 않았다면, 아래 명령어를 통해 npx를 간단히 .. 2021. 11. 30.
puppeteer란, puppeteer 사용법, puppeter 사용법, 웹자동화, 웹스크래핑, 웹사이트 스크래핑, 크롤링, 셀레늄, selenium, 매크로, 자바스크립트 매크로, 퍼피티어 puppeteer란? (퍼피티어란?) puppeteer(퍼피티어)는 dev tools 프로토콜을 통해 크롬을 제어할 수 있는 하이레벨 API를 제공하는 노드 라이브러리입니다. puppeteer 기본적으로 headless(UI가 없는상태)로 실행되지만, 비헤드리스 크롬 또는 크로미움으로 실행되도록 수행도 가능합니다. 주로 웹자동화, 크롤링을 위해 사용하는 라이브러리이며, selenium과 비슷한 역할을 한다고 생각하면 됩니다. 다만 selenium(셀레니움)과 다른 점은 selenium은 다양한 언어로 사용할 수 있는 반면, puppeteer는 javascript 만으로 코드를 작성할 수 있습니다. selenium보다 더 나은점은 좀 더 상세한 조작 및 성능 측정 등이 가능하다는 점입니다. 브라우저에서 수.. 2021. 11. 28.
typescript (타입스크립트) 개발후기 typescript "타입이 있어 안전한 프로그래밍이 가능한 자바스크립트" 장점 1. 자바스크립트에서 type이 추가되었다. 빌드타임에 미리 에러를 감지할 수 있어 개발효율을 높인다. 2. 좀 더 OOP 스럽게 코딩이 가능하다. interface, class, inheritance 등을 지원하기에, javascript 보다 더 oop 스럽게 코딩이 가능하다. javascript에서는 이러한 부분을 지원을 제대로 안하여 약간 야매식(?) 으로 oop 구현을 했었는데, typescript는 이를 언어차원에서 커버해준다. 3. 자동완성 기능 사용가능 : type추론이 가능하기때문에 내가 사용하려는 class의 instance의 member / method 호출에 대한 자동완성기능을 사용할 수 있다. 매우 유용.. 2021. 9. 8.
반응형