본문 바로가기
반응형

#javascript17

cheerio 사용법, node cheerio, cheerio란?, cheerio를 사용한 웹크롤링, cheerio 예제, web scraping cheerio란? cheerio란 한마디로 표현하면 "HTML/XML 을 파싱하고 쉽게 조작할 수 있는 JS 라이브러리" 입니다. cheerio 장점 빠르다. 서버(node)/클라이언트(브라우저) 환경 모두에서 사용가능. jquery 와 비슷한 사용법 $(cssquery)와 같은 문법으로 element를 선택하고, 쉽게 조작할 수 있습니다. jquery 를 사용하셨더라면 쉽게 사용하실 수 있고, jquery에서 핵심부분을 가져와 구현된 라이브러리이기 때문에 안정성이 검증되었습니다. cheerio 설치 cheerio 는 여타 다른 js 와 마찬가지로, 아래와 같이 js 패키지매니저(npm/yarn/pnpm)를 사용하여 설치할 수 있습니다. npm install cheerio yarn add cheerio .. 2023. 11. 13.
vue.js란? vue.js란? (pronounced /vjuː/, like view) vue.js란 한마디로 표현하면 "웹 화면 개발을 쉽고 빠르게 해주는 프레임워크"라고 할 수 있습니다. 좀 더 자세히 설명해보겠습니다. 뷰(Vue, 발음 /vjuː/, like view)는 웹 UI를 구축하기 위한 자바스크립트 프레임워크이다. 표준 HTML, CSS, 자바스크립트 위에 구축되며, UI를 효율적으로 개발할 수 있도록 돕는 선언형 및 컴포넌트 기반 프로그래밍 모델을 제공합니다. 예를 들어, vue의 예시코드로는 다음과 같습니다. import { createApp, ref } from 'vue' createApp({ setup() { return { count: ref(0) } } }).mount('#app') templa.. 2023. 11. 8.
[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.
vs code에서 node js 에서 mocha 시작하기 , visual studio code 에서 nodejs javascript mocha 테스트하기, 시작하기 vscode에서 대표적인 java/type script test framework인 mocha를 소개해보고자 합니다. 최종꼴은 아래와 같이, 내가 작성한 테스트에 대한 실행결과를 확인할 수 있는 화면을 보도록 하고자 합니다. 진행순서는 아래와 같습니다. 1. nodejs설치 2. vscode(visual studio code설치) 3. mocha 설치 4. vscode - mocha test explorer 플러그인설치 5. 샘플코드 작성 6. settings 설정 7. 샘플테스트코드 작성 8. 테스트 실행 1. nodejs설치, 노드 설치 아래 홈페이지에서 다운로드 하여 설치해줍니다. 메인화면에 바로 다운로드 버튼이 존재합니다. https://nodejs.org/ 개인적으로 최신버전보다는 LTS를 좀 .. 2022. 11. 26.
Javascript 패키지 매니저 pnpm, pnpm이란?, pnpm사용이유, pnpm 설치방법, pnpm 사용방법 Javascript 패키지 매니저 pnpm, pnpm이란?, pnpm사용이유, pnpm 설치방법, pnpm 사용방법 pnpm이란? (Performent Node Package Manager pnpm이란 한마디로 표현하면 "빠르고 효율적인 javscript 패키지 매니저"라고 할 수 있습니다. pnpm 설치방법 아래와 같이 터미널에서 npm 명령어를 통해 pnpm을 설치할 수 있습니다. npm install -g pnpm npm 설치방법법은 https://nodejs.org/ 에서 설치파일을 다운 받아 nodejs를 설치하면 같이 설치됩니다. 자세한 내용은 https://devscb.tistory.com/53 를 참고할 수 있습니다. pnpm 사용방법 대표적인 명령어들은 다음과 같은 명령어를 통해 pnpm.. 2022. 11. 2.
electron vue에서 Module not found: Error: Can't resolve 'os' 에러 문제 해결 발생한 문제 electron vue 에서 개발을 하다 아래 에러가 발생하면서 실행이 되지않는 문제가 발생하였다. Module not found: Error: Can't resolve 'os' in 'C:\Users\User\workspace\~' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fa.. 2022. 9. 7.
JWT란 (json web token 이란), JWT 사용하는 이유, JWT 동작방식 JWT란? JWT(JSON Web Token)은 당사자 간 정보를 안전하게 전송할 수 있는 방법을 JSON 객체로 정의한 개방형 표준(RFC 7519)입니다. 이 정보는 디지털 서명을 사용하기 때문에 데이터 위/변조를 검증할 수 있으며, 신뢰할 수 있습니다. JWT는 (HMAC 알고리즘으로) 비밀 또는 RSA 또는 ECDSA를 사용하는 공용키/비밀키 쌍을 사용하여 서명할 수 있습니다. 서명된 토큰은 그 안에 포함된 클레임의 무결성을 검증할 수 있는 반면, 암호화된 토큰은 그러한 클레임을 다른 당사자로부터 숨길 수 있습니다. 토큰이 공용/비밀 키 쌍을 사용하여 서명될 때, 서명은 또한 개인 키를 가진 당사자만이 서명한 당사자임을 인증할 수 있습니다. JWT를 사용하는 이유 - 권한 부여: JWT를 사용하기.. 2022. 1. 5.
javascript - event bubbling이란, event capturing이란, event trickling이란 (이벤트 버블링이란, 이벤트 캡처링이란, 이벤트 트리클링이란) 가끔씩 프론트엔드 면접에서 이벤트 버블링, 캡쳐링에 대해 물어보시는 분이 있어 용어 정리해보고자 합니다. 이벤트 버블링과 캡처링은 HTML DOM API에서 이벤트 전파 방식으로, 다른 요소 내부의 요소에서 이벤트가 발생하고 두 요소 모두 해당 이벤트에 대한 핸들을 등록한 경우, 이벤트를 수신하는 순서에 대한 특성입니다. event bubbling 이란 (이벤트 버블링이란) 이벤트는 먼저 가장 안쪽 요소에 의해 이벤트 핸들러가 처리된 후 외부 요소로 이벤트를 전파시켜 외부 요소의 이벤트 핸들러를 실행 시키는 것입니다. 예시를 들어 설명해보겠습니다. 아래와 같은 코드가 있다고 봅시다. 가장 안쪽의 id3 객체를 클릭하면 alert창으로 3만뜨는게 아니라, 2, 1도 뜨게 됩니다. 111 222 333 id.. 2022. 1. 4.
쓰로틀링, 디바운싱 (throttling, debouncing) 뜻, 쓰로틀링 사용이유, 디바운싱 사용이유, throttle, debounce javascript를 계속 공부하다보면 쓰로틀링, 디바운싱이라는 용어를 듣게 되는경우가 있습니다. 이것이 무엇인지 알아보겠습니다. 쓰로틀링 뜻, 디바운싱 뜻, throttling 뜻, debouncing 뜻 디바운스와 쓰로틀링 UI에서 발생하는 이벤트를 제어하는 방법입니다. 과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 하여 부하방지를 위해 쓰이는 방법입니다. 쓰로틀링 (throttling): 사용자가 이벤트를 수행하는 동안 지정된 시간 간격으로 함수를 호출하는 방법입니다. 디바운싱 (debouncing): 사용자가 특정 시간 동안 이벤트를 수행하지 않았을 때 함수를 호출하는 방법입니다. 쓰로틀링 쓰는 이유, 디바운싱 쓰는 이유, throttling 쓰는 이유, debouncing 쓰는 이유 이.. 2021. 12. 23.
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.
반응형