JavaScript 17

영상자막을 채팅처럼 표현하기

DASHI 서비스를 계속 발전시키는 도중에, 트위치 채팅도 다시볼 수 있었으면 좋겠다고 생각했다. 문제는 채팅이 영상과 맞게 정확한 시간에 올라와야한다는 건데, 그래서 채팅을 WebVTT로 만들었다. 즉 영상 자막이 된다는 건데, 일반적인 영상 자막처럼이 아니라 세로로 스크롤하며 올라오는 채팅포맷이어야 했다. var track = video.textTracks[0]; track.oncuechange = function() { var cue = this.activeCues[0]; if (cue) { console.log(cue.text); } }; 영상에 자막을 추가하고, 영상자막이 변경될때마다 console에 로그를 찍는 코드다. 이를 이용해서 Container에 채팅 Element를 하나씩 추가하고 스..

Kotlin은 왜 나왔고, 왜 Android 공식언어로 채택되었을까?

Kotlin은 어떤 언어? Intelij IDE로 유명한 Jetbrains에서 개발 2017년 구글에서 안드로이드 개발 정식언어로 채택 (왜 채택?) ‘Interoperatablity’ 강조, 틈새를 파고드는 전략 → 기존에 개발된 프로젝트 / 라이브러리를 그대로 사용가능 엄청 특별한건 아님… JVM language들 다 되긴함 Scala / Groovy / Jython… Kotlin In Action: Kotlin의 주요 목표는 더 간결하고, 생산적이면서 안전한 Java의 대안을 제공하는 것. → But Java의 대안에 초점보다는 실용적임 / 간결함 / 안전한 언어에 초점 객체지향 프로그래밍 뿐만아니라 함수형 프로그래밍 스타일도 지원 일급함수(First-class functions) 불변값 (Immu..

CloudFlare KV로 앱 점검시간 관리하기

왜 Cloudflare Worker? 개발중인 앱 실행시 스플래시 화면에서 진입점(Entrypoint)을 결정하고 간단한 정보들을 내려주는 API가 있다. 포함되는 데이터는 API 서버 URL, 앱 버전 업데이트 정보, 점검시간 정보 등 앱 실행을 위한 필수정보들이다. 이는 CloudFlare Worker 로 구현되어있는데, 아래와 같은 이유로 채택하게 되었다. 앱 API 서버와 별개로 동작할 것: 서비스 점검 등으로 서버가 다운되었을때도 정보를 전달할 수 있다. 빠르고 안정적인 응답을 내려줄 것: Cloudflare 전역 네트워크 위에서 돌아가서 50ms 이내 응답이 가능하다. 수정 및 배포가 용이할 것: JS를 써서 언어적 장벽도 낮고 Wrangler라는 CLI를 제공해서 배포가 편리하다. 요구사항:..

[Kotlin] CompletableDeferred의 개념과 활용

Promise가 그리울때 이벤트 기반으로 통신하는 프로토콜을 구현중에, JS의 Promise나 Dart의 Completer와 비슷한 역할을 하는 Kotlin 친구가 없을까하다 찾게되었다. 완벽한 대체재다! CompletableDeferred는 public function을 이용해 완료하거나 취소할 수 있는 Deferred이다. 이를 활용하면 내가 원하는 시점까지 기다렸다가 값을 받을 수 있다. 그럼 SuspendableCoroutine이랑 뭐가 다르냐? 라는 생각이 들 수 있다. SuspentableCoroutine은 해당 블록 안에서만 complete/cancel을 제어할 수 있지만, CompletableDeferred는 그런 제약이 없다. CompletableDeferred : Functions ab..

프로그래밍을 위한 수학 - 마찰력 모델링

마찰력(Friction)은 두 물체의 접촉면 사이에서 물체의 운동을 방해하는 힘이다. 그림에서처럼, 썰매와 눈이내린 언덕사이의 마찰력때문에 이 썰매는 언젠가 멈추게 될 것이다. 그러면 프로그래밍에서 이 썰매를 어떻게 멈추게 할 것인가? 이 글에서는 두 물체가 상대적으로 움직이면서 문질러질때 발생하는 운동 마찰력만을 다루려고 한다. 마찰력의 공식은 다음과 같다. 이제 마찰력을 크기와 방향 두 성분으로 나누어 어떻게 계산하면 되는지 살펴볼 것이다. 먼저 방향이다. 마찰력의 방향은 물체에 작용하고 있는 힘과 반대로 작용한다. 공식에서 v는 속도 벡터를 의미하는데, 속도 벡터에 -1을 곱해 방향을 반대로 틀었다. // 벡터의 크기 구하기 function getMagnitude(x, y) { return Math..

프로그래밍을 위한 수학 - X축과 직선이 이루는 사이각 구하기

마우스로 찍은 점을 기준으로 야구공이 회전하는 기능을 만들 것이라고 가정 해보자. 그림은...벡터로 되어있지만 어쨌든 검은색 화살표 끝이 가리키는 방향이 유저가 찍은 좌표 x, y라고 하겠다. 야구공은 얼마만큼 회전해야할까? 위에서 본 그림을 우리에게 익숙한 직각 삼각형으로 나타내면 사이각 θ에대해 이렇게 정리할 수 있다. 우리는 V에대해 모르기때문에, 탄젠트 식으로 θ값을 구할 것이다. 양변에 역탄젠트(Arctangent)를 취해주면 식은 θ에 대하여 정리된다. 구글에 Math.atan2를 쳐서 가장 위에나온 javascript atan2 메소드의 설명을 가져와 보았다. The Math. atan2() method returns a numeric value between -π and π represen..

국기 이모지 동적으로 생성하기 (ISO 국가코드 사용)

국가 코드(ISO-3166-1 Alpha-2 Code)를 사용하여 국기 이모지 유니코드를 얻어오는 방법이다. 반대로, 국기 이모지를 받아서 국가 코드로 변환할 수도 있다. 반드시 countryCode가 제대로 들어온다는 보장이 있어야하기 때문에 "/^[a-z]{2}$/i" 같은 정규식을 추가해 줄 수도 있다. Javascript const OFFSET = 127397; function getFlag(countryCode) { const codePoints = [...countryCode.toUpperCase()].map(c => c.codePointAt() + OFFSET); return String.fromCodePoint(...codePoints); } Kotlin const val OFFSET = ..

[Javascript] Canvas 태양, 지구와 달 애니메이션 그리기 (Circle animation)

태양을 중심으로 지구, 지구를 중심으로 달을 움직이는 애니메이션을 만들어보았다. 코딩으로하는 애니메이션에 대해서 그동안 감이 좀없고 낮설었는데, (특히 게임 스크립팅도...) 익숙해질겸 건드려보고있는데 이거...재밌다..ㅋㅋㅋㅋㅋㅋ 우선 매 프레임마다 모든 요소를 다시그려주어야한다. 어렸을때 책 귀퉁이에 한장 한장마다 그려서 쭈루루룩 넘기면서 애니메이션을 만들었던것처럼, 다음장을 넘기고 그리고를 반복한다. 반복 윈도우가 로드되면, 루프를 시작한다. 이 루프는 일정한 프레임마다 영원히 돌면서 update()를 실행시키게 된다. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); window.onload ..

프로그래밍을 위한 수학 - 삼각비, 삼각함수 그래프

삼각비 각 A의 크기가 같은 세 직각 삼각형 ABC / ADE / AFG은 모두 닮은 도형이다. 이 닮은 도형들의 대응변 길이의 값은 항상 그 비율이 같게 된다. CB / AB = ED / AD 이런식으로... 이렇게삼각형의 각 변에 대해서 두 변의 길이의 비례값을 구할 수 있는데, 이것이 sin, cos, tan이다. sin A, cos A, tan A를 모두 통틀어 각 A에 대한 삼각비라고 한다. 유치하지만 이렇게 sin, cos, tan을 외웠었지...아무튼 각 삼각비가 어느 변들의 비례를 말하는 것인지만 기억하면 된다. 특수각 30° / 45° / 60°도에대한 삼각비 값이 정리된 표를 심심찮게 볼 수 있지만 아래처럼 계산하기 편한 삼각형을 만들어서 특수각들에 대한 sin, cos, tan 값을 ..

DOMContentLoaded와 jQuery document.ready()의 중요한 차이점

포스팅을 보다보면 javascript의 DOMContentLoaded와 jQuery의 ready()가 동일하다고 설명되어있다. 결론부터 말하자면, 동일한 시점에 Trigger되는 것은 맞지만 이들의 작동방식에는 중요한 차이점이 있다. document.addEventListeners('DOMContentLoaded', function () {}) $(document).ready(function () {}) DOM이 준비되어 조작해도 되는 상태가 되면, ready()나 DOMContentLoaded가 호출 된다. 하지만 DOMContentLoaded의 경우 addListener를 한 시점이 이미 이벤트가 일어난 시점(DOM이 준비되어버린)인 경우에는 호출되지 않는다. 반면에, ready()의 경우에는 이미 ..