배너 이미지
210924 블로그 제작일지

210924 블로그 제작일지

블로그 글로벌 네비게이션 다크 모드 설정 버튼이 드로어에만 숨어있는 건 접근성이 떨어지지 않을까 항상 고민이 많았는데, 눈에 보이는 곳 중 적당히 넣을만한 데가 없어서 해결은 못 하고 있었습니다.결국 좌우대칭을 포기하고 글로벌 네비게이션에 넣어봤는데, 나름 적당한 위치인 것 같네요. 버튼은 하난데 테마는 셋(라이트, 세피아, 다크)이라 토글을 어떻게 해야 할지도 고민거리였는데, 단순하게 라이트 -> 세피아 -> 다크...

Online Syntax Highlighter 만들어보기

Online Syntax Highlighter 만들어보기

앞서 작성했던 VSCode를 Syntax Hihglighter로 쓰는 방법에서 cog25 님이 shiki라는 Syntax Highlighter를 추천해주셔서, 이를 이용해 온라인 구문 강조기를 제작해봤습니다. 이제 VSCode 없는 환경에서도 codeblock을 만들 수 있습니다!오타 찾거나 하면 굳이 랩탑이나 데스크탑 켤 것 없이 모바일에서도 간단하게 수정할 수 있겠네요. GithubLive Demo 하이라이팅 된 결과물을 렌더링하는 요소와 textarea를 폰트 등에 관한 옵션은 모두 똑같게 주고,...

와룡공원 야경과 일출

와룡공원 야경과 일출

야경 210502 성곽이 주는 분위기와 서울이라고는 믿기 힘든 풍경이 어우러져 꽤 아름다운 야경을 가진 곳입니다. 처음 보면 10분 정도를 넋 놓고 바라만 볼 정도로 아름다운데, 절반도 안 담긴 기분이라 여러모로 아쉽네요. 210613 산책 나왔다 달 뜬 모습 보고 허겁지겁 집으로 돌아가 카메라 챙겨 나와서 찍은 사진입니다.5분만 늦게 나왔어도 못 찍었을 사진이네요. 일출 210827 여기선 일출을...

210826 블로그 제작일지

210826 블로그 제작일지

TOC 구현 한번 만들어보고 싶다고 생각하진 1년도 넘었을 것 같은 기능입니다.볼 때마다 예쁘긴 한데, 뭔가 실용적이진 않은 것 같고, 모바일에선 표시도 힘든데다 깔끔하게 만들기도 어려워 보여서 저울질만 한참 했네요.만들고 보니 글이 한층 구조적 이어 보이기도 하고, 시각적 재미도 있는 것 같아 마음에는 듭니다. 최적화할 여지가 꽤 있어 보이는데, 쉽진 않네요. 코드가 깔끔하게 정리되고 나면 한...

React, Node.js를 이용한 영어 단어 공부 앱 제작기

React, Node.js를 이용한 영어 단어 공부 앱 제작기

🏁 시작 어쩌다 보니 팔자에 없던 영어 과외를 진행하게 되었습니다. 자연스럽게 단어 시험을 쳐야 했고, 아무래도 웹앱 형태로 진행하는 게 편하지 않을까 싶은 제 판단(과 같이 수업하시는 분의 당당한 요청)에 의해 단어 공부 및 시험을 위한 웹앱을 제작했습니다. 살인적인 1주일이란 마감일과 함께요. 어디가서 코딩한다고 말해봤자 얻는 건 학부생의 '혹시 xx 언어도 다룰 줄 아세요?'라는 질문과...

210603 블로그 제작일지

210603 블로그 제작일지

마지막으로 블로그 제작일지 쓴 게 언제인지 확인하다 3월 8일인 걸 확인하곤 경악을 금치 못했습니다…Github에서 4페이지나 넘어다니며 커밋 로그들 확인했네요. 커밋을 네 페이지 넘게 하긴 했지만, 눈에 띄는 굵직한 변화는 없고, 대부분 리팩토링이나 최적화긴 합니다.몇 번째 하는 말인진 모르겠지만 이젠 정말 작업이 끝났고 내실을 다지며 이렇게 자잘하게 고쳐가지 않을까 싶네요. 드로워에 최근 글 / 최근 댓글...

210517 Smooth Zoom 제작일지

210517 Smooth Zoom 제작일지

간만의 Smooth Zoom 업데이트입니다. 아쉽게도 아직 마음에 드는 빌더는 못 찾았네요. 언제까지 수동으로 빌드해야 할지 의문입니다… 다양한 Argument // HTMLElement || HTMLElement[] Zoom(document.querySelector(".zoomable")); Zoom([     document.querySelector(".foo"),     ...document.querySelectorAll(".zoomable"), ]); // NodeList Zoom(document.querySelectorAll(".zoomable")); 기존엔 CSS 선택자만 문자열로 넘길 수 있었는데, 이젠 HTMLElement, HTMLElement[], NodeList 모두 넘길 수 있습니다.Method를 사용할 목적으로 만들 땐 아무것도 넘기지 않으셔도 문제가 생기지 않게도...

생존신고

생존신고

사실 저의 생존 여부쯤은 Github에서도 확인할 수 있고, 이 서버가 가동되고 있단 것 자체가 제 생이 유지되고 있음의 방증이긴 합니다만 너무 오래도록 글을 쓰지 않아 이러다 블로그에 글을 쓰는 방법을 잊어버리는 게 아닐까 염려되어 오랜만에 '새 글 추가' 페이지에서 글을 써내려 봅니다.잡담 카테고리엔 장장 10개월 만에 새 글을 추가하네요. 글이 뜸했던 이유는 잔디밭에서도 확인할 수...

구독 유저 데이터베이스 초기화

구독 유저 데이터베이스 초기화

개인적인 사정으로 오래 글을 못 쓰고 있었네요.블로그에 신경을 크게 못 쓰고 있다 보니 자연스럽게 푸시 알림 서버에 생긴 문제도 파악을 못 하고 있었습니다. 개인적인 불찰로 구독하신 정보를 저장한 db가 초기화되어, 좌측 하단의 종이 활성화되어있어도 취소하고 다시 구독하시기 전까진 알림이 가지 않습니다.불편을 끼쳐 드려 거듭 죄송합니다.

📚 카테고리

제작일지

제작일지

Tips

Tips

작업물

작업물

잡담

잡담

갤러리

갤러리

📃 외부 페이지

📷 갤러리

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