목록JavaScript (9)
Joonas' Note
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된다. 근데 그 중 대다수의 결과가 공백 (노이즈..
node.js + socket.io로 간단하게 실시간 이벤트 서버를 만들려고 했다.약 3~4년 전에 비슷한 개발을 해봤기에 무리없이 될거라고 생각했으나, 하루종일 삽질했다. 서버단과 클라이언트단의 코드 모두 공식 도큐먼트로 작성하였으니 틀릴리가 없었다. 첨부하자면 아래와 같다.페이지가 로드되면 서버에 연결을 시도하고, 연결되면 test 후 종료하는 테스트 코드이다. 근데 서버쪽에서는 엄청나게 많은 연결이 시도되고 있었다. (서버쪽 화면이 connected!로 도배되고 있었다.) 하지만 이게 웬, 정작 클라이언트쪽 socket 변수의 connected 속성은 false였다.참고로 express는 v4.16.3, socket.io는 v2.1.1, node.js는 v10.6.0 이었다.결론은, 아래 한 줄로 ..
https://joonas-yoon.github.io/MenuSelectHelper/ 친구가 저녁메뉴를 계속 못 골라서 그냥 아무거나 나오는 거 먹으라고 하려고 구현 저녁 약속시간까지 2~3시간 남짓 남아서 그동안 만들었다. 메뉴 항목들은 이 그림을 참고했음. 사실 다 핑계고 시험기간에 공부하기 너무 싫었다. 구현도 그렇고 색깔 바뀌면서 골라지는 게 생각보다 재밌어서 이것저것 추가해봤다. 서브라임 켜서 크롬으로 확인하며 구현한거라 HTML + javascript가 전부. 비빔냉면/물냉면도 정해주는 갓갓인 구조. 탕수육 찍먹/부먹은 추후 업데이트 (...) 매운걸 못 먹거나 비린걸 못 먹는 친구가 있어서, 특정 메뉴는 제외하는 기능도 추가하면 좋지 않을까 생각중