반응형 자바스크립트 - Javascript16 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로 form 태그 연속 submit 방지 코드, 중복 submit 방지 전체 코드 var isSubmit = false; function doubleSubmitCheck(form, e){ e.preventDefault(); if(isSubmit){ return false; }else{ form.submit(); isSubmit = true; return true; } } 설명 먼저, submit이벤트가 들어오면 preventDefault()로 form 태그의 기본 event를 중지시킵니다. (else부분 설명) submit을 하고, isSubmit 변수값을 true로 바꿔서 submit이 되었다고 체크합니다. (if부분 설명) 만일 submit이 한번 된 상태라면 submit을 따로 수행하지 않습니다. #Javascript https://devscb.com/post/191 .. 2023. 11. 1. Xpath란, 크롬 개발자도구에서 Xpath 확인하기 Xpath란, 크롬 개발자도구에서 Xpath 확인하기 Xpath란 selenium을 사용하거나 웹개발 등을 할 때 웹사이트의 HTML element를 선택해야할 때가 있습니다. 이럴 때, Xpath를 사용할 수 있습니다. 명확한 정의로는 XPath는 XSLT 표준의 주요 요소이며, XPath는 XML 문서의 요소 및 속성을 탐색하는 데 사용될 수 있도록 하여 항목을 배치하고 처리하는 방법을 기술하는 언어입니다. XPath는 XML 문서의 노드를 정의하기 위하여 경로식을 사용하며, 수학 함수와 기타 확장 가능한 표현들이 있습니다. Xpath 예제 아래와 같은 XML문서가 있다고 칩시다. Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K. R.. 2023. 3. 24. [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. node.js에서 selenium 사용하기 (chrome) node.js에서 selenium 사용하기 (chrome) 크롬 웹 브라우저 설치 selenium을 사용하기 위해서는 웹 브라우저가 설치되어 있어야 합니다. 크롬이 가장 많은 점유율을 차지하기에 크롬을 기준으로 설명합니다. 크롬 웹 브라우저 설치 주소는 아래와 같습니다. https://www.google.com/chrome/ nodejs 설치 node.js에서 selenium을 사용할 것이므로 node.js를 설치해야겠지요? ( https://nodejs.org/ ) 에서 node js를 설치합니다. 최신버전은 버그가 좀 있을 수 있으니, 안정적인 LTS버전을 씁시다. node.js에서 설치파일을 다운받아 실행하여 nodejs를 설치해줍니다. 프로젝트 만들기 1. 명령프롬프트 (cmd)를 켜줍니다. 키보.. 2022. 11. 27. 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. [vue3 + vuetify3 + electron] 데스크톱 앱 만들기 개발환경 구성 개인적으로 데스크톱앱을 만들일이 생겼습니다. 윈도용 데스크톱이 필요하였는데, 보통 winform 을썼었지요. 그러나 winform은 너무 오래된기술입니다. Microsoft진영에서 미는 것은 .NET이고, 데스크톱 앱을 만들려면 WPF 또는 UWP를 사용한다고 합니다. 하지만 이것도 좀 오래된것 같아 썩 맘에 들지는 않습니다. 그러면 요새 최신화된 트렌드는 무엇이냐 하면 electron을 꼽을 수 있지 않나싶습니다. electron은 특히, atom, visual studio code , slack, twitch 등에서 electron 을 이용해서 데스크톱앱을 만들어서 유명해졌습니다. electron 은 node.js기반이고, view는 HTML / CSS를 이용하여 개발, 그리고 자체내장 브라우저를 통.. 2022. 8. 18. react.js란, react란, react 시작하기, react 설치, react 기초, react 특징 react.js(react)란 리액트(React.js 또는 ReactJS 또는 React라고도 함)는 UI 컴포넌트를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프론트 엔드 자바스크립트 라이브러리입니다. 2013년 5월 29일에 0.3.0 으로 처음 출시(릴리즈) 되었습니다. 메타(구 페이스북) 중심으로 react 개발자 커뮤니티에 의해 유지보수되고 있으며,아파치 라이센스 2.0 을따르고 있습니다. React는 Single Page Application 또는 모바일 애플리케이션 개발로 활용될 수 있습니다. 그러나 React는 상태 관리 및 그 상태를 DOM에 렌더링하는 것에만 관심이 있으므로 React를 기반으로 한 프로그램을 개발하려면 일반적으로 라우팅을 위한 추가 라이브러리나 특정 클.. 2022. 2. 3. javascript - event bubbling이란, event capturing이란, event trickling이란 (이벤트 버블링이란, 이벤트 캡처링이란, 이벤트 트리클링이란) 가끔씩 프론트엔드 면접에서 이벤트 버블링, 캡쳐링에 대해 물어보시는 분이 있어 용어 정리해보고자 합니다. 이벤트 버블링과 캡처링은 HTML DOM API에서 이벤트 전파 방식으로, 다른 요소 내부의 요소에서 이벤트가 발생하고 두 요소 모두 해당 이벤트에 대한 핸들을 등록한 경우, 이벤트를 수신하는 순서에 대한 특성입니다. event bubbling 이란 (이벤트 버블링이란) 이벤트는 먼저 가장 안쪽 요소에 의해 이벤트 핸들러가 처리된 후 외부 요소로 이벤트를 전파시켜 외부 요소의 이벤트 핸들러를 실행 시키는 것입니다. 예시를 들어 설명해보겠습니다. 아래와 같은 코드가 있다고 봅시다. 가장 안쪽의 id3 객체를 클릭하면 alert창으로 3만뜨는게 아니라, 2, 1도 뜨게 됩니다. 111 222 333 id.. 2022. 1. 4. 이전 1 2 다음 반응형
