Joonas' Note

nvidia-smi 명령어 정리

joonas — Mon, 3 Nov 2025 14:05:06 +0900

GPU 전체 상태 보기

nvidia-smi

특정 GPU 상태 보기

숫자는 gpu id (UUID 또는 PIC bus ID) 를 입력하면 된다.

 nvidia-smi -i 0

여러 개를 한 번에 출력할 수 도 있다.

$ nvidia-smi -i 0,3
Mon Nov  3 14:02:05 2025
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 470.141.10   Driver Version: 470.141.10   CUDA Version: 11.4     |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|                               |                      |               MIG M. |
|===============================+======================+======================|
|   0  Tesla V100-DGXS...  On   | 00000000:07:00.0  On |                    0 |
| N/A   48C    P0    41W / 300W |    218MiB / 16155MiB |      0%      Default |
|                               |                      |                  N/A |
+-------------------------------+----------------------+----------------------+
|   3  Tesla V100-DGXS...  On   | 00000000:0F:00.0 Off |                    0 |
| N/A   64C    P0    43W / 300W |     10MiB / 16158MiB |      0%      Default |
|                               |                      |                  N/A |
+-------------------------------+----------------------+----------------------+

+-----------------------------------------------------------------------------+
| Processes:                                                                  |
|  GPU   GI   CI        PID   Type   Process name                  GPU Memory |
|        ID   ID                                                   Usage      |
|=============================================================================|
|    0   N/A  N/A      3174      G   /usr/lib/xorg/Xorg                102MiB |
|    0   N/A  N/A      4054      G   /usr/lib/xorg/Xorg                 67MiB |
|    0   N/A  N/A      4253      G   /usr/bin/gnome-shell               26MiB |
|    3   N/A  N/A      3174      G   /usr/lib/xorg/Xorg                  4MiB |
|    3   N/A  N/A      4054      G   /usr/lib/xorg/Xorg                  4MiB |
+-----------------------------------------------------------------------------+

GPU 전체 리스트로 출력

nvidia-smi -L

GPU 0: Tesla V100-DGXS-16GB (UUID: GPU-4a5696d4-12ff-d8a3-f604-d25020c46dc9)
GPU 1: Tesla V100-DGXS-16GB (UUID: GPU-036e8961-7968-e8ed-05db-3ed1117387ab)
Unable to determine the device handle for gpu 0000:0E:00.0: Unknown Error
GPU 3: Tesla V100-DGXS-16GB (UUID: GPU-4ce0c45f-8be0-d20f-db73-e6e0e254b51f)

과부하 걸렸거나 온도가 높아서 죽어버린 GPU 도 위처럼 볼 수 있음

GPU 최대 전력 제한

$ nvidia-smi -pm 1

$ nvidia-smi -pl 220
Power limit for GPU 00000000:07:00.0 was set to 220.00 W from 300.00 W.
Power limit for GPU 00000000:08:00.0 was set to 220.00 W from 300.00 W.
Power limit for GPU 00000000:0E:00.0 was set to 220.00 W from 300.00 W.
Power limit for GPU 00000000:0F:00.0 was set to 220.00 W from 300.00 W.
All done.

옵션 전체 보기 (공식 문서)

https://docs.nvidia.com/deploy/nvidia-smi/index.html

Operating state of the PSU. The power supply state can be any of the following: "Normal", "Abnormal", "High voltage", "Fan failure", "Heatsink temperature", "Current limit", "Voltage below UV alarm threshold", "Low-voltage", "I2C remote off command", "MOD_

docs.nvidia.com

FormData 전송할 때 fetch vs. axios

joonas — Wed, 16 Apr 2025 00:47:27 +0900

서버에 파일을 업로드하는 함수를 구현하던 중, axios를 fetch 로 변경하였는데 서버쪽에서 500 에러가 발생했다.

문제는 서버에 도달한 요청 데이터에 RequestBody가 사라진 것이다.

아래의 두 함수를 비교하면, 전혀 문제될 것이 없어보인다.
먼저, axios를 사용하고 있던 기존의 함수 로직이다.

axios
  .post(ENDPOINT, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  .then((data) => console.log(data))

다음으로 fetch로 변경한 함수 로직이다.

fetch(ENDPOINT, {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formData,
})
  .then((data) => console.log(data))

결론부터 말하자면, 아래와 같이 고치면 정상적으로 동작한다.

fetch(ENDPOINT, {
  method: 'POST',
  body: formData,
})
  .then((data) => console.log(data))

이유를 알 수 없어서 여러 방법으로 분석해보았다.
서버쪽 로그도 찍어보고, Postman으로도 전송해보았는데 서버 문제는 아니었다.

그렇다면 axios와 fetch의 동작에 차이가 있다는 것으로 보여서 네트워크로 전송되는 데이터를 비교해보았다.

먼저 axios를 통해 전송되는 데이터이다.

POST /upload HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: ko
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 235
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary1x8F0uD1L2QhdmuW
DNT: 1
Host: localhost:3000
Origin: http://localhost:3001
Pragma: no-cache
Referer: http://localhost:3001/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

다음으로 fetch를 통해 전송되는 데이터이다.

POST /upload HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: ko
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 235
Content-Type: multipart/form-data
DNT: 1
Host: localhost:3000
Origin: http://localhost:3001
Pragma: no-cache
Referer: http://localhost:3001/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

두 데이터에서 유일하게 다른 부분은 Content-Type 이다.

도대체 왜 fetch 에서는 boundary 가 사라진 것일까?
그렇다면 boundary 를 붙이고 내용물을 동일하게 가공하여 전송하면 제대로 동작할까?

(일단 되는지 확인하기 위해서) 아래처럼 FormData 를 쪼개서 전송 폼에 맞게 만들어보았다.

const boundary = '----WebKitFormBoundary' + 'caKRudE3BYlaVvsk';

const fields = Array.from(formData).map(([key, value], index) => {
  // 먼저 string 타입만 전송 테스트
  return `Content-Disposition: form-data; name="${key}"\n\n${value}\n${boundary}`;
});
const encodedBody = `--${boundary}\n${fields.join('\n')}--`;
console.log(encodedBody);

fetch(ENDPOINT, {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data; boundary=' + boundary,
  },
  body: encodedBody,
})
  .then((data) => console.log(data))

안타깝게도 세상은 그렇게 호락호락하지 않다.

multipart/form-data payload (fake)

내용물을 동일하게 만들었다하더라도, 파라미터로 넘기는 객체가 FormData 타입이 아니기때문에 Content-Length 도 다르고 fetch 함수 내부에서 다르게 처리되는 것인지 올바르지 않은 포맷으로 전송되고 있었다.

axios는 XMLHttpRequest 객체를 사용하는 라이브러리이다. 개인적으로 XMLHttpRequest 의 사용 방법이 너무나도 불편했고 axios는 물론 과거 ajax 역시 초기 세팅 등 사용하기에 편하지는 않았다. 그래서 Fetch API가 등장한 이후로는 너무 유용하게 사용하고 있었다.

아무튼 이런 차이때문인지는 몰라도, fetch에서는 multipart/form-data의 경우에는 Content-Type을 지정하지 않아야 boundary가 자동으로 붙어서 전송되어 정상적으로 동작한다.

스택오버플로우의 답변으로부터 약 10년이 지난 지금까지도 유효한 방법이다 (...)

참고

fetch - Missing boundary in multipart/form-data POST

I want to send a new FormData() as the body of a POST request using the fetch api The operation looks something like this: var formData = new FormData() formData.append('myfile', file, 'someFileNam...

stackoverflow.com

What is the boundary in multipart/form-data?

I want to ask a question about the multipart/form-data. In the HTTP header, I find that the Content-Type: multipart/form-data; boundary=???. Is the ??? free to be defined by the user? Or is it

stackoverflow.com

[React] useDeepMemo

joonas — Tue, 15 Apr 2025 00:22:57 +0900

primitive 하게 비교되지 않는 object들은 의존성 배열에서 같은 값으로 인식하지 않는다.
이건 javascript 의 비교 연산자가 얕은 비교를 하기 때문이다. 아래는 대표적인 사례.

{} == {}
// output: false

즉, 아래의 memo는 전혀 캐싱되지 않기 때문에 어떤 스노우볼을 굴릴 지 모른다.

const complexObject = {a:1, b:2, c:"xyz"}
// 의존성 배열은 항상 다른 값으로 인식된다.
const complexMemo = useMemo(() => complexObject, [complextObject])

아래와 같이 비교 대상을 문자열로 변경해서 해결하는 방법도 있는데, 보기에도 느껴지지만 그렇게 권장되는 방법은 아니다.

const complexObject = {a:1, b:2, c:"xyz"}
const complexMemo = useMemo(() => complexObject, [JSON.stringify(complextObject)])

위 방법과 크게 다르지 않지만, 핵심은 의존성 배열 내의 객체를 비교해야 하는 것이므로, 구조적으로 변경할 수 있게 아래처럼 작성해서 사용하고 있다.

// useDeepHooks.ts
import { useRef, useEffect, useMemo } from 'react'

const serialize = (obj: any) => {
  if (typeof obj === 'object') {
    return JSON.stringify(obj)
  }
  return obj
}

export function useDeepMemo(callback: () => any, dependencies: any[]) {
  const depsStringified = useMemo(
    () => dependencies.map(serialize),
    dependencies,
  )
  return useMemo(() => callback(), depsStringified)
}

리액트 개발자 중 한 명은 이 외에도 2가지 방법을 더 제시하고 있다.

그 외에도 ref 를 사용해서 상태를 들고 있는 방법도 있는데, Object 비교에서 실수한건지 제대로 동작하진 않았다.

참고

When to useMemo and useCallback

kentcdodds.com

useCallback/useEffect support custom comparator · Issue #14476 · facebook/react

Currently we can pass an array as second argument when using useCallback or useEffect like below: useCallback(()=> { doSth(a, b) }, [a, b]) // how to do deep equal if a is an object ? The problem i...

github.com

로또가 의심돼! (feat. 당첨 숫자가 하나도 없을 확률)

joonas — Sun, 30 Mar 2025 23:51:50 +0900

로또는 우리 인생에서 확률이라는 보이지 않는 수를 몸으로 체감할 수 있는 좋은 기회다.
하지만 늘 조작이라는 의심이 따르는 편이다.

오늘은 문득 로또를 구매하다가 역대 당첨 기록으로부터 조작의 증거를 발견할 수 있을까 하는 생각이 들었다.

그렇다. 혹시 벤포드의 법칙이 통할 것인가 궁금해서 확인해보려다가, 조금 더 생각해보니까 아니라는 생각이 들었다.
로또는 어떤 흐름 속에서 연속되는 수들이 있는 게 아니라, 매 회차별로 독립 시행이다.

그렇다면 큰 수의 법칙을 따를테니 정규 분포가 보이지 않을까 생각해봤다.

간단하게 확인할 방법을 궁리해봤는데, 간단하지 않을 것 같았다.

각 회차별로 등장하는 당첨 숫자는 7개(보너스 숫자도 포함)이다. 그럼 변수가 7개이므로 각 \(p(X_1)\) 부터 \(p(X_7)\) 에 대한 결합 확률 분포(Joint probability distribution)를 계산해야하나 싶었다. 근데 또 각 변수가 독립은 아닌데.... (모르겠다 너무 어렵다)

1부터 45까지 중에서 뽑은 7개의 숫자 합은 최소 28(1+2+3+4+5+6+7), 최대 294(39+40+41+42+43+44+45)이다.
한 회차에서 숫자들의 등장 확률은 조합이므로 정규 분포를 따른다.

그렇다면 각 회차에서 등장하는 숫자들의 합들의 분포를 찍어봐도 정규 분포를 따라야하지 않을까?

각 회차별 당첨 숫자합에 대한 분포표

X축은 각 회차에서 등장한 당첨 숫자들의 합, Y축은 그러한 합이 등장할 확률이다.

엄밀하게 확인하려던 게 아니라 추이만 보려고 한 것이라 이 정도에서 마친다.

로또 하나도 안 맞을 확률

당첨 번호를 모두 피한 5개의 자동 추첨

모든 문제를 맞힌 사람 역시 대단하지만, 모든 문제를 틀린 사람도 대단하다고 할 수 있다.
보너스 숫자를 제외하고 6개의 번호가 일치하는 확률은 814만분의 1이지만, 이 경우에는 확률이 어떻게 되는 지 궁금해졌다.

여기 한 사람 더 있었다. (출처: 홍차넷)

45개의 숫자 중에서 당첨 숫자인 6개를 제외한 39개 중에서 6개의 숫자를 뽑을 확률을 구하면 된다.

\(\frac{39}{45} \cdot \frac{38}{44} \cdot \frac{37}{43} \cdot \frac{36}{42} \cdot \frac{35}{41} \cdot \frac{34}{40}~=~\frac{2~349~088~560}{5~864~443~200}~=0.4005646\) 로, 약 40% 이다.

그런데 5개의 줄을 샀으므로, 서로 독립인 5개의 줄에서 모두 등장하지 않으려면, 40%가 5번 동시에 일어나야한다.

\({0.4005646}^5~=~0.01031247\) 로, 약 1%의 확률이다. 이것도 쉽지 않은 확률인데, 당첨 확률은 이것보다 8만배 높다.

참고한 글

로또 회차별(1회~1165회) 당첨번호

로또 회차별 당첨번호 1회 ~ 1165회 *로또 당첨시간 토요일 8시 35분경으로 변경(방송사 :MBC) *** 회차번호를 클릭하시면 각 회차별 상세 내용을 보

signalfire85.tistory.com

홍차넷 - 로또 하나도 안 맞을 확률이 어떻게 되나요?

확알못입니다. 따끈따끈한 이번주 로또 결과인데요. 로또가 사진처럼 하나도 안 맞을 확률이 어떻게 되나요? 확잘알님들 도와주세요 흐흐 1등을 바랬는데 뒤에서 1등을 할 줄이야... ㅠㅠ

redtea.kr

[Windows 10] pytorch3d 설치 중 트러블 슈팅

joonas — Fri, 21 Mar 2025 07:19:54 +0900

환경 세팅

프록시 설정 때문에 pip install pytorch3d 는 불가한 상황이었고, 공식 설치 문서를 참고해서 직접 패키지를 설치해야했다.

개인적으로 conda 를 잘 사용하지 않기도 하고, conda 세팅도 불가한 상황이라 virtualenv 로 실행 환경을 구축한 상황이다.

python -m virtualenv .venv
source .venv/Scripts/activate
python -m pip install pytorch torchvision pytorch-cuda

CL 명령어를 못 찾음

...
copying pytorch3d\datasets\shapenet\shapenet_synset_dict_v2.json -> build\lib.win-amd64-cpython-311\pytorch3d\datasets\shapenet
running build_ext
D:\MLTest\.venv\Lib\site-packages\torch\utils\cpp_extension.py:380: UserWarning: Error checking compiler version for cl: [WinError 2] 지정된 파일을 찾을 수 없습니다
  warnings.warn(f'Error checking compiler version for {compiler}: {error}')
error: [WinError 2] 지정된 파일을 찾을 수 없습니다

해결

Visual Studio Tools 에 있는 cl.exe 를 실행할 수 있도록 환경 변수 추가

export PATH=$PATH:/d/Programs/Visual\ Studio/VC/Tools/MSVC/14.36.32532/bin/Hostx64/x64

참고

Installed Visual Studio 2022 but 'cl' is not recognized as an internal or external command

None of my terminals on Windows 10 recognize cl 'as an internal or external command'. I have Visual Studio 2022 installed and I've tried it on every terminal, including terminals in the Visual Studio

stackoverflow.com

build_ext 이후 에러

adding license file 'LICENSE-3RD-PARTY'
writing manifest file 'pytorch3d.egg-info\SOURCES.txt'
installing library code to build\bdist.win-amd64\egg
running install_lib
running build_py
running build_ext
error: [WinError 2] 지정된 파일을 찾을 수 없습니다

해결

CUDA_HOME 또는 CUDA_PATH 환경 변수 설정

export CUDA_HOME=/d/Programs/NVIDIA\ Toolkits/CUDA/v12.4

환경 변수 설정하고 다시 실행해보면 다음 단계인 building 'pytorch3d._C' extension 를 시작한다.

참고

https://stackoverflow.com/a/77463619

running build_ext gives `[WinError 2] The system cannot find the file specified` while building detectron2

I'm currently trying to build detectron2 in environment in Anaconda. Below is the packages that I'm using in my env: windows 11 conda package python 3.8 cuda 11.3 pytorch 1.11 torchaudio 0.11.0

stackoverflow.com

사과 게임 헬퍼 만들어보기

joonas — Sun, 9 Mar 2025 12:10:26 +0900

게임

https://www.gamesaien.com/game/fruit_box_a/

無料ゲーム「フルーツボックス」

画面上をマウスでドラッグして、数字の合計が10になるようにリンゴを囲むパズルゲームです。(説明) iPhone,iPadやAndroidでも動作します。

www.gamesaien.com

요약

예전에 참 재밌게 했었던 게임인데, 오랜만에 다시 하려니 심신이 피로하고 무척 귀찮아서 차라리 사각형을 보여주는 걸 코딩해보면 재밌겠다는 생각이 들었다.

플래시 게임 수준의 1인용 로컬 게임이기도 하니, 핵이나 매크로를 만든다고 해서 피해가 생기진 않을테고...
어디서 사용한다고 쳐도 너무 눈에 띄는 수준이라 만들고 공개도 해볼만하다고 생각해서 진행했다.

구현

게임 동작 방식

가로로 17개, 세로로 10개의 사과가 있고, 각 사과에는 1부터 9 까지의 숫자가 적혀있다.
아래와 같이 숫자의 합이 10이 되는 사각형을 찾아서 드래그하면 점수를 얻는다.

사과의 숫자 인식

게임은 워낙 간단한 방식이니 이해했고, 그럼 코드로 풀어보려면 숫자부터 인식해야한다.

게임판에서 적당히 20x20 크기로 잘라낸 숫자들

다행히도 HTML5 canvas 기반이라서 쉽게 이미지를 가져올 수 있었다. 적당히 기준점을 (75, 80) 위치로 잡고 33 x 33 크기로 잘라봤는데 모든 사과들의 위치가 규칙적이라, 이미지를 얻는 데 큰 문제는 없었다.

const getImageData = (x, y) => {
  return ctx.getImageData(75 + x * 33, 80 + y * 33, 20, 20);
};

진지하게 숫자 인식을 사용해볼까하다가 tensorflow.js 같은 외부 라이브러리를 쓰는 수고가 더 들 것 같았다.
어차피 재미로 짜보는 코드인데, 완성도는 나중에 생각하고 로직을 먼저 완성해보는 것이 맞아보인다.

대충 모든 숫자를 겹쳐 본 모습

어차피 9개의 숫자가 서로 구분만 되면 되니까, 숫자별로 위치가 다르게 나올 수 밖에 없는 조합을 골라서 해싱으로 비교했다.

노란색 박스 안에서 적당히 6개의 픽셀 선정

자세한 설명은 생략한다.

// 20x20 pixels => 6 pixels X 3(rgb) => 18개
const pca = ({data}) => {
  const loc = (x, y) => 4 * (y * 20 + x);
  const rgb = (x, y) => {
    const i = loc(x, y);
    const s = data.slice(i, i + 4);
    return [s[0], s[1], s[2]];
  };
  return [rgb(5, 5), rgb(12, 5), rgb(5, 9), rgb(12, 9), rgb(5, 13), rgb(12, 13)];
};
const hash = (imgData) => pca(imgData).flat().reduce((a, c) => (a * 256 + c) % 213, 0);
const answers = [37, 48, 145, 205, 175, 146, 59, 139, 70];
const getNumber = (imgData) => answers.indexOf(hash(imgData)) + 1;

아무튼 규칙적인 위치에 적당히 점을 뽑아서 패턴에 맞게 숫자들을 분류하면 아래와 같이 숫자를 인식할 수 있다.

첫 번째 스크린샷과 비교하면 성공적으로 숫자 인식됨

물론 캔버스의 크기나 주변 픽셀 등의 영향으로 rgb 색상이 조금이라도 바뀐다면 동작하지 않는 코드지만, 아래의 짤로 마무리하겠다.

합이 10인 사각형 찾기

사과 게임 이미지로부터 숫자를 해석하고 이제 처리할 준비는 되었는데, 어떤 알고리즘으로 사각형을 찾아줄 것인지 고민할 차례이다.

2차원 배열에서 합이 10이 되는 사각형을 찾는 알고리즘은, prefix sum(누적 합)으로 계산할 수 있다. 적절한 연습 문제로는 BOJ 2167 - 2차원 배열의 합이 있다.

물론 모든 경우의 수를 탐색하면서 하나씩 전부 찾아도 되긴 하지만, 시간복잡도가 \(O(n^6)\) 이다. 물론 \(n \le 17\) 이라서 허용할 수 있는 정도지만.. 일단 이런 naive한 방식의 구현은 아래와 같다.

아래 코드는 사각형의 네 꼭짓점을 찾고, 네 꼭짓점 안에 존재하는 모든 숫자를 더하는 방법이다.

function getSum(g, sx, sy, ex, ey) {
  let sum = 0;
  for (let i = sx; i <= ex; i++)
    for (let j = sy; j <= ey; j++)
      sum += g[i][j];
  return sum;
}

function getBoxes() {
  const g = getGrid();
  const boxes = [];
  // O(n^6)
  for (let sy = 0; sy < ROWS; sy++)
    for (let sx = 0; sx < COLS; sx++)
      for (let ey = sy; ey < ROWS; ey++)
        for (let ex = sx; ex < COLS; ex++)
          if (getSum(g, sx, sy, ex, ey) === 10)
            boxes.push({sx, sy, ex, ey});
  return boxes;
}

약간 최적화

다음은 누적합 배열을 두어서, \(O(n^2)\) 시간에 미리 초기화를 해두고, 어떤 사각형을 만드는 네 꼭짓점이 주어지면 \(O(1)\) 시간에 사각형 내부의 합계를 알 수 있다.

// O(1)
function getPrefixSum(sum, sx, sy, ex, ey) {
  return sum[ey+1][ex+1] - sum[ey+1][sx] - sum[sy][ex+1] + sum[sy][sx];
}

function getBoxes() {
  const g = getGrid();
  const boxes = [];
  const sum = Array.from({length: ROWS + 1}, () => Array(COLS + 1).fill(0));
  
  // O(n^2); init prefix sum array
  for (let y = 1; y <= ROWS; ++y)
    for (let x = 1; x <= COLS; ++x)
      sum[y][x] = g[y-1][x-1] + sum[y-1][x] + sum[y][x-1] - sum[y-1][x-1];
  
  // O(n^4)
  for (let sy = 0; sy < ROWS; sy++)
    for (let sx = 0; sx < COLS; sx++)
      for (let ey = sy; ey < ROWS; ey++)
        for (let ex = sx; ex < COLS; ex++)
          if (getPrefixSum(sum, sx, sy, ex, ey) === 10)
            boxes.push({sx, sy, ex, ey});
  return boxes;
}

별거 아닌 것 같지만, 가로 17, 세로 10인 이 게임의 경우에는 위 코드보다 170배 빠르게 계산하는 코드이다.

결과

실제 게임 캔버스 위에 가상의 투명 캔버스를 올리고, 마우스 이벤트가 무시되도록 설정하고, 사각형을 "잘" 그리는 등의 설명은 생략되었지만 중요한 내용은 다 짚었으므로 생략한다.

잘 나온다

전체 코드

Fruit box game visualizer

Fruit box game visualizer. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

git hook 설정할 때 scp connection 오류 해결법

joonas — Thu, 12 Sep 2024 19:55:29 +0900

gerrit 을 사용한다면 git clone 후에 scp 로 훅을 아래와 같이 설정할 것이다.

$ scp -p -P 29418 username@gerrit.example.com:hooks/commit-msg .git/hooks

참고로 29418번 포트는 gerrit 포트 기본값이다.

Gerrit Code Review - Uploading Changes

As Gerrit implements the entire SSH and Git server stack within its own process space, Gerrit maintains complete control over how the repository is updated, and what responses are sent to the git push client invoked by the end-user, or by repo upload. This

gerrit-review.googlesource.com

이유는 모르겠으나 최근 들어서 아래와 같은 오류가 계속 발생한다.

Cloning into 'MyRepo'...
remote: Total 5216 (delta 0), reused 5216 (delta 0)
Receiving objects: 100% (5216/5216), 453.29 MiB | 30.66 MiB/s, done.
Resolving deltas: 100% (1773/1773), done.
Updating files: 100% (271/271), done.
subsystem request failed on channel 0
scp: Connection closed

예전에 Stackoverflow 에서 해결 방법을 찾았는데, 출처는 기억이 안나지만 메모할 겸 글로 남긴다.

SFTP 프로토콜이 아닌 SCP 프로토콜을 사용하도록, 대문자 O 옵션을 추가하면 해결된다.

scp(1) - Linux manual page

man7.org

$ scp -O -p -P 29418 username@gerrit.example.com:hooks/commit-msg .git/hooks/
commit-msg                                          100% 1790   378.4KB/s   00:00

git push 할 때 TLS certificate verification 생략하기

joonas — Wed, 4 Sep 2024 20:21:15 +0900

$ git push origin
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.

git push 는 정상적으로 동작하는데, Security warning 검사때문에 push 가 굉장히 지연되는 경우가 있다.

Android Studio 로 git push 했을 때에는 위와 같은 절차가 없이 빠르게 push 되길래 커맨드를 확인해봤더니 아래와 같았다.

$ git push --progress --porcelain origin --no-verify

--no-verify 옵션을 붙여서 SSL 검사를 생략해버리면 된다.

물론 push 하려는 remote url 이 평소에 사용하던 곳이고 신뢰하는 곳일때, 또는 급하게 push 해야하는 경우에 사용하는 것이 좋을 듯하다.

[Browser] pageX/screenX/clientX/offsetX 비교

joonas — Mon, 26 Aug 2024 23:59:54 +0900

아래 이미지에서 빨간색 점이 마우스 클릭 위치이다.

출처: https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

[Ubuntu] 디스크 용량이 남았는데 No space left 오류인 경우

joonas — Sat, 10 Aug 2024 23:23:36 +0900

최근 회사에서 우분투로 프로젝트를 빌드해야하는 일이 생겼는데, 파일 시스템과 관련하여 학부생때 공부했던 이론이 문제 해결에 도움이 된 경험이 신기해서 글로 남겨본다.

이론과 실습, 특히나 다양한 프로그램을 주로 사용하는 우분투 환경에서는 OS, 컴퓨터 구조와 같은 수업에서 배우는 이론적인 부분은 실제 개발하는 중에 크게 마주할 일이 없을거라고 생각했다. 하지만 그런 일이 생겼다.

발단

동료의 컴퓨터에서 빌드 도중 No space left on device 와 같은 이유로 빌드가 중단되었다. 하지만 디스크 용량을 확인해봤을때, 용량은 분명 40GB 정도 남아있었다. (아래는 당시 상황을 재연한 모습이다.)

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1        49G   24G   25G  49% /
tmpfs            64M     0   64M   0% /dev
/dev/root        49G   24G   25G  49% /pid2
/dev/sda2       256G  6.0M   32G   1% /tmp

분명 디스크 용량이 남아있었기 때문에, touch a.txt 와 같은 명령어로 빈 파일을 생성하려고 했는데 그마저도 막혔다.

이 때 문제의 원인은 하나밖에 없다는 생각이 머리를 스쳤다.

원인

"파일을 더 생성하지 못한다는거는, inode 개수를 모두 사용한 것이 아닐까?" 라는 생각이었다.

$ df -ih
Filesystem    Inodes IUsed IFree IUse% Mounted on
/dev/sda1       6.2M  6.2M     0   99% /
tmpfs           7.9M    16  7.9M    1% /dev
/dev/root       6.2M  666K  5.6M   11% /pid2
/dev/sda2       800K   21K  780K    3% /io

파일 시스템의 디스크 사용량을 확인하는 df 명령어에는 inode 를 확인하는 -i 옵션이 있다.
위처럼 inode 를 모두 사용한 것을 확인하고는 학교에서 배우는 내용이 이렇게 쓰일 줄은 몰랐다고 생각했다.

먼저, 우분투는 보통 ext4 파일 시스템을 사용한다.

$ mount -l | grep ^/dev
/dev/root on / type ext4 (ro,relatime,discard,errors=remount-ro)
/dev/root on /nix type ext4 (ro,relatime,discard,errors=remount-ro)
/dev/nbd47 on /repl type btrfs (rw,noatime,nobarrier,ssd,space_cache=v2,subvolid=256,subvol=/working_subv)
/dev/root on /etc/localtime type ext4 (ro,relatime,discard,errors=remount-ro)
...

ext3는 하나의 디렉토리에 최대 6만개 정도의 파일을, ext4는 최대 3만개의 파일을 가질 수 있는 것으로 기억한다.

이번을 기회에 오랜만에 inode 구조에 대해서 다시 공부해보았다.

inode 구조체는 아래 링크에서 직접 확인해볼 수 있다.

fs.h - include/linux/fs.h - Linux source code v6.5-rc1 - Bootlin

/ include / linux / fs.h

elixir.bootlin.com

위 그림을 참고해보면 inode 는 실제로 디스크에 저장되는 block 을 포인터 배열로 들고 있고, 부족한 경우에는 이중/삼중 포인터로도 들고 있지만, ext4 파일 시스템의 경우 용량에 따라 사용 가능한 inode 의 개수가 이미 정해져있다.

해결

하나의 파일은 하나의 inode를 차지한다. 여기서 파일이란 디렉토리를 포함한다.
여담으로, 디렉토리 역시 파일인데, vi 같은 편집기로 디렉토리를 열어보면 하위 파일의 경로가 적혀있는 텍스트 파일임을 알 수 있다.

위와 같은 이유로, inode 를 확보하는 방법은 "최대한 많은 파일을 제거하는 것"이다.
사용되고 있지 않는데 용량이 작은 파일을 최대한 많이 삭제하는 방법, 가장 대표적으로 캐시 파일을 지우는 것이다.

다른 방법으로는 파일 시스템을 변경하는 법이다. ext4는 구조상 ext3 에 비해 1/2배의 inode만 사용할 수 있다.
그렇다는것은, ext3 파일 시스템으로 디스크를 새로 포맷하면 2배의 inode 를 사용할 수 있다는 뜻이다.

하지만 이 방법은, 포맷이 필요하기 때문에 파일을 전부 지워야하는 사태가 발생해서 실제로 적용해보기는 어려운 방법이다.

FAT, NTFS 등의 파일 시스템은 inode 개수가 없는 것으로 알고 있는데, Ubuntu OS 와의 호환성이 좋지는 않은 것으로 알고 있어서 속도가 빠르지는 않을 것으로 예상된다.