팀 프로젝트 엘리스 SW 트랙에는 2번의 팀 프로젝트가 있습니다.그중 7주간 학습한 Vanilla JS와 Node.js를 활용해 2주가 조금 안 되는 기간 웹 서비스를 제작하는 첫 번째 팀 프로젝트를 진행 중입니다.저번 주 화요일(14일)부터 시작해 이번 주 토요일(25일)까지 코드를 완성하고, 다음 주 월요일(27일)에 발표가 이뤄집니다. 일정을 보시면 아시겠지만, 프로젝트를 진행하기엔 아주 촉박한 시간이고, 덕분에 전 여가와 잠 등을
개발 서버 세팅 전 제작일지에서도 언급했듯, SharedArrayBuffer 사용을 위해선 사이트 격리를 위한 헤더 추가가 필요한데, snowpack에는 dev server의 응답 헤더를 수정하는 기능이 없습니다. 억지로 node_modules/snowpack/lib/cjs/commands/dev.js 파일을 수정하여 응답 헤더를 추가해줬습니다.
블로그 글로벌 네비게이션 다크 모드 설정 버튼이 드로어에만 숨어있는 건 접근성이 떨어지지 않을까 항상 고민이 많았는데, 눈에 보이는 곳 중 적당히 넣을만한 데가 없어서 해결은 못 하고 있었습니다.결국 좌우대칭을 포기하고 글로벌 네비게이션에 넣어봤는데, 나름 적당한 위치인 것 같네요. 버튼은 하난데 테마는 셋(라이트, 세피아, 다크)이라 토글을 어떻게 해야 할지도 고민거리였는데, 단순하게 라이트 -> 세피아 -> 다크
앞서 작성했던 VSCode를 Syntax Hihglighter로 쓰는 방법에서 cog25 님이 shiki라는 Syntax Highlighter를 추천해주셔서, 이를 이용해 온라인 구문 강조기를 제작해봤습니다. 이제 VSCode 없는 환경에서도 codeblock을 만들 수 있습니다!오타 찾거나 하면 굳이 랩탑이나 데스크탑 켤 것 없이 모바일에서도 간단하게 수정할 수 있겠네요. GithubLive Demo 하이라이팅 된 결과물을 렌더링하는 요소와 textarea를 폰트 등에 관한 옵션은 모두 똑같게 주고,
TOC 구현 한번 만들어보고 싶다고 생각하진 1년도 넘었을 것 같은 기능입니다.볼 때마다 예쁘긴 한데, 뭔가 실용적이진 않은 것 같고, 모바일에선 표시도 힘든데다 깔끔하게 만들기도 어려워 보여서 저울질만 한참 했네요.만들고 보니 글이 한층 구조적 이어 보이기도 하고, 시각적 재미도 있는 것 같아 마음에는 듭니다. 최적화할 여지가 꽤 있어 보이는데, 쉽진 않네요. 코드가 깔끔하게 정리되고 나면 한
🏁 시작 어쩌다 보니 팔자에 없던 영어 과외를 진행하게 되었습니다. 자연스럽게 단어 시험을 쳐야 했고, 아무래도 웹앱 형태로 진행하는 게 편하지 않을까 싶은 제 판단(과 같이 수업하시는 분의 당당한 요청)에 의해 단어 공부 및 시험을 위한 웹앱을 제작했습니다. 살인적인 1주일이란 마감일과 함께요. 어디가서 코딩한다고 말해봤자 얻는 건 학부생의 "혹시 xx 언어도 다룰 줄 아세요?"라는 질문과
간만의 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라이브 데모 일전에 블로그에 업데이트하고 굉장히 만족도가 높았던 이미지 줌 효과를 난생처음 npm 패키지로 만들어보고 있습니다.그간 만든 것은 대부분 코드를 복사 붙여 넣기 해야 쓸 수 있었는데, 이젠 cdn 링크를 script로 추가하는 건 물론이고, npm i smooth-zoom으로 설치까지 할 수 있습니다. webpack으로 빌드해보려다 계속 실패해서 일단 수동으로 작업해서 올려뒀는데, Rollup으로 갈아타거나 간단한 스크립트를 만들거나 해서
WebP는 구글에서 만든 이미지 포맷으로, JPEG, PNG 등의 포맷보다 우월한 압축률을 자랑하는 포맷입니다.물론 IE는 읽지 못하는 포맷이고, 사파리도 부분적으로만 지원하기에 결국 기존 이미지 포맷과 병행해서 사용해야 한단 단점이 있습니다. 개인적으론 앞선 단점보다 이미지를 내려받았을 때 휴대폰에서 이미지를 볼 수 없단 단점 때문에 싫어했고요. 근데 이젠 딱히 아이돌 관련된 사진을 올리지도 않으니 블로그에 내려받을 이미지도 없고,