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

참조한 문서. 티스토리 공식 API문서 가이드1 https://tistory.github.io/document-tistory-apis/ API 발급 페이지 https://www.tistory.com/guide/api/manage/register 과거 국내 상용서비스 API 연동을 했었는데 이때도 가이드 문서대로 따라했는데 되지 않아 되지 않는 이유를 메일로 보냈더니 API 제공업체에서 키값을 누락시켰던 경험이 있다. 그리고 문서가 2개가 제공 되었었는데 현재 API와 차이점이 꽤나 있어 애먹었던 기억이 있다. 물어볼 사람도 없고.. 우선 페이지를 딱 열었을때 느낌은 국내 서비스 업체 답지 않게 API가 어느정도 되어있다는 느낌이였다. API의 형태는 가지고 있는 발급받은 키값을 활용해 설정한 특정페이지에..

에디터가 구리다. 티스토리 블로그를 시작한지 얼마 되지 않았지만 하면서 가장 불편함을 느낀것이 바로 에디터였다. HTML 편집기능을 어느정도 제공은 하지만 모바일에는 적용이 제대로 되지 않고, HTML 에디터는 불편하고 소스 보기도 불편하다. 마크다운은 제대로 지원되지 않는다. 그러던 와중에 티스토리가 글쓰기, 글 수정, 이미지 업로드 등에 대한 API를 제공하는것을 알았고 차라리 이 API를 활용하여 별도의 글쓰기 폼을 가지는게 낫다 싶었다. 웹에서 사용할 수 있는 에디터는 상용 에디터가 아니더라도 최소한 티스토리 에디터보다는 좋은 기능을 가진것이 많고, 많은 후보군중에서 마크다운 에디터와 위지윅 에디터를 동시에 겸할 수 있는 국산에디터인 Tui Editor를 사용하기로 했다. 에디터에서 필요했던 기능..

로그인이나 서버에서 권한을 얻기 위한 다양한 방법이 있지만 JWT의 경우 클라이언트에 저장시켜 서버에 부담을 줄일 수 있고 어느 방법이나 신경써야 할 보안은 있지만 JWT의 방식은 실사용서버에도 사용할만큼 괜찮은 듯 하다 iss: 발급자 sub: 제목 aud: 대상자 exp: 만료시간 type : NumericDate nbf: 활성시간(이 시간 후에 토큰 기능이 활성화 된다) type: NumericDate iat: 생성시간 jti: 고유키 그누보드를 vue로 포팅하면서 날림 코딩해버린 백단 부분이 많이 신경쓰였는데 라라벨이나 코드이그나이터를 사용하지 않고 웹호스팅에서도 사용할 수 있는 라이브러리를 사용하려 한다. 사실 vue용으로만 쓰면 jwt는 필요 없을것 같지만, 확장성을 위해 php-jwt와 ro..

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

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

1. 모바일에 개발자 콘솔을 설치하기. https://github.com/liriliri/eruda 를 설치하면 위의 그림고 같이 오른쪽 하단에 톱니바퀴 모양의 버튼이 생긴다 해당 버튼을 클릭하면 위의 스샷에서와 같이 일반적으로 브라우저에서 지원하는 개발자 콘솔을 확인할 수 있다 2. PC 크롬과 연결하기 PC와 모바일에 모두 크롬이 설치 되어 있어야 한다. 모바일 기기와 PC를 USB로 연결한다. PC크롬에서 chrome://inspect/#devices에 접속한다. 위의 스크린샷처럼 아래에 연결된 모바일 기기와 모바일 크롬에서 접속 중인 사이트가 보인다 inspect를 클릭하면 해당 모바일 기기와 연결된 크롬 창이 PC에 뜨게 된다. 이곳에서도 디버깅을 할 수 있다 2번의 경우 직접 테스트 하는 모바..

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

@media screen and (hover: none) and (pointer: coarse) { //code } 기존의 반응형 웹에서는 해상도(가로)를 기준으로 반응하여 레이아웃을 짠다. 하지만 코딩을 하다보면 해상도와 별개로 PC와 모바일기기를 별개의 레이아웃을 보여줘야할 때가 있으며, 해당 부분은 css만으로 처리가 어렵기 때문에 자바스크립트, 또는 백엔드언어인 JSP, PHP, ASP 등에서 구분지어 별개의 페이지를 출력하거나 소스를 짜는 경우가 있다. 위에 보여진 미디어쿼리는 모바일기기와 PC에서 가장 큰 이벤트 차이인 호버와 포인터 이벤트가 해당 기기에 있는지 없는지를 구분하는 미디어쿼리이다. 해상도에 따라 반응하는것이 아닌 모바일기기이냐 PC이냐에 따라 반응하는 레이아웃을 만들고 싶다면 위..

webkit-appearance: none; 아이폰, IOS계열 운영체제에서 사용하는 옵션인데 그 외의 운영체제의 브라우저에서 사용될때도 반영되어 css가 오동작 일으키는 경우가 있다. 혹시라도 브라우저에서 체크박스나 라디오 버튼이 클릭이 되지 않거나 보이지 않는 경우 해당 부분이 적용되어있는가 확인해보는 것이 좋다

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