본문 바로가기

프론트엔드73

[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.
jquery 확장 메서드 jquery 확장 메서드 [셀렉터를 이용한 확장 메소드] 문법 : $.fn.메소드명 사용방법 : $(selector).메소드명()$.fn.HTMLTagRestore = function(){ var value = this.val(); if(this.is("input") || this.is("textarea")){ this.val(value.replaceAll('a', 'A').replaceAll('b', 'B')); } return this; // 함수 체인 }; $("input").on('input',function(){ $(this).HTMLTagRestore(); }); $("input").HT.. 2024. 7. 6.
한글 입력시 이벤트 중복 호출 해결 방법 한글 입력시 이벤트 중복 호출 해결 방법 cjk(중국어, 일본어, 한국어) 문자는 브라우저에서 처리하는 과정이 한 단계 더 필요하다. 따라서 한국어 입력시 이벤트가 중복 호출되는 현상이 생긴다. 이를 해결하기 위해 isComposing 이라는 이벤트 속성을 사용한다. isComposing 은 글자가 조합 중인지 boolean을 반환한다. 아래는 isComposing 사용 예시다. const inputEl = document.querySelector('input'); inputEl.addEventListener('keydown', event => { if(event.key === 'Enter' && !event.isComposing){ console.log(event.isComposing); console.. 2024. 3. 9.

티스토리툴바