카테고리 대폭 축소

카테고리 대폭 축소

다소 뜬금없다 느끼실 수 있는 옛날 얘기로 시작하자면, 제가 제일 처음 생성한 블로그엔 최상위 카테고리만 21개가 있었습니다.분류도 게임, 일상, 과학, IT, 문학 등 정말 다양했고, 분류의 다양성을 보면 아시겠지만 거의 일상에서 일어나는 일을 모두 기록하는 수준이었습니다. '기록'이라고 부르기엔 일필휘지로 써내려간 잡담이 대부분이었지만요. 그래도 방문자가 평균 2만 ~ 3만가량으로 좋은 편이었고, 댓글도 적은 편은 아니었기에 놀이터론...
웹 사이트를 PWA로 업데이트하기

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

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

푸시 알림 구독 재추가!

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

Imgur API로 이미지 업로드하기

시작하기 전에 Imgur에서 앱을 추가하시고 클라이언트 ID를 발급받으셔야 합니다.회원가입을 진행하셨으면 클라이언트 추가 페이지로 가주세요. Authorization callback URL은 API 키를 발급받을 때 쓰는 주소입니다.그냥 운영하시는 웹사이트의 주소를 써넣으시면 됩니다만, 그냥 네이버 주소 같은 것 치셔도 작동은 합니다. 성공적으로 클라이언트 추가를 마치시면 위 페이지가 나옵니다.Client ID: 아래에 적힌 문자열을 복사해둬 주세요.혹시 Client ID를 잊으시거나 클라이언트 설정을 변경하시려면...
200819 블로그 제작일지

200819 블로그 제작일지

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

Project SPA

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

📚 카테고리

📃 싱글 페이지

카카오페이 qr코드 모바일이시라면 클릭