스크롤 애니메이션 가지고 놀기
간단한 스크롤 애니메이션 페이지 제작한 방법과 짧은 후기
워드프레스 5.6, PHP 8.0 업데이트
분명 12월 8일에 출신데 몇 시인지(기준 시간은 언젠지)가 안 적혀있어서 어제부터 계속 시간이 날 때마다 업데이트 안 떴나 확인하고 있었습니다.오늘도 아침 6시 반에 일어나서 한 시간 간격으로 확인해보다가 8시 반에 확인해보니 업데이트가 드디어 뜨길래 워드프레스와 PHP 버전 업데이트를 마쳤습니다. 사실 워드프레스 5.6이 기다려진 이유는 워드프레스의 신기능보단 PHP 8 때문이었는데, 이제 nginx에서 fastcgi_pass unix:/run/php/php8.0-fpm.sock;를 입력해도 사이트가
201207 블로그 제작일지
오랜만에 굉장히 신 나는 마음으로 제작일지를 작성합니다.주체할 수 없는 아드레날린에 휩싸이는 기분…굉장히 오랜만이네요. 이미지 줌 효과 예전부터 medium을 보며 탐내던 기능인데, 1180px로 이미지의 너비 제한을 걸어두고 클릭하면 원본을 보여주는데, 이미지를 불러오기 전엔 크기를 알 수 없어 결국 x, y 좌표만 움직이는 애니메이션이 되는지라 시도도 안 해보고 마음 한 편에 담아만 두고 있었습니다. 매번 탐만 내다보니
바닐라 자바스크립트로 SPA 만든 과정과 후기
바닐라 자바스크립트로 싱글 페이지 애플리케이션을 제작한 과정과 후기를 간단히 정리해봤습니다.
푸시 알림 구독 재추가!
6개월 전에 One Signal로 추가했던 푸시 알림 구독을 직접 구현해봤습니다! 구현을 위해 알림을 보내는 작은 서버를 하나 추가했습니다. Node.js로 https 서버 만들려다 고생만 실컷 하고 실패했는데, ssl 인증은 Nginx가 하고 proxy_pass로 Node.js 서버로 넘겨주니 간단하게 되더라고요.MongoDB도 처음 써봅니다만, 구독 정보도 JSON 형식이고, Node.js로 서버를 돌리니 제일 맞는 DB 같아 골랐습니다. 들어가기 전에, 댓글 알림 구현을
Project SPA
티스토리에서 워드프레스로 넘어올 때도 이렇게 힘들진 않았던 것 같은데, 이번 대규모 업데이트는 정말 진이 다 빠지네요. 이번 대규모 삽질의 핵심입니다.이제 새 탭에서 열리는 링크가 아니면 DOM 내용만 업데이트됩니다. 되게 힘들었는데 한 줄로 정리되니까 슬프네요. SPA 깃허브, 유튜브 등의 웹사이트나 Ghost.js, Gatsby.js 등으로 만든 웹사이트를 보며 동경하던 게 개발자 도구에서 네트워크 탭 켜두면 저렇게 차곡차곡 내용이
200719 블로그 제작일지 및 앞으로 나아갈 방향
움짤 첨부 시 mp4로 변환 ffmpeg를 활용해 gif 이미지를 올리시면 mp4로 전환되게 해뒀습니다.예전부터 gif는 낡고 비효율적인 파일이라고 주장해왔는데, 정작 제 웹사이트에선 gif 파일을 첨부하면 gif 그대로 사용하던 아이러니한 일이 이젠 벌어지지 않습니다. ffmpeg를 처음 활용해봐서 처음엔 모바일에서 비디오가 재생 안 되는 문제가 있었습니다만, 이젠 Chrome(android + macOS + windows), Firefox(windows), Safari(iOS, macOS), Internet Explorer 등의
구구단 문제 리메이크 - React
깃허브도전해보기 React랑 조금 친하게 지내보려고 예전에 만들어둔 것들을 React로 다시 짜보고 있습니다.로또 추첨기가 첫 번째, 구구단 문제가 두 번째, 다음으론 가사집을 생각하고 있습니다. 사용자가 종료하기 전까지 문제가 계속되고, 난도도 계속 상승하던 예전관 달리 난이도와 문제 수를 고를 수 있게 해뒀습니다.보통을 2 ~ 20, 어려움을 11 ~ 20, 아주 어려움을 11 ~ 30으로 해뒀다가, "보통"이란 난이도에서
Frameless Gallery 1.2 업데이트
자동 다크 모드 해제 지금까진 사용자가 다크 모드를 사용하거나, 시간이 19시부터 06시 사이라면 블로그 주인이 설정한 테마를 무시하고 다크 모드가 적용됐습니다.이젠 옵션에 "자동 다크 모드"가 추가되어 이 기능을 끌 수 있습니다. 빠른 링크 로딩 prefetch 업데이트에서 추가했던 기능을 frameless gallery에도 추가했습니다."빠른 링크 로딩" 옵션을 활성화하시면, 사용자가 링크에 마우스를 올리면 페이지의 내용을 미리 불러와 훨씬 빠르게