개발하다가 글쓰는 블로그

웹개발과 시간웹 개발을 하다 보면 시간 생성은 꼭 필요한 작업이다.단순히 현재 시각을 표시하고 싶을 때도 있고 로깅이나 성능 측정을 위해서도 필요하다.하지만 만약 브라우저에서 단순히 Date.now()나 performance.now()를 사용하고 있다면 정확한 시간을 얻지 못하고 있을 수도 있다.왜냐하면 브라우저는 보안상의 이유로 시간에 의도적 오차를 삽입하기 때문이다JavaScript에서 사용 가능한 시간 관련 API시간 측정은 크게 두 가지 방식이 있는데, 원하는게 무엇인지에 따라 사용할 API가 달라진다.API용도단위비고Date.now()절대시각ms (number)전통적 방식performance.now()상대시각μs (float)페이지 로드 후 경과시간Temporal.now.instant()절대시각..

개발하면서 소소하게 필요한 도구들이 있는데 검색하면 외국 사이트들이 나오긴 해도 광고도 많고, 데이터를 서버에서 처리하는곳도 있어서 괜히 찝찝해서 연습 겸 직접 만든 사이트 https://tools.jongwoo.me/ vue3 + nuxt로 제작해봤다 특징으로는 서버 없이 모두 브라우저에서 처리하기 때문에 데이터 유출이 없음 그리고 광고 없음 기능 목록은 다음과 같다 - JSON/SQL formatter - Image converter (jpeg, png, webp, base64) - HTML viewer - Epoch converter - CSV to JSON converter - Image converter - URL encoder/decoder - Color code converter (RGB, ..

웹 브라우저에서 사용 가능한 저장소는 다양하다. 크롬 기준 개발자도구에서 Application으로 들어가면 Storage 항목을 확인할 수 있는데 이것들이 모두 사용가능한 저장소들이다. Trust Tokens, Interest Groups는 표준은 아니고 크롬에서만 지원하는 기능인 듯 하다. 이번 글을 작성하면서 각 Storage에 대해 정리 해보고 특히 잘 사용하지 않는 IndexedDB의 사용법도 공부했다. 1. Cookie 쿠키는 웹 서비스에서 무상태(Stateless) 프로토콜이 HTTP에 상태를 주입하기 위해서 사용한다. 주로 인증 정보나 사용자 트래킹 정보등이 저장된다 쿠키는 매 HTTP 요청마다 보내지기 때문에 많은 데이터를 저장하는 경우 통신이 비효율적이므로 가능하면 작은 양의 데이터를 저..

웹페이지에서 js로 단축키 처럼 사용할 수 있도록 기능을 추가 하기 위해서 관련 코드를 찾아봤다. 많은 곳에서 document.onkeyup = function(e) { if (e.which === {{key code}}) { // 로직 } } 위와 같은 형식으로 입력 키를 감지하는 코드를 예시로 작성해 놓은 것을 볼 수 있었다. 하지만 UIEvent.which는 deprecated 되었기 때문에 기존 작성된 코드가 아니라면 사용하지 않는게 좋겠다. MDN에서는 대안으로 keyCode 또는 charCode 를 사용하라고 제시하고 있는데 charCode, keyCode 또한 deprecated 되었다. code를 쓰는 방법과 key를 쓰는 방법이 있지만 code의 경우에는 qwerty기준으로 코드를 반환하..

certbot을 이용해 무료 인증서를 사용하고 있는데 90일의 유효기간이 있다보니 크론탭을 이용해서 재발급을 자동화했다. 그런데 매번 크론탭 설정할때마다 잘 동작할지 결과를 확인하고 저장하기 때문에 실행결과를 파일로 쓰도록 쉘 스크립트를 설정했었는데 예전의 일이라 잘 기억이 안났다 결국 다른사람 도움받아서 어떻게 해결했는데... 기억하기 어렵네 ㅎㅎ;; 아래와 같이 작성했다 0 0 1 * * /home/ubuntu/certbot_renew.sh >> crontab.log 2>&1 이렇게 설정해서 실행결과와 에러를 모두 crontab.log 파일로 작성하도록 했다 매번 헷갈리는 파일 디스크립터는 찾다보니 잘 정리해 주신 분이 있어서 링크도 함께 남긴다. https://blogger.pe.kr/369

오랜만에 개인적으로 ubuntu 서버를 발급받아 nginx를 설치하게 되었다. 인증서를 사용하기 위해서 cerbot을 설치하려고 보니 전부터 많은 블로그들이 apt를 사용해서 certbot을 설치하는 내용을 공유하고 있었어서 나도 전에 ubuntu 20.04를 사용할 땐 그랬었는데.. 정작 certbot 홈페이지에서는 snap으로 설치하도록 안내하고 있었다. https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal Certbot Instructions Tagline certbot.eff.org 찾아보니까 데비안 쪽에서만 쓰는 apt랑 다르게 다양한 배포판에서 사용가능하다고 한다. 1. snap 최신버전 확인 sudo snap install core; s..