웹 사이트를 PWA로 업데이트하기

웹 사이트를 PWA로 업데이트하기

PWA(Progressive Web App)란 웹은 높은 접근성을 가진 매력적인 플랫폼입니다.한 번의 코딩으로 거의 모든 기기에서 접근할 수 있고, 검색이나 주소의 공유로 누구나 어디에서나 접속할 수 있습니다. 별도의 업데이트 또한 필요없이 접속할 때마다 최신 상태를 보여줍니다. 하지만 유저를 묶어두기 힘들단 단점이 있습니다.앱을 설치하면 단순히 아이콘 한 번 클릭하면 앱을 실행시킬 수 있지만, 웹은 브라우저를 켜고 사이트에 접속하는

JavaScriptPWA
푸시 알림 구독 재추가!

푸시 알림 구독 재추가!

6개월 전에 One Signal로 추가했던 푸시 알림 구독을 직접 구현해봤습니다! 구현을 위해 알림을 보내는 작은 서버를 하나 추가했습니다. Node.js로 https 서버 만들려다 고생만 실컷 하고 실패했는데, ssl 인증은 Nginx가 하고 proxy_pass로 Node.js 서버로 넘겨주니 간단하게 되더라고요.MongoDB도 처음 써봅니다만, 구독 정보도 JSON 형식이고, Node.js로 서버를 돌리니 제일 맞는 DB 같아 골랐습니다. 들어가기 전에, 댓글 알림 구현을

푸시 알림구독제작일지
200819 블로그 제작일지

200819 블로그 제작일지

Masonry 라이브러리 제거 유일하게 남아있던 라이브러리를 제거했습니다.약 1년쯤 전에 제거를 시도해봤다가 지레 겁먹고 한발 물러났는데, 이젠 Infinite Scroll도 없어졌겠다, 두려울 게 없어 도전해봤는데 성공적이었네요. 사용한 코드는 Codepen에 정리해뒀습니다.보통 Masonry는 Infinite Scroll처럼 아이템 추가 / 제거가 잦은 상황에 많이 사용될 텐데, 그건 전혀 대비하지 않았습니다.또한, Masonry 레이아웃은 두 번째 줄부턴 들어갈 수 있는 가장 높은 위치를

워드프레스제작일지
Project SPA

Project SPA

티스토리에서 워드프레스로 넘어올 때도 이렇게 힘들진 않았던 것 같은데, 이번 대규모 업데이트는 정말 진이 다 빠지네요. 이번 대규모 삽질의 핵심입니다.이제 새 탭에서 열리는 링크가 아니면 DOM 내용만 업데이트됩니다. 되게 힘들었는데 한 줄로 정리되니까 슬프네요. SPA 깃허브, 유튜브 등의 웹사이트나 Ghost.js, Gatsby.js 등으로 만든 웹사이트를 보며 동경하던 게 개발자 도구에서 네트워크 탭 켜두면 저렇게 차곡차곡 내용이

워드프레스SPA제작일지
200805 블로그 제작일지

200805 블로그 제작일지

요즘 워드 프레스 정도 기능이 있는 블로그를 제작하는 게 굉장히 어렵다는 걸 새삼 느끼는 중입니다.Ghost, GatsbyJS, Jekyll 처럼 댓글 기능도 없고 그냥 정적 페이지만 만드는 거면 내일 당장에라도 하겠는데, 원하는 기능이 너무 많다 보니 영 쉽지 않네요. 물론 그렇다고 포기할 생각은 딱히 없고, 내년 연말까지 기간을 두고 넉넉하게 제작해보려 합니다.일단 작동하게 만들고 천천히 업데이트를 해나가면

워드프레스제작일지
200728 About IU 제작일지

200728 About IU 제작일지

이 정도면 완성했다 싶어 배포를 시작했는데, 항상 배포를 시작하고 보면 고쳐야 할 게 눈에 보입니다.이래서 다들 알파 테스트, 베타 테스트 거치고 출시하나 봅니다. 홈 페이지 인스타그램 피드를 외부 페이지로 옮기니 홈 페이지는 정말 아무것도 볼 게 없는 페이지가 되어버렸습니다.조금이라도 단조로움을 깨보려고 뮤직비디오가 무작위로 재생되게 했습니다.우측 하단에 음소거 토글 버튼도 추가했습니다.또, 흰 글자가 잘 안 보일

ReactJS아이유제작일지
200724 About IU 제작일지

200724 About IU 제작일지

캐시 버그 수정 페이지와 직접적인 연관은 없습니다만, html, css, js 등 모든 파일을 캐싱 처리해둬서 최신 버전의 페이지를 보실 수 없을 수도 있습니다.새로 고침 후에도 새롭게 제작된 항목이 보이지 않으신다면 캐시를 비우고 재접속해주세요.이렇게 초보적인 실수를 또 하다니…죄송합니다. 😥 한 번만 비우시면 다음부턴 업데이트가 진행돼도 캐시를 비우실 필요는 없습니다. 유튜브 페이지 생성 최근 유튜브에 올라온 동영상을

ReactJS아이유제작일지
200719 블로그 제작일지 및 앞으로 나아갈 방향

200719 블로그 제작일지 및 앞으로 나아갈 방향

움짤 첨부 시 mp4로 변환 ffmpeg를 활용해 gif 이미지를 올리시면 mp4로 전환되게 해뒀습니다.예전부터 gif는 낡고 비효율적인 파일이라고 주장해왔는데, 정작 제 웹사이트에선 gif 파일을 첨부하면 gif 그대로 사용하던 아이러니한 일이 이젠 벌어지지 않습니다. ffmpeg를 처음 활용해봐서 처음엔 모바일에서 비디오가 재생 안 되는 문제가 있었습니다만, 이젠 Chrome(android + macOS + windows), Firefox(windows), Safari(iOS, macOS), Internet Explorer 등의

워드프레스제작일지