소프트웨어 개발자의 멋진 점 하나는 제 머리와 손을 거쳐 태어난 제품이 무수히 많은 사람에 쓰일 수 있다는 것입니다. 제가 소프트웨어에 처음 관심이 생기게 된 건 게임이었습니다. 상용 게임 제작 도구로 마음속으로 상상하던 내용을 직접 게임에 담는데 한계로 다가왔을 때, 컴퓨터 프로그래밍까지 공부하게 된 것입니다. 그러다 게임 이외 사회 전반에 있는 컴퓨터 소프트웨어들을 이해하고, 내가 만든 프로그램이 사람들에게 알려지면 좋겠다는 욕심도 생겨났습니다. 이제 이 욕심은 내가 만든 프로그램이 많은 곳에 쓰이게 된다는 목표가 되었습니다.
목표는 매일매일 프로그래밍을 공부하는 원동력이 되어, 다양한 프로그램을 개발하고, 조금씩 배우고 있습니다. 앞으로 제가 개발한 소프트웨어가 많은 사람에 편리를 주고, 사회에 영향을 끼칠 수 있도록 노력하겠습니다.
음 높이(Pitch) 예측 모델 정리
음악 오디오 파일에서 가수의 노래 목소리의 음 높이를 추출하는 작업을 하면서, 사용해 본 음 높이 예측(Pitch Estimation) 모델을 정리하였습니다. 기계학습과 관련해서 잘 알고 있지는 않지만, 관련된 글이 없어 개인적으로 사용할 때 참고용으로 적어 보았습니다.
위도와 경도를 사용하여 가까운 지점 찾기
프로젝트를 진행하면서 자신과 가까이 있는 지점들을 검색하는 기능이 필요했다. 데이터베이스에 아래와 같이 모든 지점들의 위도와 경도를 실수 형태로 가지고 있다. 이때 한 지점과의 직선 거리가 일정 값 이하인 지점들을 어떻게 찾을 수 있을까?
대칭 최소-최대 힙(SMMH)
대칭 최대-최소 힙(SMMH, symmetric min-max heap)은 양쪽 끝 우선순위 큐를 표현할 수 있는 자료구조이다. 양쪽 끝 우선순위 큐(double-ended priority queue)는 일반적인 우선순위 큐와 달리 최소 우선순위 원소의 반환과 삭제, 최대 우선순위 원소의 반환과 삭제를 동시에 지원하는 자료구조이다.
최대한 빠르게 한글 검색하기
학교 과제나 작은 프로젝트를 진행하면서 검색 기능이 필요한 경우가 있다. 다행히도 Elasticsearch (엘라스틱 서치)라는 훌륭한 오픈소스 검색 엔진을 사용하면 검색 기능을 쉽게 만들 수 있다. 그런데 하나씩 꼼꼼히 익혀가면서 만들기에는 홈페이지의 가이드 내용이 너무 방대하다. 그런 상황에 쓸 수 있게, 한글 검색이 최소한으로 작동만 하게 만들어 보는 가이드 글이다. 오라클 클라우드 프리티어에서 제공하는 무료 Compute 인스턴스의 메모리 용량은 1GB이다. 이 글의 목적에서 알 수 있듯이 무료 Compute 인스턴스에서 작동해줬으면 했기에, 1GB 메모리 우분투 서버 가상머신에서 테스트되었다.
재생 중인 동영상과 음악 컨트롤하기 [실패]
이번에 토이프로젝트로서 만들고자 한 프로그램은 웹 브라우저의 동영상과 음악을 재생, 정지 등을 할 수 있는 제어 프로그램이다. 이와 같은 프로그램을 계획하게 된 이유는 동영상을 재생한 상태로 창을 최소화하고 소리만 들을 때가 있는데, 브라우저 창을 다시 열 필요 없이 편하게 제어하기 위해서이다. 사실 비슷한 기능이 존재하긴 했지만 부족한 점이 있었다. 문단 아래 사진은 크롬 브라우저와 윈도우에서 제공하는 미디어 제어 기능의 사진이다. 크롬 브라우저는 Media Session이 잘 정의된 웹페이지의 경우 '뒤로 이동' 등 모든 기능을 제공하지만, 무조건 창을 키우고 주소창 옆의 버튼을 눌러야 하는 점이 불편했다. 이와 달리 윈도우의 기본 기능은 불륨 조절 키를 누르면 우측 위에 바로 나타나지만, '뒤로 이동'과 같은 기능을 제공해 주지 않았다.
Next.js에서 Quill 에디터 사용하기
이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공한다. 아래와 같이 Quill 에디터를 사용하게된 이유 Next.js를 통해 개발을 진행하면서 Quill 에디터를 사용하고자 했다. 그런데 Quill에서 바꾸고 싶은 부분이 있어 그 부분을 수정한 후 직접 빌드하여 사용해야 했다. 직접 빌드된 걸 react-quill에 적용하기 번거로워 보였다. 또, 어떤 블로그 글에서 react-quill을 사용하는 것이 직접 스크립트를 불러오는 것보다 번거롭다는 말이 있어 react-quill을 사용하지 않고 아래와 같은 방식으로 시도하였다. 이 글의 코드는 이 분의 블로그에서 소개된 내용에서 React Hook으로 변환 및 일부 코드를 추가한 것이다. 해당 블로그에서 React에서 Quill을 적용하는 방법을 올려주셔 잘 적용할 수 있었으나, 아쉽게 글을 내리신 걸로 보인다. 그래서 혹시 Next.js에서 Quill 에디터를 직접 로드하는 방식으로 사용하려는 분이 있다면 코드를 참고하라고 이 글을 올리게 되었다.
