꾸생의 DevLog

꾸생의 DevLog
꾸생의 DevLog

Toy Project (5)

Post Thumbnail

티스토리 블로그 썸네일 메이커

썸네일 메이커(Thumbnail-Maker) 2021년이 끝나갈 때쯤 이것저것 만들어보기 시작했는데요. 이미지 압축해주는 웹앱부터 티스토리 스킨, 이번에는 썸네일 메이커를 만들어보았습니다. 블로그를 운영하시는 분들이라면 글 대표 썸네일을 만드는 것이 하나의 고민거리가 되기 마련입니다. 제 경우 글 내용과 유사한 사진을 픽사베이에서 찾고 파워포인트로 이것저것 수정해서 업로드를 합니다. 글을 쓸 수록 썸네일의 퀄리티는 점점 떨어지고 일관성조차 없어 나중에 글 목록에 여러 썸네일들과 함께 보았을 땐 말도 아니게 어지럽더라고요. 그래서 간단하고 직관적인 썸네일로만 빠르게 만들어 사용하려고 직접 썸네일 메이커라는 웹앱을 만들어봤습니다. 개발자 블로그인 벨로그에 토이 프로젝트로 썸네일 메이커를 만드신 분이 계신데,..

Post Thumbnail

티스토리 스킨 직접 만들어봤다.

티스토리 블로그의 최대 장점은 내가 마음대로 스킨을 꾸밀 수 있고 원하는 기능적인 부분을 자바스크립트로 구현 가능하다는 점이다. 무료로 제공되는 티스토리 스킨도 있고 여러 사람들이 제작하고 무료로 배포하는 스킨들도 많아 선택의 폭이 넓다. 처음에는 Odyssey, Apost, 고래 스킨 등 여기저기 난민처럼 옮겨다니면서 나름 커스텀으로 만들어서 사용했지만 이 참에 그냥 내가 하나 만들어 보기로 했다. 우선 내가 만들고 싶은 스킨의 느낌은 한 문장으로 말할 수 있다. Simple is Best! 스킨 기획 정말 심플하고 단순한 스킨이 필요했다. 광고로 도배되어 있는 블로그가 아닌 정말 컨텐츠에 중심이 쏠리도록 레이아웃을 구성하려고 했다. 블로그 사이드바는 좌측 아이콘 형태로 기본 닫혀있게 배치해 카테고리나..

Post Thumbnail

텔레그램 가상화폐 시세 알림봇 만들기 - 2편

텔레그램 가상화폐 시세 알림봇 만들기 1편을 안보신 분은 아래 게시글을 확인해주세요. 가상화폐 시세 알리미 - 텔레그램 봇 만들기 - 1편 텔레그램 봇 만들기 오늘은 가상화폐 시세를 알려주는 텔레그램 봇을 만들어보려고 합니다. 가상화폐를 보유하고 있으면 스마트폰으로 하루에도 수십 번 시세를 확인할 텐데요. 본격적으로 코 juni-official.tistory.com 텔레그램 가상화폐 시세 알림봇 1편에 이어 2편에서는 서버에 배포하는 코드를 작성해보도록 하겠습니다. 매일2시간씩 하루에 12번 메시지를 보내야 하기 때문에 24시간 돌아가는 서버가 필요합니다. 다행히도 저는 포트폴리오 배포를 위한 AWS ec2 Linux 서버를 돌리고 있어 텔레그램 봇이랑 같이 배포해보도록 하겠습니다. Node Expres..

Post Thumbnail

텔레그램 가상화폐 시세 알림봇 만들기 - 1편

텔레그램 봇 만들기 오늘은 가상화폐 시세를 알려주는 텔레그램 봇을 만들어보려고 합니다. 가상화폐를 보유하고 있으면 스마트폰으로 하루에도 수십 번 시세를 확인할 텐데요. 본격적으로 코인판에 불장이 왔을 때는 정말 5분마다 시세를 확인하고 밤을 지새우며 시세를 봤던 때가 생각나네요. 지금은 그 정도는 아니지만 하루에 여러 번 시세를 확인하곤 합니다. 하지만 이렇게 시세를 보고 있으면 다른 급등 코인들에 쓸데없이 시간을 뺏기기도 하고 잘못 된 판단을 할 수 있게하는 불필요한 정보를 피하기 위해 텔레그램 봇으로 필요한 시세만 조회할 수 있도록 만들어보겠습니다. 우선 간단하게 제가 필요로 하는 요구사항을 나열해보겠습니다. 요구사항 1. 2시간 단위로 텔레그램을 통해 가상화폐 시세를 전달받는다. (12시 -> 2시..

Post Thumbnail

[React] 리액트를 활용한 간단한 텍스트 게시판

리액트를 활용한 간단한 게시판 리액트를 공부하면서 정말 조금이라도 서버 단과 DB를 직접 구현해서 간단한 텍스트 게시판을 만들어보았습니다. 블로그 게시판처럼 위지윅 에디터인 Ckeditor5를 연동하려 했으나, 웹팩 설정에서 오류가 도저히 고쳐지지 않아 나중에 다시 시도해보거나 다른 에디터로 추가해야겠습니다. 연동하려면 이미지 업로드 기능 때문에 백엔드도 손봐야 합니다. * 작업환경 장비 : MacBook Pro 13인치(macOS BigSur) OS : Mac IDE : Visual Studio Code 브라우저 : PC : 크롬(Chrome) Mobile : Safari(iOS) * 개발환경 프론트엔드 : 리액트(Webpack, babel), CSS(반응형) - 라이브러리 : Material-UI,..

1

새로운 블로그로 이사했습니다. 😆

Home | 꾸생 블로그

프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)

kku.dev