2020/12/23 - [프로그래밍/자바스크립트] - IFrame YOUTUBE API를 활용한 custom player 개발 1편 IFrame YOUTUBE API를 활용한 custom player 개발 1편 개발하는 해당 툴은 사실 크게 필요가 없다. 왜냐하면 그냥 유튜브에서 보는것이 편하기 때문이다. 해당 API는 구글에서는 외부에서 링크한 걸린 유튜브 영상에 대해서 어느정도 컨트롤 및 정보 shifeed.tistory.com index.html 우선 필요한것은 개발에 필요한 레이아웃이다. 디버깅이 용이하고, 목표한 바를 이루려면 최대한 상상해야 한다. 의도한 결과와 무엇이 다르게 나올지 말이다. 어쩔 수 없다. 그냥 코딩하면 코딩의 결과물이 산으로 가버린다. 귀찮지만 준비과정은 확실해야한다. 나중..
개발하는 해당 툴은 사실 크게 필요가 없다. 왜냐하면 그냥 유튜브에서 보는것이 편하기 때문이다. 해당 API는 구글에서는 외부에서 링크한 걸린 유튜브 영상에 대해서 어느정도 컨트롤 및 정보를 제공하며 해당 API를 활용하여 영상을 보면서 의견 개진이나, 또는 소통이 편할 수 있었으면 해서 만들어 보았다. 구글에서 제공하는 유튜브는 서비스에 대해서 크게 부족함을 느낀적은 없지만 한국인으로써 약간의 아쉬운점이 있다면 바로 영상 댓글일것이다. 모두 보기 힘들며, 시간순서대로 정렬되지 않고, 여러 외국인도 함께 보는 영상인이라면 영어가 우선으로 뜨기 때문에 영상을 보고나서 또 즐길 수 있는 댓글의 재미가 반감이 되버리고, 불편한 면이 있다. 이러한 영상을 보고 감상을 하거나 이야기 하는데 이 해당API를 응용하..
농구를 하는것을 좋아하고 보는것도 좋아하는 사람이지만, 제대로 배웠다기보다 서당개처럼 옆에서 보고 익힌 사람으로써 가장 햇갈렸던것들이 바로 농구 룰이다 아무래도 야구처럼 턴제형 스포츠도 아니고 축구에 비해 좁은 코트에서 뛰다 보니 인구 밀집도가 높고 그만큼 몸싸움이나 좁은 코트, 그리고 룰에 의한 움직임 제한이 많아서인지 농구 룰은 복잡하기 그지 없다. KBL에서는 오심논란이 끊이질 않는다(사실 사람이 하는 이상 오심은 무조건 나온다) 그리고 FIBA에서도 국제 심판을 본 사람이 있기도하고, FIBA에서도 KBL 심판들이 괜찮은 심판들이라는 이야기를 해도 KBL의 심판은 오심 제조기이며 못 본다는 인식은 농구팬들에게 당연하다는듯한 인식이 되어있다. 이러한 오해를 줄이고자 비디오 룰북을 NBA에서 만들었던..
이번에 다룰 트래블링은 속공상황(트랜지션)에서의 트래블링 묵인과 하프코트 상황에서의 대표적인 트래블링 묵인을 살펴 보려 한다. 앞선 글에서 트래블링인데 불리지 않는 3가지 이유를 들었었다. 1 .누가봐도 너무 심하게 저질렀거나2. 티나지 않을 정도로 자연스럽거나(선출 특혜 스텝이 생긴 이유)3. 해당 스텝이 별 이득이 없는 경우. 하프코트 우선 하프코트에서 가장 묵인 되고 넘어가는 것은 바로 해당 스텝이 별 이득이 없는 경우 일 것이다. 별 이득이 없다는 것은 무슨 말일까? 농구를 조금 보았거나 해본 사람이라면 공격자 3초룰은 패널티 에어리어 안에 있어도 공격 의사가 없다면 3초룰을 적용시키지 않는다는 등의 말을 들어보았을 것이다. 마찬가지로 트래블링에도 규정에는 없지만 암묵적으로 적용되는 것들이 있다...
트래블링은 매우 햇갈리는 룰이다. 개정전이나 개정 후에나 여전히 햇갈리며 같은 장면에서도 정식 심판들조차 판정이 갈린다. 근데 사실 룰북을 보면 다소의 예외의 상황과 집중해서 읽어야 해서 그렇지 명확하기도 하고 생각보다 논란이 되는 부분은 없는 것을 알 수 있다. 그런데 왜 매경기마다 논란이 발생할까? 그 이유는 실제 FIBA 또는 NBA 공식룰북에 적혀있는 룰과 실제 경기에서 적용되는 룰이 다르기 때문일것이다. 트래블링 룰은 농구 룰중에서 가장 긴 항목 중 하나이지만 해석하기 어려운 룰은 아니다. 드리블을 시작하는 과정, 드리블을 끝내는 과정, 패스를 받는 과정에서의 발의 제한에 대한 룰이다. 좀 더 줄여 말하면 드리블 중을 제외한 공을 소유한 상태에서의 스텝 수에 대한 제약인 룰이다. 하지만 아무리 ..
javascript로 플러그인이나 라이브러리 좀 더 편한 개발을 위해 제작하다보면 innerHTML을 많이 활용하게 된다. var div = document.createElement('div'); div.className = "modal"; div.innerText = '모달내용'; document.body.appendChild(div); 이렇게 하는것보다 document.body.innerHTML += `모달내용 이 편하기 때문이다. 하지만 innerHTML의 경우 추가된 내용만 추가하는것이 아니라 모든 내용을 처음부터 다시 그린다. 새로 작성하는것과 마찬가지라는 것이다. 그래서 등록된 이벤트, 현재 진행중인 이벤트 모든것이 취소가 된다. 물론 해당 태그에 직접 onclick등으로 된것은 해당 엘리먼트..
프로그래머가 처음부터 개발을 담당한다면 이러한 일은 별로 없겠지만 누가 만들고 간 소스, 누가 만들다 만 소스. 만들어진 소스에 커스텀한 소스 등을 맞이 하다 보면 이런 상황이 필요해질 때가 있다. 인터넷에서 검색해보니 JQuery 이미 나와있다. jQuery.fn.serializeObject = function() { var obj = null; try { if(this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) { var arr = this.serializeArray(); if(arr){ obj = {}; jQuery.each(arr, function() { obj[this.name] = this.value; }); } } }catch(e) {..
2020/12/20 - [프로그래밍/자바스크립트] - WebAssembly를 활용한 Rich Text Editor 제작기 1편 [WebAssembly를 활용한 Rich Text Editor 제작기 1편 WebAssembly 아직까지 많은 활용은 이뤄지지 못하고 있지만 모든 모던 웹브라우저가 지원을 하기 시작했고, 많은 양의 데이터의 처리가 항상 문제가 되는 웹 특성상 이 속도를 획기적으로 줄일 수 shifeed.tistory.com](https://shifeed.tistory.com/entry/WebAssembly를-활용한-Rich-Text-Editor-제작기-1편) 실제 문서 편집에 필요한 아이콘 추가하기 앞서는 간단히 Rust에서 Dom을 조작할 수 있게 설정하고 최소한이 필요함인 텍스트 에디터 형태..
WebAssembly 아직까지 많은 활용은 이뤄지지 못하고 있지만 모든 모던 웹브라우저가 지원을 하기 시작했고, 많은 양의 데이터의 처리가 항상 문제가 되는 웹 특성상 이 속도를 획기적으로 줄일 수 있는 웹 어셈블리는 앞으로 확실히 그 사용용도나 가치는 증가할 것으로 보인다. c, c++, golang, rust 등 다양한 언어 등으로 개발 할 수 있다. 개인적으로 설명을 더 하고 싶지만 설명보다는 직접 해보는것이 빠르고 이미 웹어셈블리가 가진 장점이나 단점 가능성 등은 구글에서 검색만 해봐도 나오기에 굳이 쓰지 않겠다. Rich Text Editor 외국웹에선 위와 같은 명칭으로 불리지만 쉽게 말하자면 말하는 웹에디터이다. 스마트에디터, 다음에디터 등 웹에서 조금 더 서식을 꾸며 작성할 수 있게 하는 ..
- Total
- Today
- Yesterday
- craco
- #useState 특징
- 배포
- #업데이트가 이상하게 될떄
- #노력만 가상한 글
- ffmpeg
- Rust
- #팀별 분석
- contributor
- HWP
- JavaScript
- contributer
- vscode
- youtube
- 티스토리API
- WASM
- KBL
- #useState
- #그래프
- 팀별 분석
- API
- webassembly
- vtie
- 무관의 왕
- 웹어셈블리
- iframe
- 그래프
- 마크다운
- 7위를 하는 이유
- 노력만 가상한 글
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |