목록JavaScript (11)
Joonas' Note
눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임 blog.joonas.io 문제점 1편에서는, 사진에서 얼굴 부분의 비율이 작으면 얼굴을 제대로 찾지 못한다는 문제가 있었다. 1편의 마지막에 얼굴 부분만 잘라낸 이미지에서 face landmark를 찾도록 했더니 결과가 개선되는 것을 확인했으니, 이 작업을 그대로 코드로 작성했다. 해결 먼저 이미지에서 얼굴을 찾는 API로 faceapi.detectAllFaces 를 사용할 수 있다. 한 번의 호출로 이미지에서 찾은 모든 얼굴들의 bounding box 배열을 반환한다. const optio..
예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임을 쉽게 만들 수 있지 않을까했다. 얼굴에서 특징점을 추출하는 솔루션은 꽤 오래 전부터 있었기때문에, 어렵지 않게 찾을수 있을거라 생각했고 실제로도 그랬다. 우선은 이미지를 업로드하고 결과를 바로 보기에 웹이 편할 것 같고, 문제를 만드는 것을 포함해서 게임 UI 까지 구현하는 것도 고려해서 javascript 라이브러리로 찾아보았다. 처음에는 OpenCV-javascript 를 사용해보려고 했는데, 생각만큼 얼굴 사진에서 face landmark 를 잘 찾아내지 못했었다. 얼추 찾기는 하는데 만족스럽지는 못했다. 그래서 ML..
1. 실제로 현재 git config 에 origin 이 없어서 발생하는 오류일 수 있다. 아래 명령어로 remote.origin 주소가 올바르게 설정되어있는 지 확인하고, git remote -v 없다면 아래와 같이 배포하고자 하는 git repository의 주소를 추가한다. git remote set-url origin https://.... 2. origin 설정은 분명 잘 되어있는데 안되는 경우 Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option). npm 과 관련한 모듈과 ..
Context BOJ Extended의 일부 기능을 성능 최적화 하는 중에 생긴 일이다. 확장 프로그램의 특성상, 로드되는 DOM 을 조작하는 일이 많다. 그 중에서 불필요하게 DOM을 조작하느라 속도가 느린 부분이 보여서, 렌더링 단계를 생략할 수 있도록 CSSOM으로 역할을 넘기는 작업을 하고 있었다. 그런데 페이지 로드가 평소보다 심하게 느려져서 확인해보니, 아래와 같은 상황이 발생했다. 해결 무슨 일인지 확인하기 위해서 MDN 문서를 확인했는데, 다음과 같은 문장이 있었다. innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다. 말 그..
vscode의 확장 프로그램(extension)은 javascript 베이스이기 때문에, javascript/ES6/Typescript 로 개발해야한다. (vscode가 electron 프레임워크로 개발한 웹 애플리케이션이기 때문에 그럴 것이라고 추측한다) 간단하게 작성하기에는 package.json 이라던 지 node 세팅이라던 지 귀찮은 환경 세팅들이 많아서 python으로 만들 수 없는 지 찾다가 이런 프로젝트를 찾았다. GitHub - CodeWithSwastik/vscode-ext: Create VSCode Extensions with python Create VSCode Extensions with python. Contribute to CodeWithSwastik/vscode-ext deve..
오늘은 기존에 개발했던 게임의 로그 제공을 업데이트하면서 있었던 일을 정리하고자 한다. 배경 https://www.joonas.io/buffalo-chess/ Buffalo Chess Try to keep your village from the herd of rampaging buffalo www.joonas.io 기존에 만든 버팔로 체스는 Replay와 Share Replay 기능을 제공한다. 턴제 게임으로, 각 턴마다 어떤 타일이 움직였는지와 그 상태를 로그로 기록하고 있다. 그리고 replay 기능에서 이를 다시 읽어서 그대로 시뮬레이션한다. 문제는 Share 기능인데, 서버가 없어서 로그를 URL 파라미터로 아래처럼 직접 전달하고 있었다. https://www.joonas.io/buffalo-ch..
2018년 말에, Semantic-UI 에서 제공하는 progress bar를 살짝 바꾸어서 CSS의 overflow: hidden 속성으로 무한 로딩을 구현한 적이 있다. https://jsfiddle.net/J00nas/xpvt214o/970756/ 위 링크에서도 동작하는 모습을 볼 수 있다. 기존의 progess bar의 인터페이스는 그대로 유지하고 기능만 추가하였기에, 코드도 나름 깔끔한 편이다. 문제는 기존에 제공되는 placement text는 안된다. 당시에 이걸 유지해보려고 많은 삽질을 해봤다가 실패했다. 사실 이 기능은 Semantic-UI에 PR을 날렸으나 무산되었다. [Progress] Add properties for infinite loop as loader style #6691(..
2019/01/31 - [개발] - 실시간 음성 감지 및 자동 번역 크롬 확장 프로그램 개발기 (1편) 실시간 음성 감지 및 자동 번역 크롬 확장 프로그램 개발기 (1편) 이름이 왜 이렇게 기냐구요? 로빈슨 크루소의 원제를 오마주한 겁니다. 이 글은 회고록을 적는 느낌으로 작성했습니다. 1분 소개 영상 소개 크롬에서 현재 보고 있는 탭의 소리(음성)를 인식하여 원하는 언어로 번.. joonas.tistory.com 2편은 이 프로그램을 배포한 이후에 운영하면서 생긴 일과 그 사이에 생긴 통계를 정리하는 글이다. 첫 작성일은 2019년 4월이었고, 2019년 5월 29일, 2019년 9월 17일에 내용을 추가하였다. 1. 한달에 4000분 정도의 양이 STT된다. 근데 그 중 대다수의 결과가 공백 (노이즈..