TypeScript 태그 글

React에서 dialog 만들기

React에서 dialog 만들기

바쁘다는 핑계로 너무 오랜만에 글을 올리는 것 같네요. 😥 1일 1커밋 그거 뭐 별일인가 하는 생각으로 살고는 있지만, 그것관 별개로 770일간 쌓아 올린 탑이 무너지는 건 슬픈 일이라 일하면서도 꾸준히 contribute은 진행하고 있습니다.그러다 보니 퇴근하고 코드 좀 치면 산책(매일 한 시간 이상은 뒷산을 걷습니다) 나갈 시간이라 블로그에 통 신경을 못 쓰고 있었네요. ua에 내장된 window.confirm,

배너 생성기 리팩터링

배너 생성기 리팩터링

요즘 예전에 진행했다 GitHub에서 하루하루 썩어가는 프로젝트들 전반적으로 리팩터링 하는 중입니다. 웹 앱과 GitHub에서 결과물을 확인하실 수 있습니다. 3년 전에 커밋한 파일이란 점, "commit"이란 강렬한 커밋 메시지에서 짐작해볼 수 있듯 지금보다 많이 못 하던 시절에 제작한 웹 앱입니다. 명색이 블로깅하면서 가장 많이 사용하는 앱인데, 아무래도 그냥 내버려둬도 그저 그런대로 작동하다 보니 오랜 세월 방치하고 있었네요.내부적으론 아주 많이 뜯어고쳤는데, 겉으로 볼 땐 큰 차이가 없는 걸 보면 역시 업데이트가 멈추는 시점은 앱이 완성되는 시점이 아니라 제작자의 마음이 떠나는 시점이 아닐까 다시 한 번 생각하게 되네요.

Online Syntax Highlighter 만들어보기

Online Syntax Highlighter 만들어보기

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

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

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

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

201226 잡다한 제작일지

201226 잡다한 제작일지

블로그 검색 취소 버튼 & 햄버거 버튼 검색 취소 버튼도 햄버거 버튼과 똑같은 스타일을 적용해, 통일감을 높였습니다. 또한, 버튼이 화살표로 변경됐을 때 1px 정도 오차가 있길래 수정했습니다.몇몇 브라우저에선 1px이 어긋나니 뭔가 이상한 게 눈에 보일 정도로 뒤틀리더라고요. 페이지네이션 버튼 4페이지 이상(1페이지 버튼이 안 보이는 상황)에선 첫 페이지로 가는 버튼을 추가하고, 마지막 페이지 버튼이 안 보이는