클린 코드 및 최적화 '나만 읽을 거고, 다 외우니 상관없다'란 안일한 생각으로 악습관을 늘려가지 않을까 걱정되기도 하고, 이제 기능 추가보단 내실을 기할 때라 판단해 코드 대청소를 시작했습니다.대충 지었던 변수명 및 함수명을 제대로 짓고, 새로 작성하는 코드엔 각주도 어지간하면 추가합니다. 또한 글로벌 변수를 줄이고, class로 다루는 게 더 낫다고 판단되는 것들은 class로 묶어뒀습니다. 일례로 배너 및...
PWA(Progressive Web App)란 웹은 높은 접근성을 가진 매력적인 플랫폼입니다.한 번의 코딩으로 거의 모든 기기에서 접근할 수 있고, 검색이나 주소의 공유로 누구나 어디에서나 접속할 수 있습니다. 별도의 업데이트 또한 필요없이 접속할 때마다 최신 상태를 보여줍니다. 하지만 유저를 묶어두기 힘들단 단점이 있습니다.앱을 설치하면 단순히 아이콘 한 번 클릭하면 앱을 실행시킬 수 있지만, 웹은 브라우저를 켜고 사이트에 접속하는...
6개월 전에 One Signal로 추가했던 푸시 알림 구독을 직접 구현해봤습니다! 구현을 위해 알림을 보내는 작은 서버를 하나 추가했습니다. Node.js로 https 서버 만들려다 고생만 실컷 하고 실패했는데, ssl 인증은 Nginx가 하고 proxy_pass로 Node.js 서버로 넘겨주니 간단하게 되더라고요.MongoDB도 처음 써봅니다만, 구독 정보도 JSON 형식이고, Node.js로 서버를 돌리니 제일 맞는 DB 같아 골랐습니다. 들어가기 전에, 댓글 알림 구현을...
시작하기 전에 Imgur에서 앱을 추가하시고 클라이언트 ID를 발급받으셔야 합니다.회원가입을 진행하셨으면 클라이언트 추가 페이지로 가주세요. Authorization callback URL은 API 키를 발급받을 때 쓰는 주소입니다.그냥 운영하시는 웹사이트의 주소를 써넣으시면 됩니다만, 그냥 네이버 주소 같은 것 치셔도 작동은 합니다. 성공적으로 클라이언트 추가를 마치시면 위 페이지가 나옵니다.Client ID: 아래에 적힌 문자열을 복사해둬 주세요.혹시 Client ID를 잊으시거나 클라이언트 설정을 변경하시려면...
Masonry 라이브러리 제거 유일하게 남아있던 라이브러리를 제거했습니다.약 1년쯤 전에 제거를 시도해봤다가 지레 겁먹고 한발 물러났는데, 이젠 Infinite Scroll도 없어졌겠다, 두려울 게 없어 도전해봤는데 성공적이었네요. 사용한 코드는 Codepen에 정리해뒀습니다.보통 Masonry는 Infinite Scroll처럼 아이템 추가 / 제거가 잦은 상황에 많이 사용될 텐데, 그건 전혀 대비하지 않았습니다.또한, Masonry 레이아웃은 두 번째 줄부턴 들어갈 수 있는 가장 높은 위치를...
티스토리에서 워드프레스로 넘어올 때도 이렇게 힘들진 않았던 것 같은데, 이번 대규모 업데이트는 정말 진이 다 빠지네요. 이번 대규모 삽질의 핵심입니다.이제 새 탭에서 열리는 링크가 아니면 DOM 내용만 업데이트됩니다. 되게 힘들었는데 한 줄로 정리되니까 슬프네요. SPA 깃허브, 유튜브 등의 웹사이트나 Ghost.js, Gatsby.js 등으로 만든 웹사이트를 보며 동경하던 게 개발자 도구에서 네트워크 탭 켜두면 저렇게 차곡차곡 내용이...
요즘 워드 프레스 정도 기능이 있는 블로그를 제작하는 게 굉장히 어렵다는 걸 새삼 느끼는 중입니다.Ghost, GatsbyJS, Jekyll 처럼 댓글 기능도 없고 그냥 정적 페이지만 만드는 거면 내일 당장에라도 하겠는데, 원하는 기능이 너무 많다 보니 영 쉽지 않네요. 물론 그렇다고 포기할 생각은 딱히 없고, 내년 연말까지 기간을 두고 넉넉하게 제작해보려 합니다.일단 작동하게 만들고 천천히 업데이트를 해나가면...
이 정도면 완성했다 싶어 배포를 시작했는데, 항상 배포를 시작하고 보면 고쳐야 할 게 눈에 보입니다.이래서 다들 알파 테스트, 베타 테스트 거치고 출시하나 봅니다. 홈 페이지 인스타그램 피드를 외부 페이지로 옮기니 홈 페이지는 정말 아무것도 볼 게 없는 페이지가 되어버렸습니다.조금이라도 단조로움을 깨보려고 뮤직비디오가 무작위로 재생되게 했습니다.우측 하단에 음소거 토글 버튼도 추가했습니다.또, 흰 글자가 잘 안 보일...
캐시 버그 수정 페이지와 직접적인 연관은 없습니다만, html, css, js 등 모든 파일을 캐싱 처리해둬서 최신 버전의 페이지를 보실 수 없을 수도 있습니다.새로 고침 후에도 새롭게 제작된 항목이 보이지 않으신다면 캐시를 비우고 재접속해주세요.이렇게 초보적인 실수를 또 하다니…죄송합니다. 😥 한 번만 비우시면 다음부턴 업데이트가 진행돼도 캐시를 비우실 필요는 없습니다. 유튜브 페이지 생성 최근 유튜브에 올라온 동영상을...
