전체 글 84

이미지가 완전히 로드되기 전에 크기 가져오기

https://stackoverflow.com/questions/6575159 Get image dimensions with Javascript before image has fully loadedI've read about various kinds of ways getting image dimensions once an image has fully loaded, but would it be possible to get the dimensions of any image once it just started to load? I haven't f...stackoverflow.com// placeholder로 첫 이미지의 크기를 미리 적용img.style.width = firstImageSize.width +..

카테고리 없음 2025.02.15

라이브러리가 쓸데없이 비대하게 커지는 과정

(개구린 자작 라이브러리 설명임)버튼텍스트 이 코드를 짜고서 일주일 정도 어떻게 해야 더 유용하고 재사용성 있어질지 생각해봤다.class OrderedPromise { tasks = []; defer(fun) { return new Promise((resolve, reject) => { this.tasks.push(async (...args) => { try { const result = await fun(...args); resolve(result); return result; } catch (e) { reject(e); throw e; } }); }); } run(...arg..

카테고리 없음 2025.01.16

File System Access로 브라우저를 로컬 폴더와 연결하기

어느 때와 같이 온라인 vscode를 써서 뭔가 끄적이려고 하다가 이상한 걸 발견했다.  사이트가 파일을 보도록 허용하시겠습니까?(사이트 이름) 에서 (폴더 이름) 에 있는 파일을 볼 수 있게 됩니다. 이런 기능이 있었던가... 하고 써봤다.놀랍게도, 단순히 폴더 전체를 가져오는 게 아니었다.파일 n개를 이 사이트에 업로드하시겠습니까?'(폴더 이름)' 의 모든 파일이 업로드됩니다. 사이트를 신뢰할 수 있을 때만 실행하세요. 얘랑 다르다! 얘는 심지어 로컬에서의 수정사항을 실시간으로 반영한다!이거 파일 열어봤자 저장하면 zip 파일로 받아지고 다시 압축 풀고... 원본 지우고.. 그러리라 생각했던 내 비웃음을 철저히 배신했다.엄청 신기했다! 이제 내 신기함은 모두 표현했으니 찾아본 링크만 남기고 떠나겠다...

카테고리 없음 2025.01.15

티스토리에서 더블클릭 하면 마우스 위치 오른쪽 위에 뜨는 파란색 검색 버튼 없애기

티스토리 스킨을 가지고 놀다가 이 검색 버튼이 매우 불편해졌다.display: none 넣어서 해결해 버리려고, 요소 창을 켜려고 오른쪽 클릭을 하니까 바로 검색창으로 넘어가져 버린다.요소 창에다가 '검색' 이라고 검색해보니까 나오지도 않는다. 네트워크 창에서 찾았다. 이 녀석은 이 모양 통으로 이미지였다. 그대로 검색해보니 #DragSchLayer 에서 사용하고 있었다. 컷.아마 티스토리 설정을 찾아 보면 이거 끄는 기능이 있을지도 모르겠지만... 몰라. 귀찮아.

카테고리 없음 2025.01.12

브라우저에서 한글 표 정보 수정하기

참고로 여기서 한글은 진짜 이 한글 프로그램이 맞다. 어제 연등 때 취사반 애들이랑 얘기하다 들었던 이야기인데, 매일 한글 파일로 이루어진 식단 내용을 수정해야 한다고 한다. 그러면서 그 과정을 자동화해 줄 수 있는지 물어봤었는데, 난 프로그래머니까 일단 된다고 했다.진짜 되는지 알아보려고 오늘 확인해본 것들을 올린다. 우선 한글 파일에 무지개색 표 하나를 만들고 시작한다. 표를 복사한 다음, Clipboard Inspector에 들어가서 텍스트 데이터를 확인해 보았다.표 안의 텍스트가 text/plain으로 있었고, 엄청 긴 text/html 데이터, 그리고 엄청 긴 text/rtf 데이터가 있었다. 그냥 한글에서 복사하고 붙여넣으면, 별다른 문제 없이 잘 붙여넣어진다. 즉 내가 데이터를 임의로 생성해..

카테고리 없음 2025.01.11

Github Actions, Artifacts로 생성한 파일을 다운로드 받을 수 있도록 링크 제공하기

Github Action을 쓰면 배포를 자동화할 수 있다.Artifacts를 써서 만들어낸 파일들은 해당 깃허브 리포지토리 페이지의 Actions/Artifacts 탭로 들어가면 다운로드 받을 수 있지만, 일일이 들어가도록 하기는 어렵다. nightly.link를 사용하면 자동으로 한 branch의 가장 최신 Artifact에 대한 링크를 제공한다.   1. actions/upload-artifact를 사용하는 yml 파일의 깃허브 주소로 이동한다.vp_kr/.github/workflows/inno-build.yml at master · hyuckkim/vp_kr    2. nightly.link에 해당 링크를 넣으면 해당하는 Artifact의 링크를 얻을 수 있다.  (Get links를 누른 모습, ..

카테고리 없음 2024.05.14

리액트에서 Chart.js'만' 사용하기 (useRef)

물론 리액트용 라이브러리인 react-chartjs-2가 있다! 있는데 모르고 있었으니까. 알았으면 그냥 react-chartjs-2 썼을 거다. 이럴 때 쓰라고 useRef가 있다. import { ElementRef, useEffect, useRef } from "react"; import Chart from "chart.js/auto"; const PieChart = () => { const chartRef = useRef(null); useEffect(() => { const ctx = chartRef.current; if (ctx === null) return; const chart = new Chart(ctx, { ... }); return () => { chart.destroy(); } },..

카테고리 없음 2024.03.05

Vercel 배포에서만 이미지가 안나와요

어떻게 이런 버그가 있을 수 있지... 아래는 의심해본 내용들 (고칠때까지 추가예정) 1. LFS 문제 아닐까? ... 그대로 애초에 원본코드쪽에서 LFS 설정이 안돼있어서 뒤늦게 했다. 2. 노드 버전문제 아닐까? nvm use 18 설치해보고 ... 로컬은 이상없음. 3. 리눅스라서? ... ... 문제 재연에 성공했다. 오류는 The requested resource isn't a valid image for /api/icon/ICON_RES_TEA received application/json 근데 왜 이 오류가 이 이미지 파일에서만 뜨는가 ...... 또 대소문자 이슈였다. 이거 만질때 앞으로 그냥 리눅스로 해야지 진짜 부끄럽다

카테고리 없음 2024.01.23

Javascript 텍스트 복사 시 추가 정보 넣기

javascript - How to add extra info to copied web text - Stack Overflow How to add extra info to copied web text Some websites now use a JavaScript service from Tynt that appends text to copied content. If you copy text from a site using this and then paste you get a link to the original content at the botto... stackoverflow.com 네이버 블로그의 [출처] 기능이나 티스토리의 저작권자 표시 플러그인 같은 느낌으로 복사하려면. HTMLElement: co..

카테고리 없음 2024.01.22