본문 바로가기

프론트엔드111

[HTTP 보안]sanitize [HTTP 보안]sanitizeHTTP 보안 기법 중 하나인 **sanitize(입력값 정화)**는, 사용자가 제공한 입력 데이터를 검증하고 정리하여 웹 애플리케이션이 이를 안전하게 처리할 수 있도록 하는 보안 기법입니다. 이는 주로 SQL 인젝션, 크로스 사이트 스크립팅(XSS), 경로 조작 등 다양한 공격 벡터로부터 애플리케이션을 보호하기 위해 사용됩니다.Sanitize의 주요 목적사용자 입력에 포함될 수 있는 악성 코드나 예상치 못한 데이터를 제거하거나 수정.애플리케이션에서 사용되는 데이터의 무결성과 보안을 유지.악성 입력값을 사용하여 시스템을 공격하는 것을 방지.Sanitize가 적용되는 주요 영역HTML 및 JavaScript (XSS 방지)HTML 코드나 JavaScript 코드에서 악성 스크.. 2024. 12. 29.
[HTTP 기본]curl [HTTP 기본]curl  curl은 데이터를 서버와 주고받기 위한 명령줄 기반의 도구이자 라이브러리입니다. 다양한 프로토콜을 지원하며, 파일 다운로드, API 호출, 데이터 전송 등 네트워크와 관련된 작업을 간단히 수행할 수 있습니다. "Client URL"의 약자로, 주로 HTTP 요청을 테스트하거나 API와 상호작용하는 데 사용됩니다.주요 특징다양한 프로토콜 지원:HTTP, HTTPS, FTP, FTPS, SCP, SFTP, SMB, TFTP, TELNET, LDAP 등 다양한 네트워크 프로토콜을 지원합니다.플랫폼 독립적:Windows, macOS, Linux 등 대부분의 운영체제에서 사용 가능합니다.라이브러리 지원:libcurl이라는 C 기반 라이브러리를 제공하여, 애플리케이션 내에서 네트워크 통.. 2024. 12. 28.
[HTTP 추가 프로토콜]WebSocket [HTTP 추가 프로토콜]WebSocketWebSocket은 서버와 클라이언트 간의 양방향 통신을 지원하는 통신 프로토콜입니다.일반적인 HTTP 요청/응답 방식과 달리, 하나의 연결을 유지한 상태에서 양방향 데이터 교환을 실시간으로 수행할 수 있습니다. WebSocket은 HTML5 표준의 일부로 정의되었으며, 웹 애플리케이션에서 실시간 데이터 전송을 필요로 하는 다양한 경우에 활용됩니다.주요 특징양방향 통신:서버와 클라이언트가 모두 데이터를 주고받을 수 있습니다. 클라이언트의 요청 없이도 서버는 데이터를 푸시(push)할 수 있습니다.지속적인 연결:초기 연결 이후, 클라이언트와 서버 간의 연결이 유지되며, 재연결 없이 데이터를 주고받을 수 있습니다.저지연 및 효율성:HTTP 프로토콜처럼 요청/응답 과정.. 2024. 12. 28.
[HTTP 추가 프로토콜]Server-Sent Events(SSE) [HTTP 추가 프로토콜]Server-Sent Events(SSE) Server-Sent Events(SSE)는 서버가 클라이언트로 실시간 데이터를 푸시(push) 하는 방법을 제공하는 HTML5 표준 기술입니다. 이는 주로 브라우저와 서버 간의 단방향 통신을 위해 사용되며, 클라이언트는 서버에서 전송하는 이벤트를 수신합니다.주요 특징단방향 통신:서버 → 클라이언트 방향으로만 데이터를 보냅니다. 클라이언트는 데이터를 받을 수 있지만, 서버로 데이터를 보낼 수는 없습니다. (클라이언트에서 서버로 데이터를 보내려면 AJAX, WebSocket 등을 추가로 사용해야 함)HTTP 기반:기존 HTTP 프로토콜을 사용하여 쉽게 구현 가능하며, 브라우저에서 기본적으로 지원됩니다.텍스트 기반 전송:서버는 일반 텍스트 .. 2024. 12. 28.
canvas size 이해 canvas size 이해devicePixelRatio(dpr)은하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수이다. dpr이 다르더라도 보여지는 모습이 달라지지 않도록 구현하는 방법을 알아본다.내용의 출처는 맛있는 코딩 님 강의에서 가져왔다.     const canvas = document.querySelector('canvas');canvas.style.backgroundColor = 'gold';const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio;const canvasWidth = 400;const canvasHeight = 400;canvas.width = canvasWidth * dpr;canvas.height.. 2024. 9. 15.
Three.js 재질별 material 속성 정리 Three.js 재질별 material 속성 정리플라스틱: metalness: 0, roughness: 0.2 ~ 0.4const plasticMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, // 원하는 색상 metalness: 0, roughness: 0.3,});메탈: metalness: 1, roughness: 0 ~ 0.3const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, // 금속의 기본 색상 (은색, 철색 등) metalness: 1, roughness: 0.2,});유리: metalness: 0, roughness: 0, opacity: 0.1 .. 2024. 8. 15.

티스토리툴바