Joonas' Note

다가온 인공지능 시대에 대한 블로거의 감상

joonas — Mon, 25 May 2026 18:20:29 +0900

오랜만에 포스트를 적는 이유는, 여가 시간의 대부분을 여행으로 보내면서, 기술적으로 작성해야 할 내용이 있을 만큼의 공부가 없었기 때문이다. 하지만 최근 몇 년 사이에 LLM 서비스들이 안정적으로 결과를 생성하게 되면서, 그리고 그러한 서비스들(ChatGPT, Gemini 등)을 사용하면서 느끼는 점 역시 더 이상 글을 적지 않는 것도 한 이유이다.

네이버 블로그를 시작으로, 본격적인 기술 블로그는 Google Blogger를 거쳐 (https://blog.joonas.io/250 참고), 티스토리를 플랫폼으로 삼아 도메인만 호스팅하고 있다. 그리고 글의 작성 목적이 나를 위한 글임은 여전하다.

AI 기반의 질의(Q/A)와 검색 결과(아마도 RAG?)가 제공되기 이전에는 나의 글을 찾는 것이 쉬웠다.
즉, 나의 언어로 인터넷에 질문을 던졌을 때, 나를 위한 대답을 과거의 내 포스트로부터 찾을 수 있었다.
그리고 이건 내 주변의 사람들에게 설명할 때도 많은 도움이 됐다.

'중국인의 나머지 정리' 구글 검색 결과

하나의 사례로, 중국인의 나머지 정리를 검색하면 두 개의 위키 사이트를 제외하면 상단에 이 블로그가 나온다.
하지만 최근 활성화 된 구글의 AI Overview 에는 조금 다른 출처들이 사용되고 있다.

Google Search - AI Overview 검색 출처

여기에서 느끼는 바는 크게 두 가지이다.

하나는, 나를 위해 작성되었던 글과 그림 그리고 작성 당시의 기억들은 찾기 어려워졌다.
다른 하나는 위에서 이어지는 생각으로, 글로 작성할 만큼 내가 정리할 필요가 없어졌다.

어딘가에서 우스갯소리이면서 동시에 괴담으로써 죽은 인터넷 이론이 종종 언급되고는 한다. 그 진위를 떠나서 내용과 결과만큼은 생각해 볼 만한 주제이다. 컴퓨터 공학에서는 "Garbage In, Garbage Out" 라는 유명하고 뼈 있는 격언이 있다. 쓸데없는 입력은 쓸데없는 출력을 만들 수밖에 없다는 이 문구를, 인터넷에서 정보를 소비(조회)만 하고 생산자가 더 이상 존재하지 않는 세상을 생각해 보면, 죽은 인터넷 이론은 마냥 이론으로 남지 않을 수 있다는 생각이 든다.

과거에 우연히 하나의 글을 읽었는데, 블로그에 글을 작성하는 이유로 "본인 역시 인터넷에서 받았으니 인터넷에 돌려주는" 정보의 선순환을 언급하신 글이 있었다. 이 문장은 지금도 크게 공감하고 있는 문구이다. 하지만 다가온 시대에 던져지는 물음이기도 한 것 같다.

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