본문 바로가기
반응형

#자바스크립트13

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.
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.
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.
jQuery(제이쿼리) ajax와 fetch와 Axios 차이점 비교, jquery ajax vs fetch vs axios Ajax란? 전통저인 Ajax는 Asyncronous Javascript and XHTTPREQUEST(XHR)를 가리키며, http 통신에서의 비동기적으로 데이터를 주고받는 방식의 하나입니다. 데이터가 업데이트 될 때마다 페이지 전체를 받아오는 대신, 화면에서 표시되는 일부 필요한 부분의 데이터에 대해서만 받아와서 업데이트하기 위해 도입되었습니다. 오래전에는 서버에서 데이터를 받아오는데 XML이 사용되었으나, 현재는 기본적으로 json 형식으로 받습니다. 전통적인 ajax의 사용코드는 아래와 같습니다. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === xhr.DONE) { if (xhr... 2021. 11. 20.
Angular vs AngularJS: Angular와 AngularJS의 차이 Angular와 AngularJS는 무엇인가? AngularJS : 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 Angular : 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크. AngularJS의 재작성된 버전입니다. SPA (Sinlge Page Application)을 쉽게 만들기 위해 AngularJS가 만들어졌고, AngularJS가 재개발되어 2016년부터 Angular로 진화한것이라고 말씀드릴 수 있습니다. Angular와 AngularJS의 차이점은 무엇일까? Angular vs AngularJS의 중요한 구별점 중 하나는 AngularJS는 JavaScript 기반인 반면, Angular는 TypeScript 기반이라는 것입니다. 이 두 프레임워.. 2021. 11. 10.
typescript 시작하기, 설치하기, 개발하기, 프로젝트생성, 컴파일, 실행하기, 핸드북 type script란? "타입이 존재하는 Javascript 프로그래밍 언어" - 자바스크립트의 수퍼셋으로, ECMA스크립트의 최신 표준 지원 - 정적인 언어로 컴파일 시간에 타입을 검사 - 아파치 라이센스 오픈소스 프로그래밍 언어 장점 - 강력한 개발 도구지원 - 강력한 타입제공으로, 대규모 애플리케이션 개발에 용이 - 다양한 자바스크립트 라이브러리와의 호환성 목차 개발환경 구성 (Windiws 10) - Node.js 설치 ( https://nodejs.org/ko/ ) - 비주얼 스튜디오 코드 설치 ( https://code.visualstudio.com/download ) - 프로젝트 생성 ※ 윈도 기반으로 설명합니다. 1. Node.js 설치 ( https://nodejs.org/ko/ ) 에.. 2021. 10. 27.
반응형