본문 바로가기

분류 전체보기68

[nodeJS] html-escaper 모듈을 이용하여 HTML 이스케이프 문자 파싱하기 HTML 이스케이프는 HTML 코드에서 특수 문자를 안전하게 처리하거나 보여주기 위해 필요합니다. 웹 페이지의 구조를 파괴할 수 있는 특수 문자를 방지하거나, 사용자가 입력한 데이터를 안전하게 표시할 수 있습니다. 1. html-escaper 모듈 설치 Node.js에서 HTML 이스케이프를 쉽게 다룰 수 있게 해주는 'html-escaper' 모듈 설치 npm install html-escaper 2. html-escaper 모듈 불러오기 import 구문을 이용해 'html-escaper' 모듈 불러오기 import {escape, unescape} from 'html-escaper'; 3. 이스케이프 처리하기 'html-escaper' 모듈의 'escape' 함수를 이용하여 HTML 문자열에서 특수.. 2023. 11. 11.
Bun 1.0과 ElysiaJS로 API 만들기 JavaScript와 TypeScript 개발을 위한 빠르고 통합적인 툴킷인 Bun 1.0과 Bun 웹 프레임워크인 ElysiaJS를 사용하여 API를 만드는 방법에 대해 알아보겠습니다. 1. Bun 설치하기 curl -fsSL https://bun.sh/install | bash -s "bun-v1.0.0" 또는 npm install -g bun 2. 새로운 프로젝트 생성하기 bun create elysia hi-elysia 3. bun이 설치된 디렉토리로 이동하기 cd hi-elysia 4. src/index.ts 파일 열고 코드 확인하기 import { Elysia } from 'elysia' const app = new Elysia() .get('/', () => 'Hello Elysia') .l.. 2023. 9. 25.
[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.

티스토리툴바