블로그 자동 재구독 2020년 결산에서 언급했던 문젠데, 저 글에 적었던 대로 2021년의 저는 해결 방법을 알아냈습니다. 푸시 알림 구독 기간이 만료되어 생기는 문제였는데, pushsubscriptionchange 이벤트의 리스너를 추가하면 해결할 수 있는 문제였습니다.짧게 첨언하면, pushsubscriptionchange 이벤트는 기간 만료 등 애플리케이션 제어 밖에서 푸시 알림 구독에 변화가 생겼을 때 발생합니다. 이제 매번 기간 만료될 때마다 다시 구독 버튼을...
WebP는 구글에서 만든 이미지 포맷으로, JPEG, PNG 등의 포맷보다 우월한 압축률을 자랑하는 포맷입니다.물론 IE는 읽지 못하는 포맷이고, 사파리도 부분적으로만 지원하기에 결국 기존 이미지 포맷과 병행해서 사용해야 한단 단점이 있습니다. 개인적으론 앞선 단점보다 이미지를 내려받았을 때 휴대폰에서 이미지를 볼 수 없단 단점 때문에 싫어했고요. 근데 이젠 딱히 아이돌 관련된 사진을 올리지도 않으니 블로그에 내려받을 이미지도 없고,...
비디오를 움짤로 변환할 때 종종 필요 없는 부분을 잘라야 할 때가 있어서, 관련 옵션을 업데이트해봤습니다.쉽게 보고 시작했는데, 8방향 모두 크기 조절이 가능하도록 업데이트하는 게 쉬운 일은 아니더라고요. 앱에서 확인해보시면 아시겠지만, 일단 비디오를 크롭하는 것까진 성공했고 스케일을 조정해도 문제없이 gif 이미지가 나오는 것까진 확인해서 기능 제작은 끝났습니다. 이제 기능 제작보다 더 큰 난관 하나만 해결하면 되는데…...
블로그 테스트 라이브러리 도입 적어도 스크리븥의 오류는 모두 해결하고 배포하기 위해 Jest로 테스트를 작성 중입니다.근데 말썽을 일으키는 코드는 대부분 이런 방식으론 잡기 힘든 거라, QA Wolf 같은 라이브러리도 곁들여야 하나 싶네요. 애니메이션 검색창 버튼을 누르면 검색어를 입력하는 부분은 아무런 트랜지션 없이 나타났는데, 이젠 내비게이션에 있는 햄버거 아이콘, 검색 아이콘을 제외한 요소가 올라가고 검색창이 내려오는 애니메이션을...
간단한 스크롤 애니메이션 페이지 제작한 방법과 짧은 후기
블로그 검색 취소 버튼 && 햄버거 버튼 검색 취소 버튼도 햄버거 버튼과 똑같은 스타일을 적용해, 통일감을 높였습니다. 또한, 버튼이 화살표로 변경됐을 때 1px 정도 오차가 있길래 수정했습니다.몇몇 브라우저에선 1px이 어긋나니 뭔가 이상한 게 눈에 보일 정도로 뒤틀리더라고요. 페이지네이션 버튼 4페이지 이상(1페이지 버튼이 안 보이는 상황)에선 첫 페이지로 가는 버튼을 추가하고, 마지막 페이지 버튼이 안 보이는...
분명 12월 8일에 출신데 몇 시인지(기준 시간은 언젠지)가 안 적혀있어서 어제부터 계속 시간이 날 때마다 업데이트 안 떴나 확인하고 있었습니다.오늘도 아침 6시 반에 일어나서 한 시간 간격으로 확인해보다가 8시 반에 확인해보니 업데이트가 드디어 뜨길래 워드프레스와 PHP 버전 업데이트를 마쳤습니다. 사실 워드프레스 5.6이 기다려진 이유는 워드프레스의 신기능보단 PHP 8 때문이었는데, 이제 nginx에서 fastcgi_pass unix:/run/php/php8.0-fpm.sock;를 입력해도 사이트가...
오랜만에 굉장히 신 나는 마음으로 제작일지를 작성합니다.주체할 수 없는 아드레날린에 휩싸이는 기분…굉장히 오랜만이네요. 이미지 줌 효과 예전부터 medium을 보며 탐내던 기능인데, 1180px로 이미지의 너비 제한을 걸어두고 클릭하면 원본을 보여주는데, 이미지를 불러오기 전엔 크기를 알 수 없어 결국 x, y 좌표만 움직이는 애니메이션이 되는지라 시도도 안 해보고 마음 한 편에 담아만 두고 있었습니다. 매번 탐만 내다보니...
스킨 소개 먼저, 글꼴을 인피니티산스와 가나초코로 변경했습니다. 기본적으로 인피니티산스를 사용하고, 제목에 가나초코를 사용합니다. 또한, 썸네일이 조금 덜 각지게 표시되게 업데이트했고, 슬라이더의 디자인을 조금 다듬었습니다. 드로어를 여는 버튼에 커서를 올리면 화살표로 변하는 애니메이션을 추가하고, 카테고리 상단에 구분 선을 추가했습니다. 하위 카테고리 목록에도 배경을 추가해 구분이 뚜렷하여지게 했습니다. 댓글 / 방명록을 입력하는 부분의 여백을 통일감 있게 수정했습니다....