blog.GimsLab.com

쿠팡 상품평 별점 그래프 그리기

gimslab.com — Sun, 29 Jun 2025 19:50:45 +0900

물건을 사러 쿠팡에 들어갔다. 과다비교증후군으로 인한 시간낭비증이 좀 심한터라 이미 지른 사람들 뜻을 따르기로 했다. 최고 별점을 준 사람도 있고 나쁨 별점 준 사람도 있는 법..

별점 숫자 옆에 % 값과 그래프가 같이 표시되었으면 좋겠다는 생각이 떠올라버렸다. 쿠팡에 제안해볼까 하다가 그냥 나 혼자 만들어 쓰기로 했다.

MS GPU에 전기를 몇 번 흘려주면 이런 걸 아주 쉽게 할 수 있다. AI가 쓸만해져 이러한 "알쓸적짓"을 좀 더 자주하게 될 것 같다.

<원본 화면>

<AI가 만든 코드를 적용한 화면>

<따라 해보기>

혹시 이 '알아둬도 쓸데 적은 짓'을 따라하려는 사람은 먼저 요러한 스크립트 끼워넣기 확장 프로그램을 크롬에 설치해야한다. (크롬에서만 해봤는데 다른 브라우져도 비슷한것들이 있을것 같다.) 이 확장프로그램 자체는 쓸데가 은근 좀 있다. 특히 마우스질을 좀 귀찮아하는 나에게는 남들이 만든 화면을 조작해서 쓸 수 있어서 좋다.

https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

User JavaScript and CSS - Chrome 웹 스토어

User JavaScript and CSS on any website

chromewebstore.google.com

이 확장 프록그램에 아래 화면처럼 새 룰을 추가한다. 룰은 웹화면을 조작하기 위한 javascript 코드이다. "Save"를 반드시 해야한다. 그리고 상품 페이지에 가서 화면을 다시 "새로 고침"하면 이제 퍼센티지와 그래프가 같이 보인다.

전체 코드:

function addReviewRatingPercentages() {
  const reviewList = document.querySelectorAll('.review-star-search-selector li');

  if (!reviewList || reviewList.length < 2) return;

  const totalCountText = reviewList[0].querySelector('.review-star-search-item-counts')?.textContent?.trim();
  const totalCount = parseInt(totalCountText.replace(/,/g, ''), 10); // 쉼표 제거

  if (isNaN(totalCount) || totalCount === 0) return;

  for (let i = 1; i < reviewList.length; i++) {
    const item = reviewList[i];
    const countEl = item.querySelector('.review-star-search-item-counts');
    if (!countEl) continue;

    const countText = countEl.textContent.trim();
    const count = parseInt(countText.replace(/,/g, ''), 10); // 쉼표 제거
    if (isNaN(count)) continue;

    if (countEl.querySelector('.review-percent-label')) continue;

    const percent = ((count / totalCount) * 100).toFixed(1);

    // 퍼센트 텍스트
    const percentSpan = document.createElement('span');
    percentSpan.className = 'review-percent-label';
    percentSpan.style.marginLeft = '8px';
    percentSpan.style.color = '#888';
    percentSpan.textContent = `(${percent}%)`;

    // 막대 그래프
    const barContainer = document.createElement('div');
    barContainer.style.height = '6px';
    barContainer.style.width = '100px';
    barContainer.style.backgroundColor = '#eee';
    barContainer.style.marginTop = '4px';
    barContainer.style.borderRadius = '3px';
    barContainer.style.overflow = 'hidden';

    const bar = document.createElement('div');
    bar.style.height = '100%';
    bar.style.width = `${percent}%`;
    bar.style.backgroundColor = '#4CAF50';

    barContainer.appendChild(bar);

    // 요소 추가
    countEl.appendChild(percentSpan);
    countEl.appendChild(barContainer);
  }
}

// DOM이 완전히 준비된 후 실행
window.addEventListener('load', () => {
  const targetNode = document.body;

  if (!targetNode) {
    console.warn('document.body가 아직 준비되지 않았습니다.');
    return;
  }

  const observer = new MutationObserver((mutationsList, observer) => {
    const reviewList = document.querySelectorAll('.review-star-search-selector li');
    if (reviewList.length >= 2) {
      addReviewRatingPercentages();
      observer.disconnect(); // 한 번만 실행
    }
  });

  observer.observe(targetNode, {
    childList: true,
    subtree: true
  });
});

근데 사려고 했던건 다음에 사야겠다. ㅠ.ㅠ

Google Drive Mount to Ubuntu Filesystem

gimslab.com — Mon, 9 Oct 2023 00:01:32 +0900

need to install google-drive-ocamlfuse

and write a script to mount

$ cat /home/{USERID}/bin/gdfuse.sh 
#!/bin/bash
su {USERID} -l -c "google-drive-ocamlfuse -label $1 $*"
exit 0

make a directory as a mount point

mkdir /home/{USERID}/GoogleDrive

apply to fstab to auto mount when boot

$ cat /etc/fstab | grep gdfuse
/home/{USERID}/bin/gdfuse.sh#default	/home/{USERID}/GoogleDrive fuse uid=1000,gid=1000,allow_other,user 0 0

from http://wiki.gimslab.com/moniwiki/wiki.php/Google%20Drive%20Mount%20to%20Ubuntu

다이소 도마로 키보드 손목받침대 만들어 봤다

gimslab.com — Sat, 17 Jun 2023 23:33:06 +0900

사실은 도마와 비슷하게 생긴 서빙보드라는 것이다.

내 키보드 손목 받침대는 껍질이 벗겨지고 손에 땀날땐 손에 살짝 들러붙기도해서 보내줄 때가 되었다는 생각을 하고 있었다.
직구로 샀고 만원에서 이만원 사이의 가격이었던것 같다. 나쁘지 않긴했는데 일년이 넘어가니 윗쪽 껍질이 테두리부터 약간씩 벗겨지기 시작하더니 결국 너무 너덜거려 윗쪽의 한 겹 껍질을 다 벗겨내버리고 쓰고 있던터였다.

다이소에 가면 재밌는 물건들이 많이 있다. 가끔 갈때마다 키보드 손목 받침대로 쓸만한게 있는지 둘러보곤 했는데 비슷한건 있어도 딱 맞는걸 발견한 적이 없었다. 그나마 나무 도마나 나무 서빙보드가 후보로서 가장 유력했으나 세로 폭이 너무 큰 게 문제였다. 그래서 오늘, 머리도 식힐겸 톱질 한 번 하리라 생각하고 하나를 사왔다. 사면서 평소에 필요했던 몇가지 공구도 함께 샀다. 라쳇 클램프도 하나 샀다. 저렴하지만 가끔 혼자서 작업을 할 때 필요할것 같은 도구였다. 특히나 오늘 혼자서 톱질을 해야하니 나무를 잡아줄 도구가 필요했다.

기존의 손목 받침대와 자를 이용해 대략 크기를 가늠해서 자를 곳에 줄을 그었다. 그리고 톱질을 시작하려 했다.

갖고 있던 실톱으로 시도했는데 생각보다 잘리는 속도가 너무 느렸다. 다시 더 큰 톱을 가지고 와 자르기 시작했다. 근데 집안에서 톱밥이 흩날리면 뒷처리가 힘들것 같았다. 생각끝에 집앞 놀이터 벤치에서 작업을 진행하였다.

몇 분의 "슬근 슬근 톱질하세" 뒤에 드디어 두조각으로 나뉘어 졌다.

저 라쳇 클램프라는 녀석을 처음 써봤는데 정말 작업의 효율이 엄청 차이가 났다. 특히 보통 이러한 아빠의 작업을 호기심 어린 눈으로 지켜보며 도마를 잡아주는 아이가 보통 있지. 나에게도 있긴한데 내 아이들은 벌써 이런 것 쯤엔 흥미를 느끼지 않을 나이가 되었고, 토요일임에도 학원에서 다른 뭔가를 열심히 하고 있는 시간이었다. 나는 이 도구가 정말 유용하다는 생각이 들었다.

톱질을 하고 나면 모서리 부분이 날카로우니 사포질은 기본, 근데 집에 있을줄 알고 사오지 않았는데 아무리 뒤져도 사포가 없었다. 저녁을 먹고 나서 운동삼아 또 다이소로... 샌드 페이퍼라는 이름으로 팔고 있었다. (사포? 어떤게 더 좋은 이름이지?) 여튼 열심히 문지른 후에 드디어 원가 저렴이 키보드 손목 받침대가 탄생하게 되었다.

아 기쁘다. 근데 책상이랑 마찰이 없어서 쓸 때 좀 움직이는 경향이 있다. 바닥에 고무 같은걸로 미끄럼 방지 패드 같은걸 붙여야 할 것 같다. 근데 쿠팡에 찾아보니 완제품 1만원에서 2만원 혹은 3만원대까지 다양하게 이미 팔고 있구나. 나는 나만의 오티움을 한 것이야. 쿠팡을 먼저 찾아봤어도 난 톱질을 선택했을거야. 암.. 진짜로.. 그나저나 남은 반쪽이로 어떤 오티움을 할까?

Why 'Inversion' in DIP from SOLID

gimslab.com — Mon, 16 Aug 2021 13:24:18 +0900

We should first know traditional layers pattern to understand why the term 'Inversion' is used.

from wikipedia.

Traditional layers pattern

In conventional application architecture, lower-level components (e.g., Utility Layer) are designed to be consumed by higher-level components (e.g., Policy Layer) which enable increasingly complex systems to be built. In this composition, higher-level components depend directly upon lower-level components to achieve some task. This dependency upon lower-level components limits the reuse opportunities of the higher-level components.

I made a simplified design for 'reporting'.

dependency INVERSION principle

from http://wiki.gimslab.com/moniwiki/wiki.php/Meaning%20of%20INVERSION%20from%20SOLID%20DIP

Grab and drag any part of the Mac window to move it

gimslab.com — Sun, 8 Aug 2021 17:11:43 +0900

In order to move a window in a general GUI environment, the hand moving the mouse becomes a little tired because it is necessary to precisely grab the title part of the window and move it. In Linux, however, you can drag and drop by grabbing any part of the window by holding down the Alt key (or the Window key, depends on your distribution and can be set by the user). If you're like me, who adjust window position relatively often, this feature is really useful.

Recently, it has become inevitable to use a Mac a lot. And it made me want to have this feature on my Mac as well. However, since the operation using the touchpad has been greatly enhanced in the Mac instead, I thought that these functions would not exist by default. I vaguely thought that I had to find and install something like an additional tweak utilily. But, as a result of googleing just in case, I found out that I can use this feature in a surprisingly simple way.(It's a bit disappointing to have to press two keys)

You can move a window by grabbing any part of the window while holding Ctrl+Cmd key. Execute below commands to activate or deactivate

# activate
$ defaults write -g NSWindowShouldDragOnGesture -bool true

# deactivate
$ defaults delete -g NSWindowShouldDragOnGesture

refer to http://wiki.gimslab.com/moniwiki/wiki.php/WindowDraggingInMacByClickingOnAnyPartOfIt%28asOnLinux%29

맥 윈도우 아무 부분이나 잡고 움직이기

gimslab.com — Sat, 7 Aug 2021 22:07:48 +0900

일반적인 GUI 환경에서 윈도우를 움직이기 위해서는 정확히 윈도우 상단의 타이틀 부분을 잡아서 움직여야하기 때문에 마우스를 움직이는 손이 좀 피곤해진다. 하지만 리눅스에서는 Alt 키(혹은 Window 키, 배포판에 따라 다를 수 있고 사용자가 설정할 수 있다.)를 누른 상태에서 윈도우의 어떤 부분이든 잡아서 끌 수 있다. 윈도우 환경에서 비교적 자주 조정하는 스타일인 나 같은 경우 이 기능이 정말로 유용하다.

하지만 최근 Mac 어쩔 수 없이 많이 사용할 수 밖에 없어지면서 Mac에도 이러한 기능이 있으면 좋겠다는 생각을 많이 하게 되었다. 하지만 Mac은 대신 터치패드를 이용한 조작이 많이 강화되어 있기에 당연히 이러한 기능은 기본적으로 없을 것이라고 생각했다. 그리고 추가적인 tweak util 같은걸 찾아서 설치해야할것이라고 막연하게 생각하고 있었다. 하지만 혹시나 하고 구글링해 본 결과 의외로 상당히 간단한 방법을 통해서 - 두 개의 키를 눌러야되서 좀 아쉽긴 하지만 - 이러한 기능을 사용할 수 있다는 걸 알게 되었다.

Ctrl+Cmd 키를 누른 상태에서 윈도우의 아무 부분이나 잡아서 끌 수 있다.

이 기능을 켜거나 끄려면 다음과 같은 커맨드를 실행하면 된다.

# activate
$ defaults write -g NSWindowShouldDragOnGesture -bool true

# deactivate
$ defaults delete -g NSWindowShouldDragOnGesture

참조. http://wiki.gimslab.com/moniwiki/wiki.php/WindowDraggingInMacByClickingOnAnyPartOfIt%28asOnLinux%29

Install bash again in your Mac osx, why?

gimslab.com — Sun, 1 Aug 2021 13:34:53 +0900

It's a very outdated version of the Bash shell on Mac OSX. maybe like GNU bash, version 3.2

I needed full features of a recent version of bash. There are many exceptions in an old version of bash like this.

$ printf %d "'가'"  
-22

so just I did this to version up.

$ brew install bash

and I can get the below version

$ bash --version  
GNU bash, 버전 5.1.4(1)-release (x86\_64-apple-darwin19.6.0)  
Copyright (C) 2020 Free Software Foundation, Inc.  
라이선스 GPLv3+: GNU GPL version 3 or later <http://gnu.org/license/gpl.html>  

This is free software; you are free to change and redistribute it.  
There is NO WARRANTY, to the extent permitted by law.

I have two versions of bash from now.

$ which -a bash
/usr/local/bin/bash
/bin/bash

new one and the old one

add new bash to the whitelist shell file /etc/shells like below

% cat /etc/shells
/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
/usr/local/bin/bash

set it as a default set

$ chsh -s /usr/local/bin/bash

Good! I can get this same result with my other bash in Linux.

$ printf %d "'가'"
44032

Laptop Stand Aluminum

gimslab.com — Sun, 1 Aug 2021 01:02:40 +0900

KRW25,800+2,500

Add Servlet Context and Swagger on Spring Boot

gimslab.com — Sun, 1 Aug 2021 00:41:59 +0900

1. add dependencies

2. determine prefix ("/apigw" in this case) for new context and add setting in SpringBootApplication or other configuration

3. write ApiGwWebMvcConfig.java for new context

4. write Swagger2Config.java for swagger setting

details for each step ==> http://wiki.gimslab.com/moniwiki/wiki.php/SwaggerSettingOnSpringBootWithNewServletContext

Trio 500 Samsung Bluetooth Keyboard

gimslab.com — Sat, 3 Jul 2021 18:29:52 +0900

compare with AnnePro 2

cf. Filco-vs-Anne-Pro-2

Video: https://youtu.be/qt96zk30Ikk