클릭하면 팝업이 뜨면서 배경은 흐리게 되는 그것!
애니메이션까지 전부 제공하네.. 우와
 |
 |
| ajax session 인증 (0) | 2024.01.26 |
|---|---|
| bootstrap table 정렬기능 (0) | 2024.01.26 |
| 브라우저 언어 탐지 (0) | 2024.01.18 |
| javascript exif 정보 얻기 (0) | 2023.11.29 |
| 웹 브라우저 10080 포트 접근 차단 이유 (0) | 2023.08.03 |
크롬에서는 아래 한가지만 실행된다.
| navigator.languages (4) ['ko-KR', 'ko', 'en-US', 'en'] navigator.language 'ko-KR' |
[링크 : https://phrase.com/blog/posts/detecting-a-users-locale/]
[링크 : https://stackoverflow.com/questions/3894488/is-there-anyway-to-detect-os-language-using-javascript]
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language]
| bootstrap table 정렬기능 (0) | 2024.01.26 |
|---|---|
| bootstrap modal (0) | 2024.01.23 |
| javascript exif 정보 얻기 (0) | 2023.11.29 |
| 웹 브라우저 10080 포트 접근 차단 이유 (0) | 2023.08.03 |
| javascript 배열을파일로 저장하기 (0) | 2023.08.02 |
exif의 orientation 정보를 이용하여
웹에서 이미지를 정상적인 방향으로 출력할 수 있을 듯?
[링크 : https://github.com/exif-js/exif-js]
| const orientation = EXIF.getTag( fileInfo, "Orientation" ); |
| bootstrap modal (0) | 2024.01.23 |
|---|---|
| 브라우저 언어 탐지 (0) | 2024.01.18 |
| 웹 브라우저 10080 포트 접근 차단 이유 (0) | 2023.08.03 |
| javascript 배열을파일로 저장하기 (0) | 2023.08.02 |
| Canvas2D: Multiple readback operations using getImageData (0) | 2023.07.24 |
크롬과 파이어폭스에서 둘다 막혀서 에러를 보니
ERR_UNSAFE_PORT
어떤 포트인가 해서 찾아보니 NAT slipstreaming 이라는 공격 기법의 주요 포트여서 막힌 듯.
| 포트 10080 NAT Slipstreaming 공격을 방지합니다 |
[링크 : https://itigic.com/ko/chrome-blocks-tcp-port-10080-to-prevent-attacks/]
7000 번 이하의 well known 포트는 거진 막아버린건가?
[링크 : https://blog.naver.com/celine2011/220973349118]
| 브라우저 언어 탐지 (0) | 2024.01.18 |
|---|---|
| javascript exif 정보 얻기 (0) | 2023.11.29 |
| javascript 배열을파일로 저장하기 (0) | 2023.08.02 |
| Canvas2D: Multiple readback operations using getImageData (0) | 2023.07.24 |
| webGPU (0) | 2023.05.18 |
blob 으로 하면 저장은 되는데, 옵션을 주어서 파일 유형을 골라줘야 할 듯.
| arr = [1,2,3,4,5,100] (6) [1, 2, 3, 4, 5, 100] var blob = new Blob(arr) window.open(URL.createObjectURL(blob)) |
url에 blob이 붙어서 신기하네
[링크 : https://blog.naver.com/nan17a/222058843806]
| var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob window.open(URL.createObjectURL(oMyBlob)); |
[링크 : https://stackoverflow.com/questions/13405129/create-and-save-a-file-with-javascript]
| javascript exif 정보 얻기 (0) | 2023.11.29 |
|---|---|
| 웹 브라우저 10080 포트 접근 차단 이유 (0) | 2023.08.03 |
| Canvas2D: Multiple readback operations using getImageData (0) | 2023.07.24 |
| webGPU (0) | 2023.05.18 |
| chart.js log 스케일 (0) | 2023.03.31 |
canvas로 무언가를 그리는걸 구현했는데 1초에 한번 읽고
다시 붙여 넣고, 다시 1줄 붙여 넣고 이런식으로 1초 이내에 몇번의 작업을 하는 코드를 작성했더니
크롬에서 아래와 같은 notice 를 띄운다. 일단 최소한 경고는 아닌데..
| Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently |
링크를 찾아가서 보면 will read frequently를 true 로 설정해주면 최적화 된다고 하는데
| The CanvasRenderingContext2D object also has a will read frequently boolean. When a CanvasRenderingContext2D object's will read frequently is true, the user agent may optimize the canvas for readback operations. On most devices the user agent needs to decide whether to store the canvas's output bitmap on the GPU (this is also called "hardware accelerated"), or on the CPU (also called "software"). Most rendering operations are more performant for accelerated canvases, with the major exception being readback with getImageData(), toDataURL(), or toBlob(). CanvasRenderingContext2D objects with will read frequently equal to true tell the user agent that the webpage is likely to perform many readback operations and that it is advantageous to use a software canvas. |
어디다가 저걸 넣어야 하나 해서 따라가보니 getContext("2d")로 끝낼게 아니라, 초기화 옵션으로 주면 되는 듯.
| context = canvas.getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] [, willReadFrequently: false ]} ])Returns a CanvasRenderingContext2D object that is permanently bound to a particular canvas element. If the alpha member is false, then the context is forced to always be opaque. If the desynchronized member is true, then the context might be desynchronized. The colorSpace member specifies the color space of the rendering context. If the willReadFrequently member is true, then the context is marked for readback optimization. context.canvas ✔MDN
Returns the canvas element.attributes = context.getContextAttributes()Returns an object whose:
|
[링크 : https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d]
그래서 결과적으로 아래와 같이 getContext에 willReadFrequently 를 추가해주니 별다른 경고가 발생하지 않는다.
| var canvas = document.getElementById(cvsID) var ctx = canvas.getContext("2d"); var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1); |
| var canvas = document.getElementById(cvsID) var ctx = canvas.getContext("2d", {willReadFrequently : true} ); var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1); |
[링크 : https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true]
| 웹 브라우저 10080 포트 접근 차단 이유 (0) | 2023.08.03 |
|---|---|
| javascript 배열을파일로 저장하기 (0) | 2023.08.02 |
| webGPU (0) | 2023.05.18 |
| chart.js log 스케일 (0) | 2023.03.31 |
| chatGPT님 가라사대 Server-Sent Events (SSE) (0) | 2023.03.15 |
유튜브에서 노마드 코더의 추천영상에 webGPU라는게 떠서 찾아보니
겁나 따끈한(고작 8일 지난..) 표준이다.
| WebGPU W3C Working Draft, 10 May 2023 |
[링크 : https://www.w3.org/TR/webgpu/]
[링크 : https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#0]
크롬94 베타 부터 webgpu 지원이 시작되었다는데(일단 글은 2021.09.11)
[링크 : https://www.clien.net/service/board/park/16489505]
webGL을 물리치고 대세가 될지 아니면 병행하게 될지 미래가 궁금해진다.
윈10 + 크롬 버전 113.0.5672.93(공식 빌드) (64비트)
ubuntu 18.04 + 버전 113.0.5672.126(공식 빌드) (64비트)
[링크 : https://webgpu.github.io/webgpu-samples/samples/shadowMapping]
+
리눅스에서는 webGPU가 disable인데.. 이걸 어떻게 켤 수 있으려나?
chrome://gpu/ |
[링크 : https://discourse.threejs.org/t/webgpu-example-not-working-in-ubuntu-20-04/40484]
| javascript 배열을파일로 저장하기 (0) | 2023.08.02 |
|---|---|
| Canvas2D: Multiple readback operations using getImageData (0) | 2023.07.24 |
| chart.js log 스케일 (0) | 2023.03.31 |
| chatGPT님 가라사대 Server-Sent Events (SSE) (0) | 2023.03.15 |
| JWT 로그인 예제 (0) | 2022.08.24 |
Y축 말고 X축도 되겠...지?
[링크 : https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html]
[링크 : https://www.chartjs.org/docs/latest/samples/scales/log.html]
| Canvas2D: Multiple readback operations using getImageData (0) | 2023.07.24 |
|---|---|
| webGPU (0) | 2023.05.18 |
| chatGPT님 가라사대 Server-Sent Events (SSE) (0) | 2023.03.15 |
| JWT 로그인 예제 (0) | 2022.08.24 |
| quirks mode (0) | 2022.08.08 |
chatGPT 님에게 server push 예제를 알려줘라고 했더니 아래와 같이 알려주신다.
| Server push is a technique that allows a server to push data to a client without the client first making a request for the data. In JavaScript, this can be achieved using the Server-Sent Events (SSE) API. Here's an example of how you can use SSE to implement server push in JavaScript: On the server side, you need to create an endpoint that will send the SSE messages. In this example, we'll create a simple Node.js server: |
| const http = require('http'); const server = http.createServer((req, res) => { if (req.url === '/sse') { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(() => { res.write(`data: ${new Date().toISOString()}\n\n`); }, 1000); } else { res.writeHead(404); res.end(); } }); server.listen(3000); |
const source = new EventSource('/sse'); source.onmessage = (event) => { console.log(event.data); }; |
아무튼 SSE를 검색해보는데.. jquery 연관은 잘 안보이고
EventSource.onmessage() 로 처리 가능만 하다면야 머...
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events]
+
golang의 REST / websocket 제거하고 cgi로 돌리려는 어마어마한 음모가! ㅠㅠ
| webGPU (0) | 2023.05.18 |
|---|---|
| chart.js log 스케일 (0) | 2023.03.31 |
| JWT 로그인 예제 (0) | 2022.08.24 |
| quirks mode (0) | 2022.08.08 |
| grid와 flex (0) | 2022.07.04 |
음.. 환상이 컸었나..
지금 다시 보는데 POST로 id, pw를 plain text로 보내는 센스..
서버가 https로 보안채널이 되었다고 가정하지 않으면 의미없는 짓 같은 느낌..
[링크 : https://llshl.tistory.com/28]
[링크 : https://minho-jang.github.io/development/7/]
[링크 : https://velopert.com/2389]
SSO 구현에 JWT가 가능한진 좀 찾아봐야겠다.
| chart.js log 스케일 (0) | 2023.03.31 |
|---|---|
| chatGPT님 가라사대 Server-Sent Events (SSE) (0) | 2023.03.15 |
| quirks mode (0) | 2022.08.08 |
| grid와 flex (0) | 2022.07.04 |
| markdown 문법 - 체크박스 (0) | 2020.10.15 |
|
