Computer/WEB, PHP-JAVA-Script
이미지 회색으로 필터 씌우기
이미지를 웹에서 사용하다 보면,컬러풀한 이미지를 사용할때가 많은데,웹디자인이랑 안어울려 모든곳에 잘 어울리는 회색톤으로 이미지를 변경해서 사용해야 될 순간이 있다.그럴때,어떻게 설정하면 좋을까?.gray-tone { filter: grayscale(100%);}나의 경우에는 간단하게 gray-tone 이라는 클래스를 하나 만들어서 필요한 순간순간에 사용하고 있다.요즘 웹에서는 풀스택 프레임워크들이 하두~~~ 많이 나와서,더 쉽고 빠르게 하는 방법들이 많지만,난 개인적으로 늙은이라 그런가..? 무진장 하드코딩이 편할때가 있다.프레임워크도 너무 다양해서, 다 쉽긴한데..다들 조금씩 조금씩 다르니깐 이것 저것 사용하다보니 헷갈리는 경우가 종종있다.폰트 하나 마음에 들어서 소개하고 오늘은 이만 사라지도록 ..
Computer/WEB, PHP-JAVA-Script
<iframe> 아이프레임 스크롤 기준으로 높이 자동 조절
scrollHeight에서 +20을 더해주었다. 단위차이랄까?설명하려니 귀찮다. 넣으면 깔끔하다. 여기까지 찾아올 실력이라면,자세한 설명은 필요없을것이라고 생각한다.가끔 필요해서 정리해 보았다.-끝- 너무 틱! 하고 간듯하여 다시 돌아왔다.1. `` 태그- 자바스크립트를 정의하는 부분입니다. `language="javascript"` 속성은 HTML4에서 사용되던 방식으로, 최신 표준에서는 생략 가능합니다.2. `ifmHeight()` 함수- `iframe`의 콘텐츠가 로드될 때, 그 내부 콘텐츠의 높이를 계산해서 `iframe`의 높이를 자동으로 조절하는 함수입니다. - `getElementById("ifm")`는 id가 `ifm`인 `iframe` 요소를 찾습니다. - `contentWindow.d..
Computer/WEB, PHP-JAVA-Script
DOMSubtreeModified 이녀석 알아보자.
갑자기, DOMSubtreeModified 이녀석으로 인해 당혹스러운 문제가 생겨서..[Deprecation] Listener added for a 'DOMSubtreeModified' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead. See for more information.크롬에서 열심히 보..
Computer/WEB, PHP-JAVA-Script
Spring(프레임워크)
스프링 프레임워크(Spring Framework)는 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크로, 엔터프라이즈 애플리케이션 개발을 위한 포괄적인 인프라를 제공합니다. 스프링 프레임워크는 다양한 기능과 모듈을 통해 개발자의 생산성을 높이고, 유연한 아키텍처를 설계할 수 있도록 돕습니다.주요 특징의존성 주입 (Dependency Injection, DI):객체 간의 의존성을 프레임워크가 주입해주는 방식입니다. 이를 통해 객체의 생성과 관계 설정이 코드에서 분리되어 테스트와 유지보수가 용이해집니다.AOP (Aspect-Oriented Programming, 관점 지향 프로그래밍):비즈니스 로직과 횡단 관심사를 분리하여 모듈화하는 방법입니다. 예를 들어, 로깅, 트랜잭션 관리, 보안 등의 기능을 분리..
Computer/WEB, PHP-JAVA-Script
Node.js에서 웹서버 바로 가능한데, Nginx를 사용하는 이유
Node.js는 자체적으로 웹 서버를 실행할 수 있는 기능을 제공하며, 이를 통해 직접 웹 애플리케이션을 운영할 수 있다.간단한 예로, http 모듈을 사용하여 기본적인 웹 서버를 설정할 수 있다.const http = require('http');const hostname = '127.0.0.1';const port = 3000;const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World\n');});server.listen(port, hostname, () => { console.log(`Server runnin..
Computer/WEB, PHP-JAVA-Script
const, var, let
var: var 키워드는 자바스크립트에서 가장 오래된 변수 선언 방식이에요. 가장 큰 특징인 함수 스코프(function scope) 때문에, 가끔 예상치 못한 동작이 발생할 수 있어요. 함수 내부에서 선언된 var 변수는 그 함수 내에서만 접근이 가능하지만, 블록(중괄호)와 관계 없이 접근이 가능해요. let: let 키워드는 ES6(자바스크립트의 버전)부터 도입된 변수 선언 방식이에요. let은 블록 스코프(block scope)를 갖고 있어서, 중괄호 { } 사이에서만 접근이 가능해요. 그래서 var보다 코드를 작성하고 관리하기에 안전한 방식이라고 볼 수 있죠. const: const 키워드도 let처럼 ES6부터 도입된 방식이구요. 블록 스코프를 가지며, 한 번 값을 할당하면 상수처럼 변경할 수 ..
Computer/WEB, PHP-JAVA-Script
JS/ 천 단위마다 콤마(,) 자동 생성
HTML onkeyup 속성은 현재 요소에서 onKeyUp 이벤트 핸들러를 반환합니다. https://developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers/onkeyup JS function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(str) { str = String(str); return str.replace(/[^\d]+/g, ''); } replace() 메서드는 어떤 ..
Computer/WEB, PHP-JAVA-Script
JS/ 소수점 자리수 처리
소수점 자리수 올림 const number1 = 1.3434 const number2 = 10.4321 const number3 = 100.5342 console.log(Math.ceil(number1)) // 2 console.log(Math.ceil(number2)) // 11 console.log(Math.ceil(number3)) // 101 Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil 소수점 자리수 내림 const number1 = 1.3434 const number2 =..
Computer/WEB, PHP-JAVA-Script
웹소켓으로 전송할 수 있는 데이터 종류
웹소켓 프로토콜은 텍스트와 바이너리 데이터를 지원합니다. 자바스크립트에서 바이너리 데이터는 ArrayBuffer와 Blob 클래스로 표시되고, 텍스트는 문자열로 표시된다. 일반 텍스트와 바이너리 포멧을 사용하면, 거의 모든 유형의 HTML5 미디어를 전송/ 디코딩할 수 있다. 웹소켓은 한 번에 하나의 바이너리 포멧만을 지원하며, 아래와 같이 반드시 명시적으로 선언해야 한다. socket.binaryType ="arraybuffer"; 또는 socket.binaryType = "blob" 문자열 OnMessage 이벤트가 발생할 때 마다 클라이언트가 데이터 타입을 확인하고 동작. 자바스크립트에서 동등 연산자(===)를 사용해 데이터 타입의 문자열인지 여부를 쉽게 판단가능. socket.OnMessage =..
EIGHTBOX
hwaya.
programmer
Today
Yesterday
Total