캐시 서버 구축하기
나만의 캐시 서버를 구축해 이미지, 비디오 등을 캐싱하고, 이미지를 WebP 파일로 변환하기
나만의 캐시 서버를 구축해 이미지, 비디오 등을 캐싱하고, 이미지를 WebP 파일로 변환하기
인터넷 익스플로러로 페이지에 접근할 시 엣지로 요청을 넘겨버리는 간단한 방법
wp_list_comments의 html 구조를 변경하는 방법
웹 사이트를 PWA로 업데이트하기에서 PWA가 된 웹 앱 / 웹 사이트(이하 웹 앱)를 스토어에 출시하는 간단한 방법입니다. 코드는 한 줄도 더 쓰실 필요 없습니다.Bubblewrap, PWA Builder 등의 선택지가 있으며, Bubblewrap은 커맨드 라인에서, PWA Builder는 웹에서 앱을 제작합니다. 이 글에선 조금 더 간단한 PWA Builder로 구글 플레이 스토어에 출시하는 것을 기준으로 설명하겠습니다. 완성된 앱은 제 블로그...
PWA(Progressive Web App)의 정보를 담은 Manifet 파일의 작성 방법
GithubLive Demo 웹 어셈블리를 통해 브라우저에서 Javascript뿐 아니라 C, C++ 등의 언어로 작성된 프로그램도 돌릴 수 있는 시대가 도래한 지도 꽤 되었습니다.고로, 서버에 파일 업로드 => 파일 변환 => 변환된 파일 다운로드라는 번거로운 과정을 거쳤던 파일 변환을 FFmpeg을 통해 클라이언트 혼자서 해낼 수 있게 되었습니다. 앱 생성 snowpack으로 typescript를 이용한 react 앱 템플릿을 생성해줍니다. 물론...
사용자의 스크롤, 클릭 등에 반응하는 페이지를 만들면, 1초에도 몇십 번씩 특정 함수가 동작해야 할 때가 많습니다.간단한 애니메이션을 출력하는 정도라면 상관없겠지만, 복잡한 그래픽 연산이 들어가는 작업을 아무런 최적화 없이 이벤트 리스너만 추가해두면 시스템 자원을 갉아먹고 디스플레이의 주사율보다 더 많이 실행되어 오히려 프레임 방어를 못 해주는 상황까지 발생하기도 합니다. 이렇게 무거운 함수를 돌리는 와중에도 event.preventDefault() 사용 여부를...
가끔 웹사이트에 투명한 배경화면을 넣고 싶을 때가 있는데, 웹에 널리 쓰이는 mp4는 알파 값(rgba 할 때 a)이 없어 투명한 색을 넣을 수 없습니다.mp4는 IE 9부터 어지간한 브라우저는 다 지원하는 반면, webm은 지원하는 브라우저는 좀 적어도(Can I Use), 훨씬 높은 압축률과 알파 채널이 있어 투명한 색을 넣을 수 있단 장점이 있습니다. 이번엔 간단하게 크로마키 등을 이용해...
접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 경우가 많기에, 키보드로 선택한 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focus-visible이란 의사 클래스(가상 클래스 / pseudo class)를 통해 이를 디자인을...
