개발에 대한 두서 없는 이야기

실제로 IE을 고려하며 개발을 시작하는 경우는 없겠지만 이미 IE까지 고려하여 개발된 사이트들은 무수히 널려있고, 이러한 사이트도 꾸준히 유지보수를 해야하며, 이러한 사이트는 이미 IE라는 악마에 걸려있기에, 꾸준히 IE의 지원도 고려해야한다. IE의 난관은 크게 두가지가 있는데, 모던 브라우저에서 동작되지 않는 문법, 함수, 또는 IE만 존재하는 변수, 같은걸 사용했어도 달리 출력하는 등..(이 부분은 IE만의 문제는 아니다) 보통 스크립트 구조내에서 babel을 때려박으면 대부분 해결되는 일이다. 다만 IE자체가 워낙 오래된 브라우저다 보니 엔진 자체가 구려서, 사이트가 다루는 데이터량이 방대할때 이 속도를 해결할 수 없는경우가 많다. 대부분 큰 테이블 데이터를 다루거나, 차트같은 라이브러리를 활용할..

자바스크립트에는 변수 선언 방법이 3가지 있다. var, const, let var은 자바스크립트의 시작부터 존재하던 함수 선언이지만 해당 변수가 가장 복잡한 면이 있기에 추후에 가장 나중에 설명하도록 하겠다. const temp = "hi" temp = "hi" //불가능 const dom = document.getElementById("test") //id:test라는 엘리먼트가 html에 그려져있는 경우 dom.innerHTML = 'hi' //가능 dom = document.getElementById('temp'); //불가능. functoin 우선 const의 특징이다. const는 한번 선언하면 재사용, 재선언 할 수 없으며 해당 함수도 사용이 불가능하다. 다만 자바스크립트의 특징. 개같음은 ..

vue2에서 cretated(), mounted(), computed() 등의 라이프싸이클은 setup에서 모두 포함시켜 활용 할 수 있다. 특정한 변수에만 해당 라이프 싸이클을 입력하는것이 vue2와 달라진 큰 차이점이라 볼 수 있겠다. 아래는 타입스크립트에서 ref객체를 사용하는 예제이다. 버튼 import { defineComponent, ref} from 'vue'; export default defineComponent({ name : 'View_Comment', props : { bo_table:String, wr_id:String }, setup(props) { //props, 상위 객체가 있을시 props로 값을 받을 수 있다. const bo_table = props.bo_table; c..

interface view { t1 : string test?:{ count?:number } } const v:view = { t1 : "hello, typesciprt", } 로 하면 추후 api나 함수 실행으로 값이 변경되어 test 값에 들어간것을 읽을때 에러가 난다. let v:view = { t1 : "hello, typesciprt", test :{ count : 0 } } ?로 선언했더라도 하위 배열이나 오브젝트가 있으면 초기값을 선언해줘야 제대로 읽을 수 있다. 버그인지 아닌진 모르지만 관련 문제가 발생했을때 이렇게 해결했다.

절망편 앞서 말한것이 희망과 미래에 대해 이야기 했다면 현재 왜 적용이 힘든지, 사용이 힘든지 말해보겠다 우선 wasm은 많은 메모리를 필요로 한다. 물론 간단한 수식 계산이나 간단한 정렬 계산 등 메모리 안에 들어가야할 것이 크지 않은 경우 큰 문제가 되지 않지만 그것이 이 글에서 말하고자 하는 FFmpeg일 경우 문제가 된다. 앞서 말한 순수한 자바스크립트로 만든 클라이언트용 FFmpeg은 코어가 아닌 풀패키지로 한다면 용량만 순수하게 100MB가 넘는데, wasm도 많이 최적화를 했음에도 25MB라는 거대한 용량을 가지게 된다. 이러한 용량은 사이트내에 직접 wasm모듈을 업로드하기 어려워지고 cdn을 활용할 수 밖에 없어지게 된다. 물론 최근의 cdn은 속도이슈도 그렇게 크지 않고, 접속도 원활하..

FFmpeg 이란? 동영상의 인코딩과 디코딩을 하는 프로그램 중 하나이며 가장 유명한 오픈소스 라이브러리이다. 사실상 업계 표준이며 독점적인 위치에 있다고 볼 수 있다. 웹사이트에서 FFmpeg을 쓰는 이유 웹사이트에서 FFMPEG을 쓰게 되는 이유는 바로 트래픽 절감이다. 움짤(GIF)포맷은 나온지 20년이 가까이 된 포맷이라 최적화, 화질 등에서 좋지 못하지만 움직이는 그림이라는 이라는 독점적인 지위때문에 아직도 사용자들이 많이 사용하고 쓰이고 있는 포맷이기 때문이다. APNG, WebP 등 GIF의 위치를 차지하려는 후발주자의 포맷들은 드문드문 나오긴 했지만 다양한 웹환경(IE, Safari, Chrome, FireFOx, Opera, Edge 등…)에서 전부 다 지원하지 못하는 이미지 포맷이기에 ..

로 호출 할 수 있다. ES6의 문법중 하나인 모듈로 불러오는 방법이다. 우선 러스트로 빌드하는 경우 pkg폴더 내에 관련 파일들이 생성되는데 bulid.js를 불러 온다. 뜻에서도 알 수 있겠지만 자동적으로 빌드가 된 wasm에서는 init함수는 기본적으로 포함되어있으며 해당 함수를 실행하여야 정상적으로 실행된다. 웹어셈블리를 활용하는데 ES6 문법이 어색한 사람은 없겠지만 모듈을 활용하지 않고도 호출할수 있다. wasm-pack build --target no-modules 모듈없이 빌드하는 방법이다. ; 다만 위의 방법으로 빌드 할 시 웹어셈블리내에서 웹어셈블리가 아닌 외부의 스크립트들의 함수를 불러내 사용할 수 없다. 그외에도 nodejs에서도 빌드 할 수 있는 방법이 있으며 모든 기기에 호환되게..

2020/12/23 - [프로그래밍/자바스크립트] - IFrame YOUTUBE API를 활용한 custom player 개발 1편 IFrame YOUTUBE API를 활용한 custom player 개발 1편 개발하는 해당 툴은 사실 크게 필요가 없다. 왜냐하면 그냥 유튜브에서 보는것이 편하기 때문이다. 해당 API는 구글에서는 외부에서 링크한 걸린 유튜브 영상에 대해서 어느정도 컨트롤 및 정보 shifeed.tistory.com index.html 우선 필요한것은 개발에 필요한 레이아웃이다. 디버깅이 용이하고, 목표한 바를 이루려면 최대한 상상해야 한다. 의도한 결과와 무엇이 다르게 나올지 말이다. 어쩔 수 없다. 그냥 코딩하면 코딩의 결과물이 산으로 가버린다. 귀찮지만 준비과정은 확실해야한다. 나중..

개발하는 해당 툴은 사실 크게 필요가 없다. 왜냐하면 그냥 유튜브에서 보는것이 편하기 때문이다. 해당 API는 구글에서는 외부에서 링크한 걸린 유튜브 영상에 대해서 어느정도 컨트롤 및 정보를 제공하며 해당 API를 활용하여 영상을 보면서 의견 개진이나, 또는 소통이 편할 수 있었으면 해서 만들어 보았다. 구글에서 제공하는 유튜브는 서비스에 대해서 크게 부족함을 느낀적은 없지만 한국인으로써 약간의 아쉬운점이 있다면 바로 영상 댓글일것이다. 모두 보기 힘들며, 시간순서대로 정렬되지 않고, 여러 외국인도 함께 보는 영상인이라면 영어가 우선으로 뜨기 때문에 영상을 보고나서 또 즐길 수 있는 댓글의 재미가 반감이 되버리고, 불편한 면이 있다. 이러한 영상을 보고 감상을 하거나 이야기 하는데 이 해당API를 응용하..

일반적으로 동영상의 썸네일은 FFMpeg을 활용하여 서버단에서 처리하지만 간단하게 클라이언트쪽에서도 처리 할 수 있다. 주석을 참고 하기 바란다. 이런식으로 동영상 파일 첨부시 클라이언트단에서 동영상의 특정 부분을 캡쳐하여 이미지화 할 수 있고 썸네일을 만들어서 파일 전송시 같이 보내 줄 수 있다.