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

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

최근의 농구는 많이 바뀌었다. 10년대 초반까지만 하더라도 마이클 조던이 전성기이던 90년대 농구와 크게 차이가 없었지만 최근에는 과거에 말하던 포지션 개념도 많이 무너지고, 요구하는 롤, 경기를 전개하는 방법 등이 많이 달라졌다. 그 중 가장 많이 달라진것이라 하면 바로 트렌지션일것이다. 과거에는 아웃넘버의 속공 상황이 아니라면 5명이 다 넘어와 선수들이 자리를 잡고 공격을 전개하는것이 트렌드였다면 요즘은 시간에 상관없이 아웃넘버에 상관없이 상대의 수비가 빈틈이 있고, 찬스가 나면 바로 공격하는 농구가 되었고, 속공에서의 3점이나 상대의 수비가 어수선 할때 빠른 트렌지션 오펜스 후 백코트는 NBA에서는 거의 매일 볼 수 있는 장면이다. 그렇기에 트렌지션 오펜스에 강한 가드들이나 기동력이 좋은 포워드들이..

인터넷의 발달로 전세계의 농구를 쉽게 접할 수 있는 시대가 되었으나, 코로나 시국으로 인해 라이브 농구경기는 찾아 볼 수 없게 되었다. 농구를 볼 수 없고, 농구를 할 수 없는 생활이 반년 가까이 되니 마치 철학자가 된 것 마냥 심오해지기만 한다. 농구의 특징 인기가 많은 구기종목은 룰이 단순하고 명확하며 파고들면 파고들수록 재밌는 스포츠가 대다수이다. Easy to learn hard to master 컴퓨터 게임 업계에서 주로 쓰는 말이지만 세계화 된 스포츠 중에서 위의 말을 따르지 않는 스포츠는 거의 없다고 봐도 될 것이다. 왜 저 말이 중요하냐면, 모르는 사람이 봐도 알 수 있어야 쉽게 매력에 빠져들 수 있으며, 마스터하기는 어려워야 계속 새로운 매력이 나올 수 있기 때문이다. 아마 게임중에서는 ..

KBL이 이번시즌 부터 유튜브를 적극적으로 활용하기 시작하면서 만드는 컨텐츠가 있다. 바로 비디오룰북 NBA에서는 이미 한참전에 깔끔하게 정리가 된 영상이 올라와 있었던 부분이라 아쉬운 부분이지만 NBA는 오히려 해당영상을 룰 개정이나 트렌드에 맞게 정리하지 않고 그대로 쭉 사용하는 바람에 오해의 소지가 있는 영상도 소수 있기도 하다. KBL의 대부분의 판정 논란인 편파판정이나 논란이 되는 애매한 장면에서 심판들의 어정쩡한 태도와 잘못된 대처능력이 문제가 되는경우가 많지 판정 자체에 문제가 있는경우는 생각보다 없다는것을 감안할 때, 룰을 정확히 알려주는것은 이러한 논란을 조금은 더 줄일 수 있는 방법이라고 생각된다. 문제는 이러한 룰북으로 팬들, 또는 룰을 알고 싶은 사람들에게 정보를 전달해주는것은 좋은..

절망편 앞서 말한것이 희망과 미래에 대해 이야기 했다면 현재 왜 적용이 힘든지, 사용이 힘든지 말해보겠다 우선 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가 오동작 일으키는 경우가 있다. 혹시라도 브라우저에서 체크박스나 라디오 버튼이 클릭이 되지 않거나 보이지 않는 경우 해당 부분이 적용되어있는가 확인해보는 것이 좋다