전체 글 79

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

tailwind만으로 드롭다운 / 최소화 구현하기

...tailwind 만으로 되는 건 아니고, 자바스크립트를 조금 써야 합니다. 하지만 들어보세요. 핵심 개념은 창의 루트 요소에 minimized 클래스를 추가하고 그 클래스를 찾는 것이다. - Content group-[.특정클래스]: 접두어를 사용하면 group이 그 클래스를 가지고 있는지를 확인할 수 있다. document.querySelector(".minimize") .onClick = () => { this.parentElement.classList.toggle("minimized"); } 뭐 그 다음에 대강 이런 함수를 써서 클래스를 추가하고 없애고 하면 된다. 출처 https://stackoverflow.com/questions/66349609

카테고리 없음 2024.01.09

npm 패키지를 만들었다.

regexp-misc - npm (npmjs.com) regexp-misc my misc tools with regexp. Latest version: 1.1.0, last published: 22 minutes ago. Start using regexp-misc in your project by running `npm i regexp-misc`. There are no other projects in the npm registry using regexp-misc. www.npmjs.com 리액트를 쓰다 보니까 정규식으로 switch-case를 하고 싶을 때라던가, string과 정규식을 나눠서 split 하고 싶다던가 할 때가 많이 생겨서 만들었다. hyuckkim/regexp-misc (github...

카테고리 없음 2023.12.14

C/C++ Windows 특정 프로그램 실행하고 그 프로그램을 원하는 위치에 배치하기

바로가기에 이 프로그램을 입력해서, 바로가기 A를 누르면 왼쪽에, 바로가기 B를 누르면 오른쪽에 프로그램이 켜지게 만들고 싶었다. 핵심은 프로그램이 켜지게 하는 것과 특정 위치로 이동시키는 것이다. 프로그램이 켜지게 하기 #include ... STARTUPINFOA si; PROCESS_INFORMATION pi; // set the size of the structures ZeroMemory(&si, sizeof(si)); si.cb = sizeof(si); ZeroMemory(&pi, sizeof(pi)); int c = CreateProcessA(argv[1], NULL, NULL, NULL, FALSE, CREATE_NEW_CONSOLE | CREATE_NEW_PROCESS_GROUP, NULL..

카테고리 없음 2023.12.10

React와 척지고 싸우기 - 여러 함수를 몇 초마다 순서대로 실행하기

토이 프로젝트니까 이딴 짓을 하고 있는 거다. 현업 가면 아마 절대 안 할거야... async () => { setState(func1(state)); await waitOneSeconds(); setState(func2(state)); await waitOneSeconds(); setState(func3(state)); } 처음에는, button.onClick에 이런 느낌의 함수를 넣으면 될 거라고 생각했었다. 상태가 바뀌고, 1초 후에 상태가 바뀌고, 1초 후에 상태가 바뀐다. 완벽하다! ...리액트 최적화는 그렇게 간단하지 않았다. async / await 함수라도, 그 함수가 모두 끝난 이후에 state가 반영된다. 심지어, 이 코드는 예상대로 작동하지도 않는다. setState는 맨 마지막에 적..

카테고리 없음 2023.11.27

리눅스 / logitech 키보드에서 fn 키 기본 고정 풀기

Linux mint 21.2 기준이긴 한데 우분투도 될 것 같다. 로지텍은 기본적으로 fn 키가 어쩌고~ 윈도우, 맥은 꺼주는 방법을 지원 어쩌고~ 다른 분들이 충분히 많이 설명해주셨습니다. https://pwr-solaar.github.io/Solaar/ Solaar Linux Device Manager for Logitech Unifying Receivers and Devices. pwr-solaar.github.io solaar 라는 프로그램이다. Unifying을 설정할 수 있다고 한다. sudo apt install solaar 설치가 완료되면, unifying 동글을 빼고 (usb에서 뽑으라는 뜻) solaar를 실행해주면 된다. (이미 꽂혀있는 동글은 권한 문제로 인식을 못한다고 한다!) 실..

카테고리 없음 2023.11.26