배너 이미지

제작일지

배너 생성기 리팩터링

배너 생성기 리팩터링

요즘 예전에 진행했다 GitHub에서 하루하루 썩어가는 프로젝트들 전반적으로 리팩터링 하는 중입니다. 웹 앱과 GitHub에서 결과물을 확인하실 수 있습니다. 3년 전에 커밋한 파일이란 점, "commit"이란 강렬한 커밋 메시지에서 짐작해볼 수 있듯 지금보다 많이 못 하던 시절에 제작한 웹 앱입니다. 명색이 블로깅하면서 가장 많이 사용하는 앱인데, 아무래도 그냥 내버려둬도 그저 그런대로 작동하다 보니 오랜 세월 방치하고 있었네요.내부적으론...

220326 Smooth Zoom 제작일지

220326 Smooth Zoom 제작일지

번들러 추가 더는 수동으로 빌드하지 않아도 됩니다.webpack과 rollup의 차이를 뼈에 새기는 계기가 되었네요.관련해 글을 하나 작성해볼까 싶기도 했으나, 이미 한글로도 글이 꽤 많아 넘어갈 생각입니다. 빌드 자동화를 못 해 시작하기 꺼려지거나, 아예 시작조차 못 했던 많은 작업도 진행하게 됐습니다. Typescript 도입 수동으로 빌드하던 시절에도 할 수는 있는 작업이었지만, 아무래도 일을 불필요하게 여러 번 해야 해서...

엘리스 두 번째 팀 프로젝트 회고

엘리스 두 번째 팀 프로젝트 회고

프로젝트 소개 Github 기술 소개서 엘리스 SW 엔지니어 트랙이란 커리큘럼 속에서 꽤 오랜 시간 함께 교육을 들었으나, 비대면으로 진행된 탓에 교육생 간 소통이 원활하지 못했습니다.더군다나 수료 후에도 지속해서 교육생을 묶어줄 커뮤니티의 부재를 해결하고자 커뮤니티를 제작하게 되었습니다. 안타깝게 AI 트랙을 4기 동안이나 진행하면서도 없던 커뮤니티가 저희 수료 날에 디스코드 서버로 생겨버린 탓에 흐지부지되긴 했습니다. 엘리스에서 제공해준...

README 업데이트 자동화 삽질기

README 업데이트 자동화 삽질기

작년 말부터, 제 Github Profile에 태연과 윈터가 손을 흔들며 반겨주기 시작했습니다. 다 좋은데, 매번 똑같은 이미지만 보이는 것보단 다양한 이미지가 보이는 게 낫지 않을까 싶어, 이미지 여러 개를 저장해두고 Github actions를 활용해 매일 자정마다 README.md 파일을 업데이트해보자는 야심 찬 계획을 세웠습니다. Typescript import { readFileSync, writeFileSync } from "fs"; import { resolve } from "path";...

2차 프로젝트 시작하기 직전에야 쓰는 1차 프로젝트 회고

2차 프로젝트 시작하기 직전에야 쓰는 1차 프로젝트 회고

About Project Github 기획서 프로젝트 팀원 분들과 주제를 정하다, 이렇다 할 주제가 나오질 않아 서로의 관심사를 공유하는 시간을 가져봤고, 그 과정에서 '여행'과 '음식'이란 키워드가 가장 많이 겹쳐 '음식이 가져다주는 행복'을 지역별로 기록하는 서비스를 제작하게 되었습니다. 결과물 서버가 내려가서 작동 과정이 가장 잘남은 자료가 스터디원 분들께 크롬 개발자 도구에 Recorder 나온 거 보여 드리려고 촬영했던 동영상이네요.프리미어로...

엘리스 sw트랙 팀 프로젝트 중간 회고

엘리스 sw트랙 팀 프로젝트 중간 회고

팀 프로젝트 엘리스 SW 트랙에는 2번의 팀 프로젝트가 있습니다.그중 7주간 학습한 Vanilla JS와 Node.js를 활용해 2주가 조금 안 되는 기간 웹 서비스를 제작하는 첫 번째 팀 프로젝트를 진행 중입니다.저번 주 화요일(14일)부터 시작해 이번 주 토요일(25일)까지 코드를 완성하고, 다음 주 월요일(27일)에 발표가 이뤄집니다. 일정을 보시면 아시겠지만, 프로젝트를 진행하기엔 아주 촉박한 시간이고, 덕분에 전 여가와 잠 등을...

211110 GIF Converter 제작일지

211110 GIF Converter 제작일지

개발 서버 세팅 전 제작일지에서도 언급했듯, SharedArrayBuffer 사용을 위해선 사이트 격리를 위한 헤더 추가가 필요한데, snowpack에는 dev server의 응답 헤더를 수정하는 기능이 없습니다. 억지로 node_modules/snowpack/lib/cjs/commands/dev.js 파일을 수정하여 응답 헤더를 추가해줬습니다. function sendResponseFile(req, res, { contents, originalFileLoc, contentType }) {     var _a;     const body = Buffer.from(contents);     const ETag = etag_1.default(body,...

210924 블로그 제작일지

210924 블로그 제작일지

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

Online Syntax Highlighter 만들어보기

Online Syntax Highlighter 만들어보기

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

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