분류 전체보기66 [nodeJS] Puppeteer로 간단한 검색 웹 매크로 만들기 Chrome 브라우저를 제어할 수 있게 해주는 Node.js 라이브러리인 Puppeteer로 사용자 인터랙션을 모방하거나 웹사이트 스크래핑 등 다양한 작업을 자동화할 수 있습니다. 이번에는 네이버에 검색어를 입력하여 스크린샷으로 저장하는 매크로를 만들어 보겠습니다. 1. Puppeteer 설치하기 npm install puppeteer 2. 크롬 브라우저에서 네이버 접속하기 * puppeteer.launch() : 새 브라우저 인스턴스를 생성 * puppeteer.newPage() : 함수로 새 탭 열기 * page.goto() : 특정한 링크로 이동 const puppeteer = require('puppeteer'); async function run() { const browser = await p.. 2023. 9. 9. [Visual Studio Code 확장 프로그램] Turbo Console Log 디버깅 과정에서 콘솔 로그 메시지를 자동으로 작성해주는 기능을 제공하는 Turbo Console Log를 소개하겠습니다. 1. 자동 로그 메시지 삽입 : 변수를 선택하거나 마우스 오버한 후, 단축키(ctrl + alt + L 또는 ctrl + option + L)를 누르면 해당 변수에 대한 로그 메시지가 자동으로 생성됩니다. 생성된 로그 메시지는 선택한 변수에 대한 클래스 이름, 함수 이름 등의 정보와 함께 출력됩니다. 2. 모든 로그 메시지 주석 처리/제거 : Turbo Console Log 확장 프로그램이 삽입한 모든 로그 메시지를 한 번에 주석 처리하거나 제거하는 기능도 제공합니다. 단축키(alt + shift + c/d/u 등)로 간단히 실행할 수 있습니다. Turbo Console Log 확장 .. 2023. 9. 1. [nodeJS] JWT 인증하기 JWT(JSON Web Token)는 웹 애플리케이션에서 사용자 인증과 권한 부여를 위해 널리 사용되는 토큰 기반 인증 방식입니다. JWT는 서버와 클라이언트 간의 안전한 정보 전달을 가능하게 하며, 토큰 자체에 필요한 정보를 포함하여 사용자 식별 및 권한 확인을 수행합니다. 1. jsonwebtoken 모듈 설치하기 npm install jsonwebtoken 2. JWT 토큰 생성하기 jwt.sign() 함수를 사용하여 토큰 생성 첫 번째 인자로 토큰에 포함될 데이터(payload)를 전달하고, 두 번째 인자로 시크릿 키를 전달 시크릿 키는 서버와 클라이언트 간에 공유되어야 하며, 토큰의 유효성 검사에 사용 const express = require('express'); const jwt = requ.. 2023. 8. 31. [nodeJS] Node.JS 서버의 사용량 제한 구현하기 Node.js 서버에서 사용량 제한을 구현하는 것은 보안 및 성능 관리 측면에서 중요합니다. 사용량 제한을 통해 악의적인 요청이나 과도한 부하로부터 서버를 보호하고, 리소스를 효율적으로 관리할 수 있습니다. 1. Express-rate-limit 모듈 설치하기 사용량 제한을 구현하기 위해서는 express-rate-limit 모듈을 설치 필요 Express.js 애플리케이션에서 미들웨어로 사용되며, 요청당 허용되는 최대 요청 수와 시간 간격 등 다양한 설정 옵션 제공 npm install express-rate-limit 2. 기본적인 사용량 제한 설정하기 * windowMs 옵션: 시간 간격을 밀리초 단위로 지정 * max 옵션: 해당 시간 간격 내에 허용되는 최대 요청 수 const express =.. 2023. 8. 30. [nodeJS] Node.JS 서버에 CORS 허용 설정하기 CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 도메인의 리소스에 접근하는 것을 허용하는 정책입니다. 기본적으로 브라우저는 보안상의 이유로 다른 출처의 리소스 요청을 차단합니다. 따라서 서버 측에서 CORS를 활성화하려면 특정 도메인이나 출처에서 온 요청을 허용해야 합니다. 1. Express.js를 사용한 기본 서버에서 CORS 설정 모든 출처에 대한 CORS 허용하기 npm install cors const express = require('express'); const cors = require('cors'); const app = express(); // 미들웨어로 CORS 활성화 app.us.. 2023. 8. 29. [인공지능 그림그리기] 구글 Autodraw 사용하기 그림을 잘 못그리는 사람도 금손으로, 대충 그린 그림도 작품으로 만들어 주는 인공지능 그림그리기 사이트 오토드로우(AutoDraw)에 대해 알려드릴게요. https://www.autodraw.com/ AutoDraw Fast drawing for everyone. AutoDraw pairs machine learning with drawings from talented artists to help you draw stuff fast. www.autodraw.com 1. [Start Drawing] 버튼을 눌러 드로잉 페이지로 이동합니다. 2. 캔버스에 원하는 그림을 그리면 인공지능이 그림을 빠르게 해석하고 완성된 그림의 형태를 만들어줍니다. 3. 원하는 그림을 선택하면 대충 그린 그림이 완성된 그림으로 .. 2023. 8. 19. [크롬확장프로그램] 반응형 웹 테스트 프로그램 (Responsive Viewer) 반응형 웹을 개발할 때 테스트 할 수 있는 방법을 소개하려고 합니다. Chrome 웹 스토어에서 여러 화면을 한 번에 보여주는 반응형 테스터 (Responsive Viewer)를 설치하겠습니다. https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb 반응형 테스터 (Responsive Viewer) 확장 프로그램 설치하기 1. Chrome 웹 스토어로 이동하여 우측 상단 검색창에 "Responsive Viewer"를 입력하고 검색합니다. 2. Responsive Viewer 확장 프로그램 카드를 찾아 "확장 프로그램에 추가" 버튼을 클릭합니다. 3. 추가할 경우 Chrome에 저장되는 권한을 확.. 2023. 8. 10. [GitHub] 마크다운 Note 구문 변경 GitHub 마크다운 Note 구문이 바뀌었다고 합니다. https://github.com/orgs/community/discussions/16925 [Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925 Alerts are an extension of Markdown used to emphasize critical information. On GitHub, they are displayed with distinctive colors and icons to indicate the importance of the content. An example of ... .. 2023. 8. 9. [nodeJS] Node.JS와 mongoDB 연동 방법 MongoDB 서버를 이미 설치하고 실행한 경우를 전제로 작업 진행 1. MongoDB 패키지 설치 npm install mongodb 2. MongoDB 연결 생성 mongodb 패키지를 import하고, 연결 구성 정보 (username, password, hostname, port, database 이름)를 지정 MongoClient 객체를 만든 다음, connect() 함수를 호출하고 연결 URL과 구성 옵션을 전달하여 MongoDB 서버에 연결 const { MongoClient } = require("mongodb"); const uri = "mongodb+srv://username:password@cluster.mongodb.net/database"; const client = new Mon.. 2023. 8. 8. 이전 1 2 3 4 5 6 7 8 다음
